<del id="mkime"></del>

<strike id="mkime"></strike>

<fieldset id="mkime"></fieldset>

NPM酷庫：intl-messageformat，多語言處理

thekingisalwaysluc 發布于2019-08-26 11:39 / 1606人閱讀

摘要：酷庫，每天兩分鐘，了解一個流行庫。是一個用來輔助處理多語言的庫，可以支持在字符串中輸出變量，還可以支持復數形式。使用的是消息語法，支持名詞復數和選擇語法。

NPM酷庫，每天兩分鐘，了解一個流行NPM庫。·

在開發多國語言的項目時，為了給不同國家用戶顯示不同語言，我們一般會為每個語言分別建立一個Map映射，在界面上依據當前語言環境不同而輸出不同語言庫的字符串。

const MESSAGES = {
  "en":{
    greeting: "Hello"
  },
  "zh-CN":{
    greeting: "你好"
  }
}

function tr(message){
  return MESSAGES[LOCALE][message];
}

tr("greeting");  // Hello

在上述代碼中，我們就可以在英文環境中將greeting翻譯成“Hello”。

但是在大多數時候，如此簡單的機制無法滿足實際需求，比如，在英語環境中名詞有復數形式，上述直接輸出字符串的方式就無法滿足。

intl-messageformat

intl-messageformat 是一個用來輔助處理多語言的庫，可以支持在字符串中輸出變量，還可以支持復數形式。

const IntlMessageFormat = require("intl-messageformat");

const MESSAGES = {
  "en":{
    PHOTOS: "You have {photos, plural," +
        "=0 {no photos.}" +
        "=1 {one photo.}" +
        "other {# photos.}}"
  }
}

function tr(message,values){
  let msg = new IntlMessageFormat(MESSAGES[LOCALE][message],LOCALE);
  return msg.format(values);
}

tr("PHOTOS", { photos: 0 }); // You have no photos.
tr("PHOTOS", { photos: 1 }); // You have one photo.
tr("PHOTOS", { photos: 1000 }); // You have 1,000 photos.

intl-messageformat 使用的是 ICU 消息語法，支持名詞復數和選擇語法。

參考資料

ICU http://userguide.icu-project....

https://github.com/yahoo/intl...

云服務器 GPU云服務器多語言多語言對應多語言商城網站多語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107324.html

使用vue、react可以前后端分離開發，然后多語言問題怎么辦

摘要：前端多語言加載器，前端部署好各個語言的或語言包，可結合等使用。多語言，不就從瀏覽器里拿信息么，前端也可以。借此做一個前端語言包加載器。前端多語言加載器的特點切換語言，不用刷新頁面，語言包的一下就替換了。 multi-lang-js 前端JavaScript多語言加載器，前端部署好各個語言的json或txt語言包，可結合vue等使用。多語言，不就從瀏覽器navigator.langua...

leonardofed 2019-08-21 17:18 評論0 收藏0
React項目國際化(antd)多語言開發

摘要：本國際化方案僅針對技術棧，且不會涉及服務端國際化內容。引入多語言環境的數據雖然我只用到了文本翻譯的功能，以為就不需要加載這些數據，但后來發現這是必須的步驟。前言最近新接了一個項目，從0開始做，需要做多語言的國際化，今天搞了一下，基本達到了想要的效果，在這里簡單分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景國際化方案國際...

tracymac7 2019-08-02 15:21 評論0 收藏0
React項目國際化(antd)多語言開發

摘要：本國際化方案僅針對技術棧，且不會涉及服務端國際化內容。引入多語言環境的數據雖然我只用到了文本翻譯的功能，以為就不需要加載這些數據，但后來發現這是必須的步驟。前言最近新接了一個項目，從0開始做，需要做多語言的國際化，今天搞了一下，基本達到了想要的效果，在這里簡單分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景國際化方案國際...

wushuiyong 2019-08-23 18:17 評論0 收藏0
vue 國際化i18n 多語言切換

摘要：如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。安裝 npm install vue-i18n 新建一個文件夾 i18n ，內新建 en.js zh.js index.js 三個文件準備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 評論0 收藏0