javascript - Bagaimana untuk mengkonfigurasi berbilang bahasa (i18n) dengan elegan dalam fail js, sila bincangkan idea

Question

Saya mencari maklumat dan mendapati kebanyakan fail js dalam bahasa berbeza dibuat secara berasingan, dan kemudian fail js yang sepadan dimuatkan mengikut tempat pengguna.

Tetapi sekarang disebabkan senario penggunaan yang terhad, adalah lebih baik untuk melengkapkannya dalam fail js. Saya kini merancang untuk menyokong 3 bahasa (Cina, Jepun, Inggeris), dan terdapat banyak tempat untuk mengeluarkan teks, mungkin ratusan baris, dan pembolehubah sering disambungkan di tengah.

Contoh senario penggunaan:

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

Sekarang saya mempunyai dua idea Satu ialah menyimpan teks bahasa dalam pembolehubah;

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

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

Sebenarnya, kaedah pertama lebih elegan dalam bentuk, tetapi saya secara peribadi lebih suka kaedah kedua, terutamanya kerana saya tahu apa yang ditulis di sini apabila saya melihat kod. Adalah lebih menyusahkan untuk menilai kandungan dengan nama pembolehubah (terutamanya kerana terdapat terlalu banyak entri. Walaupun saya perlu memproses secara semantik nama pembolehubah untuk kegunaan sebenar, tidak banyak kes di mana kandungan boleh diterangkan secara ringkas dan tepat).

Adakah anda mempunyai idea atau penyelesaian lain?

Answer 1

Anda mungkin ingin menterjemah semua teks, tetapi disebabkan masalah struktur tatabahasa, lokasi pembolehubah tidak diketahui dan anda tidak tahu bagaimana untuk menyelesaikannya?
Dari segi idea, anda sebenarnya boleh merujuk kepada idea ​​perenderan templat.
Izinkan saya memberikan analogi kepada anda

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

Macam ini?

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

Masalah anda adalah dalam skop i18n/L10n, mungkin anda boleh mencari sesuatu seperti

• jQuery.i18n

• JavaScript I18n Dan L10n
  Perpustakaan javascript pengantarabangsaan dan penyetempatan. Perpustakaan pertama dicipta oleh Wikimedia dan mempunyai nilai rujukan yang hebat.

Kandungan dan perpustakaan asas i18n/L10n lain, jangan ketinggalan

• Unicode CLDR seperti jadual bahasa Cina Ringkas

• perpustakaan ICU

Saya sangat berminat dengan pembangunan i18n/L10n di China, dan kami akan belajar dan berkembang bersama.