使用DOM使用JavaScript进行多语言网站的最佳做法是什么？我使用javascript构建网站的一些动态部分。我的第一个想法是使用带有文本字符串和语言代码作为索引的数组。这是一个好主意吗？
Answers:
当我以前建立了多语言站点时（不是很大的站点，因此可能无法很好地扩展），我保留了一系列“语言”文件：
每个文件都声明一个对象，该对象基本上只是一个从关键字到语言短语的映射：
// 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');
设计多语言支持时，需要记住以下几点：
1-将代码与数据分开（即不要将字符串硬编码到函数中）
2-创建格式化挂钩函数以处理本地化差异。出于多种原因，允许使用可格式化的字符串（“ {0}”）比串联（“ Welcome to” + value）更好。
3-确保在翻译挂钩运行后可以实际格式化字符串，以便可以重用键。
4-在任何情况下，请勿将数据库输出连接到Translator Utility。如果您具有多语言数据，请在数据库中创建单独的表/行。我已经看到人们经常误会这种情况（通常是针对国家和州/形式的省）。
5-创建用于创建密钥的显式编码实践规则。格式化程序实用程序功能（看起来像translate（“ hello world”）会使用一个键作为参数，并且略有变化的键会使维护变得很烦人。例如，在以下示例中，您可能会得到三个键： “输入您的名字”，“输入您的名字：”，“输入您的名字：”。选择一种格式（例如，不加冒号，修饰符）并捕获代码审查中的差异。请勿以编程方式进行此过滤，因为它可能会触发false积极的。
6-请注意，转换表中可能会需要HTML标记（例如，如果您需要将句子中的单词加粗，或使用脚注作为医学参考）。对此进行广泛测试。
7-有几种导入语言字符串的方法。理想情况下，您应该有一个language.lang.js文件的多个版本，使用服务器端代码在它们之间进行切换，并从HTML文件的底部引用该文件。通过AJAX提取文件也是一种选择，但可能会导致延迟。建议不要将language.js合并到主代码文件中，因为这样会丢失文件缓存的好处。
8-测试您的目标语言。这听起来很愚蠢，但是我曾经见过一个严重的错误，因为程序员不必费心检查密钥中是否存在“é”。
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）。
刚刚在javascript中找到了一篇有关i18n的不错的文章：http :
//24ways.org/2007/javascript-internationalisation
尽管使用i18n + javascript进行的简单Google搜索显示了很多替代方案。
最后，这取决于您想要的深度。对于几种语言，一个文件就足够了。
您可以使用Jquery之类的框架，使用跨度来标识文本（带有一个类），然后使用每个跨度的ID查找所选语言中的相应文本。
1行Jquery，已完成。
在阅读了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'});
这样，您可以通过多个单词将一个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";
}
您可以在此代码中添加另一个lang并在html代码上设置对象。我使用波斯语作为波斯语和英语，您可以使用任何类型的语言，只要通过If-Else语句创建这部分代码的副本即可。
您应该研究经典JS组件中已完成的工作-诸如Dojo，Ext，FCKEditor，TinyMCE等。您会发现很多好主意。
通常，它最终是您在标记上设置的某种属性，然后根据该属性的值，用在翻译文件中找到的翻译替换标记的内容。
要记住的一件事是语言集的发展（当代码发展时，是否需要重新翻译整个过程）。我们将翻译保存在PO文件（Gnu Gettext）中，并且有一个脚本可以将PO文件转换为可以使用的JS文件。
此外：
您可以使用Google翻译器：
<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">🔎</button>
对于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"]);