NPM酷库：intl-messageformat，多语言处理

thekingisalwaysluc 发布于2019-08-26 11:39 / 1451人阅读

摘要：酷库，每天两分钟，了解一个流行库。是一个用来辅助处理多语言的库，可以支持在字符串中输出变量，还可以支持复数形式。使用的是消息语法，支持名词复数和选择语法。

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...

私有云专线服务多语言多语言对应多语言商城网站多语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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); 背景国际化方案国际...

leiyi 2019-08-05 17:26 评论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