摘要:酷库,每天两分钟,了解一个流行库。是一个用来辅助处理多语言的库,可以支持在字符串中输出变量,还可以支持复数形式。使用的是消息语法,支持名词复数和选择语法。
NPM酷库,每天两分钟,了解一个流行NPM库。·
在开发多国语言的项目时,为了给不同国家用户显示不同语言,我们一般会为每个语言分别建立一个Map映射,在界面上依据当前语言环境不同而输出不同语言库的字符串。
const MESSAGES = { "en":{ greeting: "Hello" }, "zh-CN":{ greeting: "你好" } } function tr(message){ return MESSAGES[LOCALE][message]; } tr("greeting"); // Hello
在上述代码中,我们就可以在英文环境中将greeting翻译成“Hello”。
但是在大多数时候,如此简单的机制无法满足实际需求,比如,在英语环境中名词有复数形式,上述直接输出字符串的方式就无法满足。
intl-messageformatintl-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
摘要:前端多语言加载器,前端部署好各个语言的或语言包,可结合等使用。多语言,不就从浏览器里拿信息么,前端也可以。借此做一个前端语言包加载器。前端多语言加载器的特点切换语言,不用刷新页面,语言包的一下就替换了。 multi-lang-js 前端JavaScript多语言加载器,前端部署好各个语言的json或txt语言包,可结合vue等使用。 多语言,不就从浏览器navigator.langua...
摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...
摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...
摘要:如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: hello workd ! } }; zh.js export d...
阅读 2198·2019-08-30 10:51
阅读 753·2019-08-30 10:50
阅读 1424·2019-08-30 10:49
阅读 3098·2019-08-26 13:55
阅读 1534·2019-08-26 11:39
阅读 3391·2019-08-26 11:34
阅读 1904·2019-08-23 18:30
阅读 3344·2019-08-23 18:22