jquery-i18n-properties 是一款轻量级的jQuery国际化插件，能实现Web前端的国际化。

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

导入资源文件

// 注意：先引入jquery后引入jquery.i18n.properties
<script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
<script src="./librarys/jquery.i18n.properties@1.2.7/jquery.i18n.properties.js"></script>

准备文件

其中可以使用{ index }添加要插入的模板，其中index是jQuery.i18n.prop(key, val0, val1, val2...)中val的索引。

# strings.properties
lang=English
myName=Chen Ping An
myPet=./img/cat.jpg
myVideo=./img/video2.mp4
myAudio=./img/audio2.mp3
myPlaceholder=Please enter content
dateString=Today is {0}, date is {1}.

# strings_zh.properties
lang=中文
myName=陈平安
myPet=./img/dog.jpg
myVideo=./img/video1.mp4
myAudio=./img/audio1.mp3
myPlaceholder=請输入内容
dateString=今天是 {0}, 日期是 {1}.

# strings_zh_CN.properties
lang=中文
myName=陈平安
myPet=./img/dog.jpg
myVideo=./img/video1.mp4
myAudio=./img/audio1.mp3
myPlaceholder=请输入内容
dateString=今天是 {0}, 日期是 {1}.

代码实现

<!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>
    <div data-txt="lang"></div>
    <div data-txt="myName"></div>
    <!-- 注意：data-txtInsert 会被渲染成 data-txtinsert，会被忽略大小写 -->
    <div data-txt_insert="dateString"></div>
    <img data-src="myPet" width="200" />
    <video data-src="myVideo"  width="320" controls></video>
    <audio data-src="myAudio" width="320" controls></audio>
    <input data-placeholder="myPlaceholder" type="text" placeholder="请输入内容">

    <script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
    <script src="./librarys/jquery.i18n.properties@1.2.7/jquery.i18n.properties.js"></script>
    <script>
      function setLanguage(lang) {
        $.i18n.properties({
          name: "strings", //属性文件名 命名格式：文件名_语言_代号.properties
          path: "./i18n/", //注意这里路径是你属性文件的所在文件夹
          /* 
            加载模式：
              ”vars”表示以 JavaScript 变量或函数的形式使用资源文件中的 Key，”map”表示以 Map 的方式使用资源文件中的 Key，
              ”both”表示可以同时使用两种方式。如果资源文件中的 Key 包含 JavaScript 的关键字，则只能采用”map”。默认值是”vars”。
          */
          mode: "map",
          language: lang, //语言 name+language刚好组成属性文件名：strings + zh-CN -> strings_zh_CN.properties
          cache: false, //指定浏览器是否对资源文件进行缓存,默认false
          encoding: "UTF-8", //加载资源文件时使用的编码。默认为 UTF-8。
          callback: function () {
            // 对所有data-txt的Dom进行遍历
            $("[data-txt]").each(function () {
              // 获取data传值
              let _dataName = $(this).data("txt");
              // 通过data属性值获取i18n中对应的值
              let _i18nTxt = $.i18n.prop(_dataName);
              // 展示国际化i18n的值
              $(this).text(_i18nTxt);
            });
            $("[data-txt_insert]").each(function () {
              // 获取data传值
              let _dataName = $(this).data("txt_insert");
              // 通过data属性值获取i18n中对应的值
              let _i18nTxt = $.i18n.prop(_dataName, "周三", "2023-03-15");
              // 展示国际化i18n的值
              $(this).text(_i18nTxt);
            });
            $("[data-src]").each(function () {
              $(this).attr("src", $.i18n.prop($(this).data("src")));
            });
            $("[data-placeholder]").each(function () {
              $(this).attr("placeholder", $.i18n.prop($(this).data("placeholder")));
            });
          },
        });
      }
      $(function () {
        // 获取浏览器语言
        let navLanguage = navigator.language || navigator.userLanguage;
        /* 
          jquery.i18n.properties加载*.properties文件顺序：
          1. strings.properties
          2. strings_zh.properties
          3. strings_zh_CN.properties
          文件组成：name_语言_国家或地区.properties，例如：strings_zh_CN.properties
          如果strings_zh_CN.properties未匹配成功，则匹配strings_zh.properties，否则匹配strings.properties文件。
          
          例如：
          如果只有三个文件：
          1. strings.properties
          2. strings_zh.properties
          3. strings_zh_CN.properties
          
          setLanguage("zh-CN");匹配strings_zh_CN.properties文件
          setLanguage("zh-zg");匹配strings_zh.properties文件
          setLanguage("zg-zg");匹配strings.properties文件
        */
        setLanguage(navLanguage);
      });
    </script>
  </body>
</html>

如果只想加载一个properties文件，可以修改jquery.i18n.properties源代码，但是不建议这样做。

jquery.i18n.properties文件中fileNames数组中只包含一个值即可。

jquery.i18n.properties实现多语言切换

导入资源文件

准备文件

代码实现

推荐