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

问题描述

问 题

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

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

使用场景示例：

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

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

思路1：

// 方式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}!');

这篇关于javascript - 如何优雅的在一个js文件里配置多语言（i18n），求探讨思路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！