我搜了搜资料,发现大多数是不同语言的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:判断语言后只做个下标,文字写在原地方。这样使用时可以知道这里写的是什么,但似乎比较乱 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);
其实第一种方法形式上较为优雅,不过我个人倾向于第二种,主要是我看代码的时候知道这里写的是什么。如果通过变量名判断内容的话则比较麻烦(主要是条数太多,虽然我实际使用的话要把变量名做语义化处理,但能简短、准确描述出内容的情况也不多)。
请问大家有其他思路或解决办法吗?
你的意思大概是想把所有文字都翻译,但由于语法结构问题变量的位置是未知的不知道怎么解决是吧?
思路的话其实你可以参考模板渲染的思路.
我打个比方
比如这样?
您的问题算是i18n/L10n的范围,或许可以找到像
jQuery.i18n
JavaScript I18n And L10n
等等的国际化和本地化的javascript 库。第一个库还是维基媒体搞出来的,很有参考价值。
其他基本的i18n/L10n内容及库,别错过
Unicode CLDR如简中语言表
ICU library
本人对i18n/L10n的在中国的发展很感兴趣,一起切磋成长。