溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用NodeJS怎么實(shí)現(xiàn)一個(gè)多語(yǔ)言功能

發(fā)布時(shí)間:2021-04-12 17:03:50 來(lái)源:億速云 閱讀:193 作者:Leah 欄目:web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)使用NodeJS怎么實(shí)現(xiàn)一個(gè)多語(yǔ)言功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

什么是多語(yǔ)言?

我們平時(shí)訪問(wèn)一些文檔類型的網(wǎng)站時(shí),經(jīng)??梢钥吹巾?yè)面右上角有一個(gè)下拉框用來(lái)選擇當(dāng)前頁(yè)面支持的語(yǔ)言,并在選中后將整個(gè)網(wǎng)頁(yè)的內(nèi)容切換為選中的語(yǔ)言,這就是項(xiàng)目中的多語(yǔ)言,多語(yǔ)言可以根據(jù)瀏覽器請(qǐng)求發(fā)送的語(yǔ)言類型在服務(wù)器進(jìn)行設(shè)置,也可以在請(qǐng)求服務(wù)器時(shí)返回多種語(yǔ)言,并根據(jù)權(quán)重和瀏覽器的支持情況進(jìn)行選擇和渲染。

功能描述

在本文中我們通過(guò)客戶端向服務(wù)器發(fā)送請(qǐng)求告訴服務(wù)器客戶端所支持的語(yǔ)言及權(quán)重,服務(wù)器檢索語(yǔ)言包并根據(jù)客戶端發(fā)送的語(yǔ)言類型和權(quán)重返回對(duì)應(yīng)語(yǔ)言的內(nèi)容。

在這個(gè)過(guò)程中客戶端向服務(wù)器發(fā)送請(qǐng)求需要使用請(qǐng)求頭 Accept-Language,值中設(shè)置語(yǔ)言類型和權(quán)重,語(yǔ)言與語(yǔ)言之間使用 , 隔開,語(yǔ)言與權(quán)重之間使用 ; 隔開,權(quán)重用 q 表示,與值用 = 隔開,如果權(quán)重值為 1 則可省略(最大值),值的格式為 zh-CN, zh;q=0.7, en;q=0.8, fr;q=0.1。

服務(wù)器響應(yīng)時(shí),應(yīng)通過(guò)響應(yīng)頭告訴瀏覽器返回的內(nèi)容為何種語(yǔ)言,響應(yīng)頭為 Content-Language, 值的格式為 zh-CN, en,多個(gè)語(yǔ)言之間使用 , 隔開。

服務(wù)器的實(shí)現(xiàn)

文件:server.js

const http = require("http");
const querystring = require("querystring");

// 語(yǔ)言包
let languagesPackage = {
  "zh-CN": "你好",
  en: "Hello",
  fr: "Bonjour"
};

// 默認(rèn)語(yǔ)言為英語(yǔ)
languagesPackage.defaultLanguage = "en";

// 創(chuàng)建服務(wù)器
let server = http.createServer((req, res) => {
  // 獲取請(qǐng)求頭中的語(yǔ)言和權(quán)重
  let languages = req.headers["accept-language"];

  // 如果客戶端設(shè)置了語(yǔ)言
  if (languages) {
    // 解析語(yǔ)言為 [{ name: 'zh-CN', q: 1 }, { name: 'en', q: '0.8' }] 格式
    let lans = languages
      .split(",")
      .map(lang => {
        let [name, q = 1] = Object.keys(
          querystring.parse(lang.tirm(), ";q=")
        );
        return { name, q };
      })
      .sort((a, b) => b.q - a.q); // 并按照權(quán)重逆序排序

    // 循環(huán)檢測(cè) languagesPackage 是否存在客戶端的語(yǔ)言
    for (let i = 0; i < lans.length; i++) {
      let { name } = lans[i];
      let content = languagesPackage[name];

      // 如果存在直接設(shè)置響應(yīng)頭并返回內(nèi)容
      if (content) {
        res.setHeader("Content-Type", name);
        return res.end(content);
      }
    }
  }

  // 如果客戶端沒(méi)設(shè)置語(yǔ)言活語(yǔ)言找不到時(shí)返回服務(wù)器設(shè)置的默認(rèn)語(yǔ)言
  res.setHeader("Content-Type", languagesPackage.defaultLanguage);
  res.end(languagesPackage[languagesPackage.defaultLanguage]);
});

server.listen(3000, () => {
  console.log("server start 3000");
});

其實(shí)上面服務(wù)器和客戶端配合實(shí)現(xiàn)多語(yǔ)言的思路就是客戶端向服務(wù)器發(fā)送 Accept-Language 告訴服務(wù)器需要的語(yǔ)言和權(quán)重,服務(wù)器解析后根據(jù)權(quán)重從大到小排序,然后循環(huán)判斷語(yǔ)言包中是否含有客戶端需要的語(yǔ)言,如果有,則中斷循環(huán)直接設(shè)置響應(yīng)頭和返回對(duì)應(yīng)內(nèi)容,如果不存在客戶端的需要的語(yǔ)言或者客戶端沒(méi)有向后臺(tái)發(fā)送 Accept-Language 則返回服務(wù)器默認(rèn)設(shè)置的語(yǔ)言類型和內(nèi)容。

驗(yàn)證多語(yǔ)言

為了方便我們使用 curl 模擬客戶端向服務(wù)器發(fā)送請(qǐng)求查看返回內(nèi)容是否正確,之所以使用 curl 是因?yàn)橹话l(fā)送驗(yàn)證的請(qǐng)求,方便設(shè)置 Accept-Language 請(qǐng)求頭,更靈活的控制多語(yǔ)言的類型和權(quán)重。

啟動(dòng)服務(wù)器 server.js,打開命令行窗口,輸入下面的命令執(zhí)行,查看返回命令行響應(yīng)體中的內(nèi)容和設(shè)置的語(yǔ)言是否對(duì)應(yīng)。

curl -v --header “Accept-Language: zh-CN, zh;q=0.7, en;q=0.8, fr;q=0.1” http://localhost:3000

關(guān)于使用NodeJS怎么實(shí)現(xiàn)一個(gè)多語(yǔ)言功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI