i18next是一个用来支持应用国际化的javascript库。

国际化英文单词为：Internationalization，又称i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。

导入资源文件

<script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
<script src="./librarys/i18next@1.11.2/i18next.js"></script>

准备文件

其中可以使用__key__添加要插入的模板，其中key是$.t(要翻译的属性, { key: val}); 例如：

// json
{"dateString": "今天是__day__, 日期是__date__。"}
$.t("dateString", {
    day: "周三",
    date: "2023-03-15",
});

// translation-dev.json
{  
  "changeLang": "change language",
  "lang": "English",
  "myName": "Chen Ping An",
  "dateString": "Today is __day__, date is __date__.",
  "myPet": "./img/dog.jpg",
  "myVideo": "./img/video2.mp4",
  "myAudio": "./img/audio2.mp3",
  "myPlaceholder": "Please enter content"
}

// translation-zh.json
{  
  "changeLang": "切换语言",
  "lang": "中文",
  "myName": "陳平安",
  "dateString": "今天是__day__, 日期是__date__。",
  "myPet": "./img/cat.jpg",
  "myVideo": "./img/video1.mp4",
  "myAudio": "./img/audio1.mp3",
  "myPlaceholder": "請输入内容"
}

// translation-zh-CN.json
{  
  "changeLang": "切换语言",
  "lang": "中文",
  "myName": "陈平安",
  "dateString": "今天是__day__, 日期是__date__。",
  "myPet": "./img/cat.jpg",
  "myVideo": "./img/video1.mp4",
  "myAudio": "./img/audio1.mp3",
  "myPlaceholder": "请输入内容"
}

代码实现

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>国际化</title>
  </head>
  <body>
    <button id="change_lang" data-i18n="changeLang"></button>
    <div data-i18n="lang"></div>
    <div data-i18n="myName"></div>
    <div data-i18n_insert="dateString"></div>
    <img data-i18n="[src]myPet" width="200" />
    <video data-i18n="[src]myVideo"  width="320" controls></video>
    <audio data-i18n="[src]myAudio" width="320" controls></audio>
    <input data-i18n="[placeholder]myPlaceholder" type="text">

    <script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
    <script src="./librarys/i18next@1.11.2/i18next.js"></script>
    <script>
    function setLanguage(lang) {
        $.i18n.init(
          {
            /* 
          设置当前翻译的语言
            如果没有设置具体的lng,
            会查看querystring中是否有?setLng=zh-CN的设置、
            会检查cookie中是否有i18n曾设置的语言、或检查浏览器语言)

            将加载“i18n/translation-zh-CN.json”。
            如果语言设置为“zh-CN”，将逐个加载以下资源文件：
            translation-zh-CN.json
            translation-zh.json
            translation-dev.json （默认回退语言）
            提示：在请求中小写countryCode，例如“en-us”设置选项lowerCaseLng=true
          */
            lng: lang,
            // 设置查询参数的名称，对应上一条的话变成?lang=zh-CN；同理，还可以更改cookieName, 如cookieName:'lang'
            // detectLngQS : 'lang',
            // 设置是否使用cookie，若不使用，当未设置lng参数时，也不会从cookie中查找。
            useCookie: false,
            // 预加载某个语言包
            // preload: ["zh-CN", "en-US"],
            // 只能加载特定的几种语言
            // lngWhitelist: ["zh-CN", "en-US"],
            // 设置缺失备用语言，若要加载的语言存在某个键值缺失，则用fallbackLng来代替；false为不使用该缺省补全机制。
            // fallbackLng: false | ["en"],
            /* 
            可根据实际需要开启，直到localStorage中曾缓存的语言过期，新的语言才会被加载。
            改设置localStorage中缓存的是整个语言包，也就是language.json文件中的内容，
            对应每一个加载的语言包，都会产生一个localStorage存储项。
          */
            // useLocalStorage:true|false,
            // localStorageExpirationTime:86400000 // in ms, default 1 week默认情况下是不开启caching的
            // 开启debug模式
            // debug: true,
            /* 
            resGetPath:'i18n/__lng__/__ns__.json,
            resGetPath:'i18n/__ns__-__lng__.json
            设置加载语言包的路径，对应上述两种模式，
            路径示例如下：
              i18n/en_US/translation.json
              i18n/translation-en-US.json
          */
            // resGetPath:'i18n/__lng__/__ns__.json,
            resGetPath: "i18n/__ns__-__lng__.json",
            // 设置是否异步加载,false为同步。
            getAsync: false
          },
          function (err, t) {
            $("[data-i18n]").i18n(); // 通过选择器集体翻译
            $("[data-i18n_insert]").each(function () {
              // 获取data传值
              let _dataName = $(this).data("i18n_insert");
              let _i18nTxt = $.t(_dataName, {
                day: "周三",
                date: "2023-03-15",
              }); //通过t函数获得某个翻译的值
              // 展示国际化i18n的值
              $(this).text(_i18nTxt);
            });
          }
        );
      }
      $(function () {
        let navLanguage = navigator.language || navigator.userLanguage;
        let currentLang = navLanguage;
        setLanguage(navLanguage);
        $("#change_lang").click(() => {
          if (currentLang === "zh-CN") {
            setLanguage("en");
            currentLang = "en";
          } else if (currentLang === "en") {
            setLanguage("zh");
            currentLang = "zh";
          } else if (currentLang === "zh") {
            setLanguage("zh-CN");
            currentLang = "zh-CN";
          }
        });
      });
    </script>
  </body>
</html>

i18next实现页面国际化

导入资源文件

准备文件

代码实现

推荐