什么是多語言?
我們平時訪問一些文檔類型的網站時,經??梢钥吹巾撁嬗疑辖怯幸粋€下拉框用來選擇當前頁面支持的語言,并在選中后將整個網頁的內容切換為選中的語言,這就是項目中的多語言,多語言可以根據瀏覽器請求發送的語言類型在服務器進行設置,也可以在請求服務器時返回多種語言,并根據權重和瀏覽器的支持情況進行選擇和渲染。
功能描述
在本文中我們通過客戶端向服務器發送請求告訴服務器客戶端所支持的語言及權重,服務器檢索語言包并根據客戶端發送的語言類型和權重返回對應語言的內容。
在這個過程中客戶端向服務器發送請求需要使用請求頭 Accept-Language,值中設置語言類型和權重,語言與語言之間使用 , 隔開,語言與權重之間使用 ; 隔開,權重用 q 表示,與值用 = 隔開,如果權重值為 1 則可省略(最大值),值的格式為 zh-CN, zh;q=0.7, en;q=0.8, fr;q=0.1。
服務器響應時,應通過響應頭告訴瀏覽器返回的內容為何種語言,響應頭為 Content-Language, 值的格式為 zh-CN, en,多個語言之間使用 , 隔開。
服務器的實現
文件:server.js
const http = require("http");const querystring = require("querystring");// 語言包let languagesPackage = {  "zh-CN": "你好",  en: "Hello",  fr: "Bonjour"};// 默認語言為英語languagesPackage.defaultLanguage = "en";// 創建服務器let server = http.createServer((req, res) => {  // 獲取請求頭中的語言和權重  let languages = req.headers["accept-language"];  // 如果客戶端設置了語言  if (languages) {    // 解析語言為 [{ 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); // 并按照權重逆序排序    // 循環檢測 languagesPackage 是否存在客戶端的語言    for (let i = 0; i < lans.length; i++) {      let { name } = lans[i];      let content = languagesPackage[name];      // 如果存在直接設置響應頭并返回內容      if (content) {        res.setHeader("Content-Type", name);        return res.end(content);      }    }  }  // 如果客戶端沒設置語言活語言找不到時返回服務器設置的默認語言  res.setHeader("Content-Type", languagesPackage.defaultLanguage);  res.end(languagesPackage[languagesPackage.defaultLanguage]);});server.listen(3000, () => {  console.log("server start 3000");});其實上面服務器和客戶端配合實現多語言的思路就是客戶端向服務器發送 Accept-Language 告訴服務器需要的語言和權重,服務器解析后根據權重從大到小排序,然后循環判斷語言包中是否含有客戶端需要的語言,如果有,則中斷循環直接設置響應頭和返回對應內容,如果不存在客戶端的需要的語言或者客戶端沒有向后臺發送 Accept-Language 則返回服務器默認設置的語言類型和內容。
新聞熱點
疑難解答
圖片精選