javascript - 如何优雅的在一个js文件里配置多语言（i18n），求探讨思路

问题描述

我搜了搜资料，发现大多数是不同语言的js文件分开做，然后根据用户语言环境去加载对应的js文件。

但是我现在因为使用场景限制，最好是在一个js文件里完成。我现在打算支持3种语言（中文、日文、英文），而且输出文字的地方也比较多，可能有上百条，中间也经常要拼接变量。

var result=10;document.body.innerHTML='一共有'+result+'个结果';

现在我的思路有两种，一种是把语言文字保存到一个变量里；一种是把文字写在原地，形式为数组，然后使用下标调用。

// 方式1：判断语言后确定唯一的结果。有点割裂，而且在使用时只能看到属性名，影响思路// {w1}是占位符，每个配置写了多遍是为了模拟数量多的时候的情景var lang={};if () { // 判断为中文 lang.tip1='一共有{w1}个结果'; // lang.tip2='一共有{w1}个结果'; // lang.tip3='一共有{w1}个结果'; // lang.tip4='一共有{w1}个结果'; // lang.tip5='一共有{w1}个结果';}else if(){ // 判断为日文 lang.tip1='{w1}の結果の合計'; // lang.tip2='{w1}の結果の合計'; // lang.tip3='{w1}の結果の合計'; // lang.tip4='{w1}の結果の合計'; // lang.tip5='{w1}の結果の合計';}else if(){ // 判断为英文 lang.tip1='There is a total of {w1} result'; // lang.tip2='There is a total of {w1} result'; // lang.tip3='There is a total of {w1} result'; // lang.tip4='There is a total of {w1} result'; // lang.tip5='There is a total of {w1} result';}var result=10;document.body.innerHTML=lang.tip1.replace('{w1}',result);思路2：

// 方式2：判断语言后只做个下标，文字写在原地方。这样使用时可以知道这里写的是什么，但似乎比较乱var lang;if () { // 判断为中文 lang=0;}else if(){ // 判断为日文 lang=1;}else if(){ // 判断为英文 lang=2;}var result=10;document.body.innerHTML=['一共有{w1}个结果','{w1}の結果の合計','There is a total of {w1} result'][lang].replace('{w1}',result);

其实第一种方法形式上较为优雅，不过我个人倾向于第二种，主要是我看代码的时候知道这里写的是什么。如果通过变量名判断内容的话则比较麻烦（主要是条数太多，虽然我实际使用的话要把变量名做语义化处理，但能简短、准确描述出内容的情况也不多）。

请问大家有其他思路或解决办法吗？

问题解答

你的意思大概是想把所有文字都翻译,但由于语法结构问题变量的位置是未知的不知道怎么解决是吧?思路的话其实你可以参考模板渲染的思路.我打个比方

var language = { ’hello’: [’hello,{val}!’,’{val},コン!’ ]};var lang = 0; // 当前英文function translate (msgVariable, data, msg) { if (msg !== undefined) language[msgVariable].push(msg); return language[msgVariable][lang].replace(’{val}’, data);}var data = ’张三’;var msg = translate(’hello’, data, ’你好,{val}!’);回答2：

比如这样？

var hello = { 'cn' : '哈喽', 'jp' : 'こんにちは', 'en' : 'f**k you'};//在页面初始化的时候判断当前的环境，然后直接设定key值就可以，比如说我现在是日语var lang = 'jp';console.log(hello[lang]);//拓展的话往对象里面加值就行了，比如说加韩文var hello = { 'cn' : '哈喽', 'jp' : 'こんにちは', 'en' : 'f**k you', 'kr' : '为何不洗澡思密达'};lang = 'kr';console.log(hello[lang]);回答3：

您的問題算是i18n/L10n的範圍，或許可以找到像

jQuery.i18n

JavaScript I18n And L10n等等的國際化和本地化的javascript 庫。第一個庫還是維基媒体搞出來的，很有參考價值。

其他基本的i18n/L10n內容及庫，別錯過

Unicode CLDR如簡中語言表

ICU library

本人對i18n/L10n的在中国的發展很感興趣，一起切磋成長。