i18next的使用

最新推荐文章于 2025-07-04 23:25:33 发布

原创最新推荐文章于 2025-07-04 23:25:33 发布 · 1.5w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#国际化 #javascript #i18n

前端专栏收录该内容

1 篇文章

订阅专栏

i18next

i18next是一个用来支持应用国际化的javascript库。
官网链接：http://i18next.github.io/i18next/index.html
有更详细的说明和例子。实际操作中遇到的问题可以去GITHUB:https://github.com/i18next/i18next/issues上提问，或者google一下。

i18next不完全使用方法

1.i18n的初始化官网上提供三种方式，带参数，带回调，带以上两者的。

i18n.init({lng: 'en-US'});
i18n.init(function(err, t){
    /*loading done*/
})
i18n.init({
    lng: 'en-US'
},function(err, t){
    /*loading done*/
})

2.参数

lng : 'zh-CN' 设置当前翻译的语言(如果没有设置具体的lng,会查看querrustringparameter中是否有?setLng=zh-CN的设置、会检查cookie中是否有i18n曾设置的语言、或检查浏览器语言)
detectLngQS : 'lang' 设置查询参数的名称，对应上一条的话变成?lang=zh-CN；同理，还可以更改cookieName, 如cookieName:'lang'
useCookie:false设置是否使用cookie，若不使用，当未设置lng参数时，也不会从cookie中查找。
preload:['zh-CN','en-US'] 预加载某个语言包
lngWhitelist:['zh-CN','en-US']只能加载特定的几种语言
fallbackLng:false|['en']设置缺失备用语言，若要加载的语言存在某个键值缺失，则用fallbackLng来代替；false为不使用该缺省补全机制。
useLocalStorage:true|false,localStorageExpirationTime:86400000 // in ms,default 1 week默认情况下是不开启caching的，可根据实际需要开启，直到localStorage中曾缓存的语言过期，新的语言才会被加载。改设置localStorage中缓存的是整个语言包，也就是language.json文件中的内容，对应每一个加载的语言包，都会产生一个localStorage存储项。
debug:true开启debug模式
resGetPath:'locales/__lng__/__ns__.json，resGetPath:'locales/__ns__-__lng__.json设置加载语言包的路径，对应上述两种模式，路径示例如下：locales/en_US/translation.json|locales/translation-en-US.json
getAsync:false设置是否异步加载,false为同步。
还有更多参数详见官网

3.jquery下使用i18n

There is no hard dependency on JQuery. If not used i18next will use drop in functions for ajax,…
But if JQuery is loaded before i18next it can be optionally extended
By default i18next will extend jquery by appending i18n to $ and providing a $.fn to translate dom elements marked with the data-i18n attribute.
在jquery下使用i18n,需要通过$.i18n.functionName()来调用。

例子

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="[PATH]/jquery.js" /> 
    <script type="text/javascript" src="[PATH]/i18next.js" />
  </head>
  <body>
    <ul class="nav">
      <li><a href="#" data-i18n="nav.home"></a></li>
      <li><a href="#" data-i18n="nav.page1"></a></li>
      <li><a href="#" data-i18n="nav.page2"></a></li>
      <input data-i18n="[value]nav.button" type="button" 
            value="查询" id="" />  // 按钮中的文字  
      <input type="text" name="" id="" 
            data-i18n="[placeholder]nav.input"
            placeholder="请输入名称"/> //文本框中提示字
    </ul>
  </body>
</html>

对应的语言包文件translation.json

{  
    "nav" :{  
        "home":"Home",  
        "page1" :"PageOne",  
        "page2" : "PageTwo",  
        "button" : "Search",  
        "input" : "Input your name"  
    }  
}

初始化函数

$.i18n.init({
    lng : 'en-US',
    resGetPath : 'locales/__lng__/__ns__.json'
},function(err, t){
    $('[data-i18n]').i18n(); // 通过选择器集体翻译
    var temp = $.t("nav.home"); //通过t函数获得某个翻译的值
})

如果使用的是jquery-mobile**.css,按钮的value值并不会修改，因为使用该css样式，对一些特殊的标签的值进行修改需要重新刷新，例子如下：

function changeBtnLng(){
    var temp = $.t("nav.button"); //通过t函数获得button对应的翻译值
    $("#btn_query").val(temp).button("refresh"); //刷新并修改button值
}

有时候可能要修改网页的标题title，如果通过网页点击切换语言按钮切换的话，title往往不会刷新，直到跳转到其他页面，title的内容才会被翻译，解决如下：

$("#btn_change").click(function(){
    /*your code*/
    var res_lng = "en-US";
    location.reload(false); //切换语言后直接刷新页面
})

对于js自动生成的html内容，需再生成后添加$("#id").i18n(),否则不会翻译成对应内容

若有错误，欢迎纠正。