76

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

4

10 回答 10

84

当我之前构建过多语言网站（不是很大，因此可能无法很好地扩展）时，我保留了一系列“语言”文件：

  • 语言.en.js
  • 语言.it.js
  • 语言.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');
于 2008-10-23T07:46:12.390 回答
60

在设计多语言支持时，您需要牢记以下几点：

1 - 将代码与数据分开（即不要将字符串硬编码到您的函数中）

2 - 创建一个格式化挂钩函数来处理本地化差异。允许格式化字符串 ( "{0}" ) 比连接 ( "Welcome to" + value ) 更好，原因有很多：

  • 在某些语言中，数字的格式为 1.234.678,00 而不是 1,234,567.00
  • 复数通常不像在单数末尾附加一个“s”那么简单
  • 语法规则不同，可能会影响事物的顺序，因此您应该允许在翻译挂钩之后附加动态数据：例如，“Welcome to {0} ”在日语中变成“{0} he youkoso”（这发生在几乎每种语言，请注意）。

3 - 确保您可以在翻译挂钩运行后实际格式化字符串，以便您可以重用密钥。

4 -在任何情况下，都不要将数据库输出挂钩到翻译实用程序。如果您有多语言数据，请在数据库中创建单独的表/行。我已经看到人们经常犯这种不明智的错误（通常是针对国家和州/省的形式）。

5 - 为创建密钥创建明确的编码实践规则。格式化程序实用程序函数（看起来像translate("hello world")将使用一个键作为参数，而具有细微变化的键会使维护非常烦人。例如，在以下示例中您可能会得到三个键： “输入你的名字”，“输入你的名字：”，“输入你的名字：”。选择一种格式（例如，没有冒号，修剪）并在代码审查中发现差异。不要以编程方式执行此过滤，因为它可能会触发错误积极的一面。

6 - 请注意，翻译表中可能需要 HTML 标记（例如，如果您需要将句子中的单词加粗，或有脚注医学参考）。对此进行广泛测试。

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

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

于 2008-10-23T12:45:03.940 回答
14 
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

如果您使用尚未定义的语言调用该类，则将选择English( en )。

于 2014-07-18T19:19:18.847 回答
6

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

尽管使用 i18n + javascript 进行简单的谷歌搜索会发现很多替代方案。

最后，这取决于您希望它有多深。对于几种语言，一个文件就足够了。

您可以使用Jquery之类的框架，使用 span 来识别文本（带有类），然后使用每个 span 的 id 来查找所选语言的相应文本。
1行Jquery，完成。

于 2008-10-23T08:15:23.657 回答
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'});
于 2015-05-12T12:53:32.217 回答
3

这样，您可以通过多字使用一个 js 代码进行多语言：

var strings = new Object();

if(navigator.browserLanguage){
  lang = navigator.browserLanguage;
}else{
  lang = navigator.language;
}

lang = lang.substr(0,2).toLowerCase();



