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

Question

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

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

更新：

我现在用的办法是参考“上大人”的回答，根据自己需要修改的结果：

let lang_type = 2; // 获取语言类型，可以是 0,1,2

// 储存多语种文本
let xz_lang = { 
    // 属性名写成方便理解的文字。我用的中文，如果考虑和外国人协作，可以写成英文。
    // 在属性名前面加上下划线，和文本内容做出区别。
    // 按照固定顺序排列（如：中日英）
    // {}表示需要进行替换的部分
    '_过滤作品类型的按钮': [
        '排除指定类型的作品',
        'タイプでフィルタリングする',
        'Filter by works type'
    ],
    '_tag搜索任务开始': [
        '收藏数不低于{}，向下抓取{}页',
        'ブックマークの数は{}ページ以上で、{}ページがクロールされます。',
        'The number of bookmarks is not less than {}, {} pages down to crawl.'
    ]
};

// 翻译程序
function translate(name) {
    let content = xz_lang[name][lang_type];
    if (arguments.length > 1) {        // 把占位符 {} 替换成传递的参数
        for (let i = 1; i < arguments.length; i++) {
            content = content.replace('{}', arguments[i]);
        }
    }
    return content;
}

// 测试
console.log(translate('_过滤作品类型的按钮'));
console.log(translate('_tag搜索任务开始',1000,1000));

这样满足了我的需求。仅供参考~

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的在中国的發展很感興趣，一起切磋成長。

Answer 4

var words = {
    "total": {
        "en": "total result: {{result}}",
        "cn": "一共有 {{result}} 个结果"
    }
};
var i18n = {
  _init: function (_lang, _db) {
    for (var _i in _db) { this[_i] = db[_i][_lang] }
  }
};

// 初始化
i18n._init('cn', words);

// 调用
document.body.innerHTML = i18n['total'];

土办法不知道行不

Answer 5

$.getScript("../../js/jquery.i18n.properties.min.js", function () {
    $.i18n.properties({
        path: '../../i18n/',
        name: 'messages',//文件名开头
        language: 'en_US',
        mode: 'map',
        encoding: 'UTF-8',
        callback: function () {
            console.log($.i18n.prop("user.login.username","user.login.username"));
        }
    });
});

ruoyi-fast
/** 设置全局ajax处理 */
$.ajaxSetup({
    complete: function(XMLHttpRequest, textStatus) {
        if (textStatus == 'timeout') {
            $.modal.alertWarning("服务器超时，请稍后再试！");
            $.modal.enable();
            $.modal.closeLoading();
        } else if (textStatus == "parsererror" || textStatus == "error") {
            // $.modal.alertWarning("服务器错误，请联系管理员！");
            $.modal.enable();
            $.modal.closeLoading();
        }
    }
});