blocks|key|1709085|text|在阅读了nickf和Leo的优秀答案之后，我创建了以下CommonJS样式的language.js来管理我所有的字符串(也可以选择使用Mustache来格式化它们)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1709086|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;+%2B%2Bi)+{
++++++++result+=+result[parts[i]];
++++}
++++return+result;
}

module.exports+=+function(key,+params)+{
++++var+str+=+_get_string(key);
++++if+(!params+%7C%7C+_.isEmpty(params))+{
++++++++return+str;
++++}
++++return+Mustache.render(str,+params);
};|code-block|syntax|javascript|1709087|下面是我获取字符串的方法：|1709088|var+L+=+require('language');
var+the_string+=+L('general.welcome',+{name='Joe'});|1709089|entityMap|0|LINK|mutability|MUTABLE|url|https://mustache.github.io/^0|1V|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>After reading the great answers by nickf and Leo, I created the following CommonJS style language.js to manage all my strings (and optionally, <a href="https://mustache.github.io/" rel="nofollow">Mustache</a> to format them):</p>

<pre><code>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 &lt; 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);
};
</code></pre>

<p>And this is how I get a string:</p>

<pre><code>var L = require('language');
var the_string = L('general.welcome', {name='Joe'});
</code></pre>


blocks|key|1494014|text|对于Spring+bundle和JavaScript，有一个简单的解决方案:在模板(例如JSP)中生成i18n数组，并在JavaScript中使用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1494015|JSP：|1494016|<html>
<script+type="text/javascript">
++++var+i18n+=+[];
++++<c:forEach+var='key'+items='<%25=new+String[]{"common.deleted","common.saved","common.enabled","common.disabled","...}%25>'>
++++++++i18n['${key}']+=+'<spring:message+code="${key}"/>';
++++</c:forEach>
</script>
</html>|code-block|syntax|javascript|1494017|在JS中：|1494018|alert(i18n["common.deleted"]);|1494019|另请参阅Resolving+spring:messages+in+javascript+for+i18n+internationalization|offset|length|1494020|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6218970/resolving-springmessages-in-javascript-for-i18n-internationalization^0|0|0|0|0|0|4|1X|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>For Spring bundles and JavaScript there are simple solution: generate i18n array in template (e.g. JSP) and use it in JavaScript:</p>

<p>JSP:</p>

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

<p>And in JS:</p>

<pre><code>alert(i18n["common.deleted"]);
</code></pre>

<p>See also <a href="https://stackoverflow.com/questions/6218970/resolving-springmessages-in-javascript-for-i18n-internationalization">Resolving spring:messages in javascript for i18n internationalization</a></p>


blocks|key|1494089|text|这样你就可以通过多个单词使用多语言的一个js代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1494090|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";

}|code-block|syntax|javascript|1494091|您可以在此代码中添加另一个lang，并在您的html代码上设置对象。我使用波斯语的波斯语和英语，你可以使用任何类型的语言只需创建这部分代码的副本，如果-否则语句。|1494092|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This way you can use one js code for multi language by multi word :</p>

<pre><code>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";

}
</code></pre>

<p>you can add another lang in this code and set objects on your html code.
I used Persian For Farsi language and English, you can use any type language just create copy of this part of code by If-Else statement.</p>


blocks|key|1709242|text|您可以使用google翻译器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1709243|<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%25;"+class+=+"sear"+placeholder+=+"Search+people..."><button+class+=+"bar">&#128270;</button>|code-block|syntax|javascript|1709244|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use a google translator:</p>

<pre><code>&lt;div id="google_translate_element" style = "float: left; margin-left: 10px;"&gt;&lt;/div&gt;

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

&lt;script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"&gt;&lt;/script&gt;

&lt;/div&gt;&lt;input type = "text" style = "display: inline; margin-left: 8%;" class = "sear" placeholder = "Search people..."&gt;&lt;button class = "bar"&gt;&amp;#128270;&lt;/button&gt;
</code></pre>


blocks|key|1709254|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1709255|class+Language+{
++++constructor(lang)+{
++++++++var+__construct+=+function+(){
++++++++++++if+(eval('typeof+'+%2B+lang)+==+'undefined'){
++++++++++++++++lang+=+"en";
++++++++++++}
++++++++++++return;
++++++++};
++++++++this.getStr+=+function+(str){
++++++++++++var+retStr+=+eval('eval(lang).'+%2B+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"));|code-block|syntax|javascript|1709256|1709257|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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"));</code></pre>
</div>
</div>
</p>


<p>what is the best practice for multilanguage website using DOM Manipulating with javascript? I build some dynamic parts of the website using javascript. My first thought was using an array with the text strings and the language code as index. Is this a good idea?</p>


Best practice javascript and multilanguage

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

问最佳实践javascript和多语言
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问最佳实践javascript和多语言EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问最佳实践javascript和多语言
EN