if(lang=='fa'){/////////////////////////////Persian////////////////////////////////////////////////////


        strings["Contents"]                              = "فهرست";
        strings["Index"]                                 = "شاخص";
        strings["Search"]                                = "جستجو";
        strings["Bookmark"]                              = "ذخیره";

        strings["Loading the data for search..."]        = "در حال جسنجوی متن...";
        strings["Type in the word(s) to search for:"]    = "لغت مد نظر خود را اینجا تایپ کنید:";
        strings["Search title only"]                     = "جستجو بر اساس عنوان";
        strings["Search previous results"]               = "جستجو در نتایج قبلی";
        strings["Display"]                               = "نمایش";
        strings["No topics found!"]                      = "موردی یافت نشد!";

        strings["Type in the keyword to find:"]          = "کلیدواژه برای یافتن تایپ کنید";

        strings["Show all"]                              = "نمایش همه";
        strings["Hide all"]                              = "پنهان کردن";
        strings["Previous"]                              = "قبلی";
        strings["Next"]                                  = "بعدی";

        strings["Loading table of contents..."]          = "در حال بارگزاری جدول فهرست...";

        strings["Topics:"]                               = "عنوان ها";
        strings["Current topic:"]                        = "عنوان جاری:";
        strings["Remove"]                                = "پاک کردن";
        strings["Add"]                                   = "افزودن";

}else{//////////////////////////////////////English///////////////////////////////////////////////////

strings["Contents"]                              = "Contents";
strings["Index"]                                 = "Index";
strings["Search"]                                = "Search";
strings["Bookmark"]                              = "Bookmark";

strings["Loading the data for search..."]        = "Loading the data for search...";
strings["Type in the word(s) to search for:"]    = "Type in the word(s) to search for:";
strings["Search title only"]                     = "Search title only";
strings["Search previous results"]               = "Search previous results";
strings["Display"]                               = "Display";
strings["No topics found!"]                      = "No topics found!";

strings["Type in the keyword to find:"]          = "Type in the keyword to find:";

strings["Show all"]                              = "Show all";
strings["Hide all"]                              = "Hide all";
strings["Previous"]                              = "Previous";
strings["Next"]                                  = "Next";

strings["Loading table of contents..."]          = "Loading table of contents...";

strings["Topics:"]                               = "Topics:";
strings["Current topic:"]                        = "Current topic:";
strings["Remove"]                                = "Remove";
strings["Add"]                                   = "Add";

}

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

于 2019-09-11T04:57:12.963 回答
1

你应该看看在经典 JS 组件中做了什么——比如 Dojo、Ext、FCKEditor、TinyMCE 等。你会发现很多好主意。

通常它最终是您在标签上设置的某种属性，然后您根据属性的值将标签的内容替换为在翻译文件中找到的翻译。

要记住的一件事是语言集的演变（当您的代码演变时，您是否需要重新翻译整个内容）。我们将翻译保存在 PO 文件 (Gnu Gettext) 中，并且我们有一个脚本可以将 PO 文件转换为可以使用的 JS 文件。

此外：

  • 始终使用 UTF-8 - 这听起来很傻，但如果你从一开始就不是 utf-8（HTML 头 + JS 编码），你很快就会破产。
  • 使用英文字符串作为翻译的关键——这样你就不会得到这样的结果： lang.Greeting = 'Hello world' - 但是 lang['Hello world'] = 'Hello world';
于 2008-10-24T11:31:40.950 回答
1

您可以使用谷歌翻译器：

<div id="google_translate_element" style = "float: left; margin-left: 10px;"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</div><input type = "text" style = "display: inline; margin-left: 8%;" class = "sear" placeholder = "Search people..."><button class = "bar">&#128270;</button>
于 2020-05-15T01:15:27.567 回答
0

对于 Spring 包和 JavaScript，有简单的解决方案：在模板（例如 JSP）中生成 i18n 数组并在 JavaScript 中使用它：

JSP：

<html>
<script type="text/javascript">
    var i18n = [];
    <c:forEach var='key' items='<%=new String[]{"common.deleted","common.saved","common.enabled","common.disabled","...}%>'>
        i18n['${key}'] = '<spring:message code="${key}"/>';
    </c:forEach>
</script>
</html>

在 JS 中：

alert(i18n["common.deleted"]);

另见Resolving spring:messages in javascript for i18n 国际化

于 2017-05-24T22:50:27.780 回答
0 

class Language {
    constructor(lang) {
        var __construct = function (){
            if (eval('typeof ' + lang) == 'undefined'){
                lang = "en";
            }
            return;
        };
        this.getStr = function (str){
            var retStr = eval('eval(lang).' + str);
            if (typeof retStr != 'undefined'){
                return retStr;
            } else {
                return str;
            }
        };
    }
}

var en = {
    Save:"Saved."
};

var fa = {
    Save:"ذخیره"
};

var translator = new Language("fa");
console.log(translator.getStr("Save"));

于 2021-02-22T08:07:57.330 回答