最佳实践javascript和多语言

Question

使用DOM操作javascript的多语言网站的最佳做法是什么？我使用javascript构建了一些网站的动态部分.我的第一个想法是使用带有文本字符串和语言代码的数组作为索引.这是一个好主意吗？

Answer 1

当我之前构建多语言网站(不是非常大的网站,所以这可能无法扩展得太好)时,我会保留一系列"语言"文件:

• lang.en.js
• lang.it.js
• lang.fr.js

每个文件都声明一个对象,它基本上只是一个从关键词到语言短语的映射:

// lang.en.js
lang = {
    greeting : "Hello"
};

// lang.fr.js
lang = {
    greeting : "Bonjour"
};

动态加载其中一个文件,然后您需要做的就是从地图中引用该键:

document.onload = function() {
    alert(lang.greeting);
};

当然,有很多其他方法可以做到这一点,并且有很多方法可以做到这种风格但更好:将它全部封装到一个函数中,这样就可以优雅地处理"字典"中缺少的短语,甚至可以完成整个事情.使用OOP,让它管理文件的动态包括,甚至可以为你绘制语言选择器等.

var l = new Language('en');
l.get('greeting');

Answer 2

在设计多语言支持时,您需要记住以下几点:

1 - 从数据中分离代码(即不要将字符串硬编码到函数中)

2 - 创建格式化钩子函数来处理本地化差异.允许格式化字符串("{0}")优于连接("欢迎使用"+值),原因如下:

