javascript - So konfigurieren Sie mehrere Sprachen (i18n) elegant in einer JS-Datei. Bitte besprechen Sie Ihre Ideen

Question

Ich habe nach Informationen gesucht und festgestellt, dass die meisten JS-Dateien in verschiedenen Sprachen separat erstellt werden und dann die entsprechenden JS-Dateien entsprechend dem Gebietsschema des Benutzers geladen werden.

Aber jetzt ist es aufgrund der Einschränkungen des Nutzungsszenarios am besten, es in einer js-Datei zu vervollständigen. Ich habe jetzt vor, drei Sprachen zu unterstützen (Chinesisch, Japanisch, Englisch), und es gibt viele Orte zum Ausgeben von Text, möglicherweise Hunderte von Zeilen, und Variablen werden oft in der Mitte zusammengefügt.

Beispiel für ein Nutzungsszenario:

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

Jetzt habe ich zwei Ideen: Die eine besteht darin, den Sprachtext in einer Variablen zu speichern. Die andere besteht darin, den Text in Form eines Arrays zu schreiben und ihn dann mithilfe von Indizes aufzurufen.

Idee 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);

Idee 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);

Tatsächlich ist die erste Methode formal eleganter, aber ich persönlich bevorzuge die zweite Methode, hauptsächlich weil ich weiß, was hier geschrieben steht, wenn ich mir den Code ansehe. Es ist schwieriger, den Inhalt anhand der Variablennamen zu beurteilen (hauptsächlich, weil es zu viele Einträge gibt. Obwohl ich die Variablennamen für die tatsächliche Verwendung semantisch verarbeiten muss, gibt es nicht viele Fälle, in denen der Inhalt kurz und genau beschrieben werden kann).

Haben Sie weitere Ideen oder Lösungen?

Answer 1

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

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

Answer 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]);

Answer 3

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

• jQuery.i18n

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

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

• Unicode CLDR如簡中語言表

• ICU library

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