js端的国际化 多语言处理方案，
. 可以适配react(动态切换语言)， 建议v16.12.0 以上版本
. 可以适配vue 2.x(动态切换语言), 建议v2.6.x 以上版本
. 在 Vue和 React 下由于页面业务复杂，允许子组件注册独立的 国际化模块
. 可以将android规范下的国际化多语言资源文件 strings.xml, 编译为自己所需要的js资源文件
复数判断参考 http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html
npm install i18n-xml-js --save最简单的例子：
import I18nJs, {setLocal, addPluralization, plurals} from 'i18n-xml-js'; const en = { "array": { "cities": ["beijing", "shanghai", "jinan", "qingdao"] }, // 复数 "plurals": { "cardinal": { "wastetime": { "one": (...arg) => `${arg[0]} minute`, "other": (...arg) => `${arg[0]} minutes` } }, "ordinal": { takeRight: { // zero, one: (...args)=>`Take the ${args[0]}st right.`, two: (...args)=>`Take the ${args[0]}nd right.`, few: (...args)=>`Take the ${args[0]}rd right.`, // many, other: (...args)=>`Take the ${args[0]}th right.` } }, "range":{ days: { other: (...args)=>`${args[0]}–${args[0]} days` } } }, "string": { "welcome_messages": (...arg) => `Hello, ${arg[0]}! You have ${arg[1]} new messages.`, "app_name": "GetApps", "pref_title_auto_update_market": "Update \"GetApps\" automatically", "notif_button_update_all": "<font color=#ff6243>Update all</font>", "btn_retry": "TRY AGAIN", "btn_price": (...arg) => `￥${arg[0]}`, "btn_progress": (...arg) => `${arg[0]}%%`, "btn_pausable": "PAUSE", "user_agreement_msg": (...arg) => `To use the basic features of this service, you must agree that us can collect, process, and use your personal data, including the personal balabalabalabala <a href=\"${arg[0]}\">Privacy Policy</a>. Agree?` } }; const zh={ "array": { "cities": ["北京", "上海", "济南", "青岛"] }, "plurals": { "cardinal": { "wastetime": { "other": (...arg) => `${arg[0]} 分钟` } }, "ordinal": { takeRight: { // zero, // many, other: (...args)=>`选择第 ${args[0]} 个 权利.` } }, "range":{ days: { other: (...args)=>`${args[0]}–${args[1]} 天` } } }, "string": { "welcome_messages": (...arg) => `你好, ${arg[0]}! 你有 ${arg[1]} 条消息.`, "app_name": "应用商店", "pref_title_auto_update_market": "自动更新 \"应用商店\"", "notif_button_update_all": "<font color=#ff6243>升级所有应用</font>", "btn_retry": "再试一下", "btn_price": (...arg) => `￥${arg[0]}`, "btn_progress": (...arg) => `${arg[0]}%%`, "btn_pausable": "暂停", "user_agreement_msg": (...arg) => `好长一段文字呀，啦啦啦阿拉蕾 <a href=\"${arg[0]}\">快快快快快快</a>. 同意吗?` } }; // 设置显示语言。默认就是en setLocal('en') // 'en' 相当于备用语言，如果en里有些字段没有，则用zh里的显示 const i18n = I18nJs({en, zh}, 'en') const lang = i18n.lang; // 获取一个字段 lang.string.app_name // GetApps lang.array.cities[0] // beijing // 有参数的字段 lang.string.welcome_messages('小明', 20) //Hello, 小明! You have 20 new messages. // 处理复数 // 基础的复数, 第一个数字用于判断复数类型，后边的参数用于模板字符串 plurals.cardinal(lang.plurals.cardinal.wastetime, 5, 5) // 5 minutes plurals.cardinal(lang.plurals.cardinal.wastetime, 1, 1) // 1 minute //序数复数, 第一个数字用于判断复数类型，后边的参数用于模板字符串 plurals.cardinal(lang.plurals.ordinal.takeRight, 5, 5) // Take the 5th right. plurals.cardinal(lang.plurals.ordinal.takeRight, 1, 1) // Take the 1st right. // 区间复数 第一、二个数字用于判断复数类型，后边的参数用于模板字符串 plurals.range(lang.plurals.range.days, 1, 2, 1, 2) // 1–2 days // addPluralization(pluralization) // i18n-xml-js 默认的复数解析规则只有 en(英语)，zh(中文)，姚添加其它语言的，就需要用到 addPluralization // 增加日语的复数判断器 addPluralization({ ja: { // 基本复数 cardinal: (count)=>{ if (count == 0) { return 'zero' } return 'other' }, // 序数复数 ordinal: (count)=>{ return 'other' }, // 区间复数 range: (count1, count2)=>{ return 'other' } } }) //**复数判断参考** //http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html 具体可以参考 react-example 需要注意的是Android下边没有基于序数和区间的复数规则~ 所以编译出的文件复数只有plurals.cardinal
package.json 添加scriprs 命令 npm run parseFormXML
"scripts": { "parseFormXML": "parseFromXML i18n/**/*.xml" },zh.xml
<?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2"> <string-array name="citys"> <item>北京</item> <item>上海</item> <item>济南</item> <item>青岛</item> </string-array> <plurals name="wastetime"> <item quantity="one">%d 分钟</item> <item quantity="other">%d 分钟</item> </plurals> <string name="welcome_messages">你好, %1$s! 你有 %2$d 新消息.</string> <string name="app_name" translatable="false">应用市场</string> <string name="pref_title_auto_update_market">自动更新 "应用市场"</string> <string name="notif_button_update_all"><![CDATA[<font color=#ff6243>更新全部</font>]]></string> <!--仅海外按钮高亮--> <string name="btn_retry">再试一次</string> <string name="btn_price">￥<xliff:g id="priceNumber">%1$s</xliff:g></string> <string name="btn_progress"><xliff:g id="precentage">%1$d</xliff:g>%%</string> <string name="btn_pausable">暂停</string> <string name="user_agreement_msg"><![CDATA[To 要使用本应用基础服务, 你需要同意本应用搜集和使用您的个人信息, 巴拉巴拉吧啦 <a href=\"%1$s\">隐私政策</a>. 您是否同意?]]></string> </resources>output: zh.js
const local = { "array": { "citys": ["北京", "上海", "济南", "青岛"] }, "plurals": { "cardinal": { "wastetime": { "one": (...arg) => `${arg[0]} 分钟`, "other": (...arg) => `${arg[0]} 分钟` } } }, "string": { "welcome_messages": (...arg) => `你好, ${arg[0]}! 你有 ${arg[1]} 新消息.`, "app_name": "应用市场", "pref_title_auto_update_market": "自动更新 \"应用市场\"", "notif_button_update_all": "<font color=#ff6243>更新全部</font>", "btn_retry": "再试一次", "btn_price": (...arg) => `￥${arg[0]}`, "btn_progress": (...arg) => `${arg[0]}%%`, "btn_pausable": "暂停", "user_agreement_msg": (...arg) => `要使用慈祥基础服务, 你需要同意本应用搜集和使用您的个人信息, 巴拉巴拉吧啦 <a href=\"${arg[0]}\">隐私政策</a>. 您是否同意?` } }; export default local;国际化多语言实例工厂
import I18nJs from 'i18n-xml-js'; //... // I18nJs({语言资源对象}, '备用语言(一定要选择语言资源对象 里有的key)') const i18n = I18nJs({en, zh, /* ..其他语言.. */}, 'en') 设置当前语言
import {setLocal} from 'i18n-xml-js'; //... // setLocal('当前语言') setLocal('en')增加复数判断器 ,i18n-xml-js 默认只包含en(英语)，zh(中文)的复数判断器
import {addPluralization} from 'i18n-xml-js'; //... // addPluralization({复数规则解析对象}) addPluralization({// 增加日语的复数判断器 ja: { // 基本复数 cardinal: (count)=>{ if (count == 0) { return 'zero' } return 'other' }, // 序数复数 ordinal: (count)=>{ return 'other' }, // 区间复数 range: (count1, count2)=>{ return 'other' } } })当前语言下的复数判断器
import {plurals} from 'i18n-xml-js'; //... // 基础的复数, 第一个数字用于判断复数类型，后边的参数用于模板字符串 plurals.cardinal(lang.plurals.cardinal.wastetime, 5, 5) // 5 minutes plurals.cardinal(lang.plurals.cardinal.wastetime, 1, 1) // 1 minute //序数复数, 第一个数字用于判断复数类型，后边的参数用于模板字符串 plurals.cardinal(lang.plurals.ordinal.takeRight, 5, 5) // Take the 5th right. plurals.cardinal(lang.plurals.ordinal.takeRight, 1, 1) // Take the 1st right. // 区间复数 第一、二个数字用于判断复数类型，后边的参数用于模板字符串 plurals.range(lang.plurals.range.days, 1, 2, 1, 2) // 1–2 days