• 在某些语言中,数字的格式为1.234.678,00而不是1,234,567.00
• 多元化通常不像在单数末尾附加"s"那么简单
• 语法规则是不同的,可以影响事物的顺序,所以你应该允许在翻译钩子后追加动态数据:例如,"欢迎来到{0}"变成日语中的"{0}他youkoso"(这发生在几乎每种语言,请注意.

3 - 确保在转换挂钩运行后实际可以格式化字符串,这样您就可以重用密钥.

4 - 在任何情况下,不要将数据库输出挂钩到转换器实用程序.如果您有多语言数据,请在数据库中创建单独的表/行.我已经看到人们经常犯这样的错误(通常是国家和州/省的形式).

5 - 创建用于创建密钥的显式编码实践规则.格式化程序实用程序函数(看起来像translate("hello world")将使用键作为参数,而稍微变化的键会使维护非常烦人.例如,在以下示例中最终可能会有三个键: "输入你的名字","输入你的名字:","输入你的名字:".选择一种格式(例如没有冒号,修剪)并捕捉代码评论中的差异.不要以编程方式进行此过滤,因为它可能触发错误阳性.

6 - 请注意,翻译表中可能需要HTML标记(例如,如果您需要在句子中加粗单词,或者有脚注医学参考).对此进行了广泛的测试.

7 - 有几种导入语言字符串的方法.理想情况下,您应该有一个language.lang.js文件的多个版本,使用服务器端代码在它们之间切换,并从HTML文件的底部引用该文件.通过AJAX拉取文件也是一种替代方案,但可能会引入延迟.将language.js合并到主代码文件中是不可取的,因为您失去了文件缓存的好处.

8 - 使用目标语言进行测试.这听起来很傻,但我曾经看过一个严重的错误,因为程序员没有费心去检查密钥中是否存在"é".

Answer 3

function Language(lang)
{
    var __construct = function() {
        if (eval('typeof ' + lang) == 'undefined')
        {
            lang = "en";
        }
        return;
    }()

    this.getStr = function(str, defaultStr) {
        var retStr = eval('eval(lang).' + str);
        if (typeof retStr != 'undefined')
        {
            return retStr;
        } else {
            if (typeof defaultStr != 'undefined')
            {
                return defaultStr;
            } else {
                return eval('en.' + str);
            }
        }
    }
}

将此添加到您的页面后,您可以像这样使用它:

var en = {
    SelPlace:"Select this place?",
    Save:"Saved."
};

var tr = {
    SelPlace:"Buray? seçmek istiyor musunuz?"
};

var translator = new Language("en");
alert(translator.getStr("SelPlace")); // result: Select this place?
alert(translator.getStr("Save")); // result: Saved.
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string

var translator = new Language("tr");
alert(translator.getStr("SelPlace")); // result: Buray? seçmek istiyor musunuz?
alert(translator.getStr("Save")); // result: Saved. (because it doesn't exist in this language, borrowed from english as default)
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string

如果使用未定义的语言调用该类,将选择英语(en).

Answer 4

刚刚在javascript中找到了一篇关于i18n的好文章:http:
//24ways.org/2007/javascript-internationalisation

虽然使用i18n + javascript的简单谷歌搜索显示了很多替代品.

最后,这取决于你希望它有多深.对于几种语言,单个文件就足够了.

您可以使用像Jquery这样的框架,使用span来标识文本(使用类),然后使用每个span的id来查找所选语言中的相应文本.
1行Jquery,完成了.

Answer 5

在阅读了nickf和Leo的精彩答案之后,我创建了以下CommonJS样式language.js来管理我的所有字符串(以及可选的Mustache格式化它们):

var Mustache = require('mustache');

var LANGUAGE = {
    general: {
        welcome: "Welcome {{name}}!"
    }
};

function _get_string(key) {
    var parts = key.split('.');
    var result = LANGUAGE, i;
    for (i = 0; i < parts.length; ++i) {
        result = result[parts[i]];
    }
    return result;
}

module.exports = function(key, params) {
    var str = _get_string(key);
    if (!params || _.isEmpty(params)) {
        return str;
    }
    return Mustache.render(str, params);
};

这就是我得到一个字符串的方式:

var L = require('language');
var the_string = L('general.welcome', {name='Joe'});

Answer 6

这样你就可以使用一个js代码来实现多语言多单词：

\n\n

var strings = new Object();\n\nif(navigator.browserLanguage){\n  lang = navigator.browserLanguage;\n}else{\n  lang = navigator.language;\n}\n\nlang = lang.substr(0,2).toLowerCase();\n\n\n\nif(lang==\'fa\'){/////////////////////////////Persian////////////////////////////////////////////////////\n\n\n        strings["Contents"]                              = "\xd9\x81\xd9\x87\xd8\xb1\xd8\xb3\xd8\xaa";\n        strings["Index"]                                 = "\xd8\xb4\xd8\xa7\xd8\xae\xd8\xb5";\n        strings["Search"]                                = "\xd8\xac\xd8\xb3\xd8\xaa\xd8\xac\xd9\x88";\n        strings["Bookmark"]                              = "\xd8\xb0\xd8\xae\xdb\x8c\xd8\xb1\xd9\x87";\n\n        strings["Loading the data for search..."]        = "\xd8\xaf\xd8\xb1 \xd8\xad\xd8\xa7\xd9\x84 \xd8\xac\xd8\xb3\xd9\x86\xd8\xac\xd9\x88\xdb\x8c \xd9\x85\xd8\xaa\xd9\x86...";\n        strings["Type in the word(s) to search for:"]    = "\xd9\x84\xd8\xba\xd8\xaa \xd9\x85\xd8\xaf \xd9\x86\xd8\xb8\xd8\xb1 \xd8\xae\xd9\x88\xd8\xaf \xd8\xb1\xd8\xa7 \xd8\xa7\xdb\x8c\xd9\x86\xd8\xac\xd8\xa7 \xd8\xaa\xd8\xa7\xdb\x8c\xd9\xbe \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf:";\n        strings["Search title only"]                     = "\xd8\xac\xd8\xb3\xd8\xaa\xd8\xac\xd9\x88 \xd8\xa8\xd8\xb1 \xd8\xa7\xd8\xb3\xd8\xa7\xd8\xb3 \xd8\xb9\xd9\x86\xd9\x88\xd8\xa7\xd9\x86";\n        strings["Search previous results"]               = "\xd8\xac\xd8\xb3\xd8\xaa\xd8\xac\xd9\x88 \xd8\xaf\xd8\xb1 \xd9\x86\xd8\xaa\xd8\xa7\xdb\x8c\xd8\xac \xd9\x82\xd8\xa8\xd9\x84\xdb\x8c";\n        strings["Display"]                               = "\xd9\x86\xd9\x85\xd8\xa7\xdb\x8c\xd8\xb4";\n        strings["No topics found!"]                      = "\xd9\x85\xd9\x88\xd8\xb1\xd8\xaf\xdb\x8c \xdb\x8c\xd8\xa7\xd9\x81\xd8\xaa \xd9\x86\xd8\xb4\xd8\xaf!";\n\n        strings["Type in the keyword to find:"]          = "\xda\xa9\xd9\x84\xdb\x8c\xd8\xaf\xd9\x88\xd8\xa7\xda\x98\xd9\x87 \xd8\xa8\xd8\xb1\xd8\xa7\xdb\x8c \xdb\x8c\xd8\xa7\xd9\x81\xd8\xaa\xd9\x86 \xd8\xaa\xd8\xa7\xdb\x8c\xd9\xbe \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf";\n\n        strings["Show all"]                              = "\xd9\x86\xd9\x85\xd8\xa7\xdb\x8c\xd8\xb4 \xd9\x87\xd9\x85\xd9\x87";\n        strings["Hide all"]                              = "\xd9\xbe\xd9\x86\xd9\x87\xd8\xa7\xd9\x86 \xda\xa9\xd8\xb1\xd8\xaf\xd9\x86";\n        strings["Previous"]                              = "\xd9\x82\xd8\xa8\xd9\x84\xdb\x8c";\n        strings["Next"]                                  = "\xd8\xa8\xd8\xb9\xd8\xaf\xdb\x8c";\n\n        strings["Loading table of contents..."]          = "\xd8\xaf\xd8\xb1 \xd8\xad\xd8\xa7\xd9\x84 \xd8\xa8\xd8\xa7\xd8\xb1\xda\xaf\xd8\xb2\xd8\xa7\xd8\xb1\xdb\x8c \xd8\xac\xd8\xaf\xd9\x88\xd9\x84 \xd9\x81\xd9\x87\xd8\xb1\xd8\xb3\xd8\xaa...";\n\n        strings["Topics:"]                               = "\xd8\xb9\xd9\x86\xd9\x88\xd8\xa7\xd9\x86 \xd9\x87\xd8\xa7";\n        strings["Current topic:"]                        = "\xd8\xb9\xd9\x86\xd9\x88\xd8\xa7\xd9\x86 \xd8\xac\xd8\xa7\xd8\xb1\xdb\x8c:";\n        strings["Remove"]                                = "\xd9\xbe\xd8\xa7\xda\xa9 \xda\xa9\xd8\xb1\xd8\xaf\xd9\x86";\n        strings["Add"]                                   = "\xd8\xa7\xd9\x81\xd8\xb2\xd9\x88\xd8\xaf\xd9\x86";\n\n}else{//////////////////////////////////////English///////////////////////////////////////////////////\n\nstrings["Contents"]                              = "Contents";\nstrings["Index"]                                 = "Index";\nstrings["Search"]                                = "Search";\nstrings["Bookmark"]                              = "Bookmark";\n\nstrings["Loading the data for search..."]        = "Loading the data for search...";\nstrings["Type in the word(s) to search for:"]    = "Type in the word(s) to search for:";\nstrings["Search title only"]                     = "Search title only";\nstrings["Search previous results"]               = "Search previous results";\nstrings["Display"]                               = "Display";\nstrings["No topics found!"]                      = "No topics found!";\n\nstrings["Type in the keyword to find:"]          = "Type in the keyword to find:";\n\nstrings["Show all"]                              = "Show all";\nstrings["Hide all"]                              = "Hide all";\nstrings["Previous"]                              = "Previous";\nstrings["Next"]                                  = "Next";\n\nstrings["Loading table of contents..."]          = "Loading table of contents...";\n\nstrings["Topics:"]                               = "Topics:";\nstrings["Current topic:"]                        = "Current topic:";\nstrings["Remove"]                                = "Remove";\nstrings["Add"]                                   = "Add";\n\n}\n

\n\n

您可以在此代码中添加另一个语言，并在您的 html 代码上设置对象。\n我使用波斯语作为波斯语和英语，您可以使用任何类型的语言，只需通过 If-Else 语句创建这部分代码的副本。

\n