在做网站的时候可能会遇到不同语言切换的问题，实现的方法有很多种，本篇文章按照 js 加载的方法的来实现。
应用到的 js 文件：
jquery.i18n.properties.js
jquery.js
具体繁琐的功能就不一一介绍实现了，下面做一个简单的案例。
文件目录如下：
strings_zh.properties 文件内容：
title = i18n 案例 lang_demo = 这是一个 i18n demo lang_btn = 点击切换 li_lang1 = 一
li_lang2 = 二
li_lang3 = 三
strings_en.properties 文件内容：
title = i18n demo lang_demo = This is a i18n demo lang_btn = Change click li_lang1 = one
li_lang2 = two
li_lang3 = three
index.html 文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>i18n 案例</title>
</head>
<body>
<div>
<p data-lang="lang_demo">这是一个 i18n demo</p>
<button data-lang="lang_btn" onclick="changeClick()">点击切换</button>
<ul>
<li data-lang="li_lang1">一</li>
<li data-lang="li_lang2">二</li>
<li data-lang="li_lang3">三</li>
</ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.i18n.properties-1.0.9.js"></script>
<script>
let lang = "zh"; function changeClick() {
if (lang === "zh") {
lang = "en"
} else {
lang = "zh"
}
jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
name: 'strings', //资源文件名称
path: 'language/', //资源文件路径
language: lang,
cache: false,
mode: 'map', //用Map的方式使用资源文件中的值
callback: function () {//加载成功后设置显示内容
for (let i in $.i18n.map) {
$('[data-lang="' + i + '"]').text($.i18n.map[i]);
}
document.title = $.i18n.map['title'];
}
});
} </script>
</body>
</html>
我们根据在标签内添加 data-lang=" " 标签来与 strings_zh.properties 和 strings_en.properties 文件内的键值配对，然后通过点击 button 按钮来切换 lang 值，也就是达到中英切换。运行结果如下：
1、页面加载完成：
2、button 按钮点击后：