在做網站的時候可能會遇到不同語言切換的問題，實現的方法有很多種，本篇文章按照 js 加載的方法的來實現。
應用到的 js 文件：
jquery.i18n.properties.js
jquery.js
具體繁瑣的功能就不一一介紹實現了，下面做一個簡單的案例。
文件目錄如下：
strings_zh.properties 文件內容：
1 title = i18n 案例 2 3 lang_demo = 這是一個 i18n demo 4 5 lang_btn = 點擊切換 6 7 li_lang1 = 一 8 li_lang2 = 二 9 li_lang3 = 三
strings_en.properties 文件內容：
1 title = i18n demo 2 3 lang_demo = This is a i18n demo 4 5 lang_btn = Change click 6 7 li_lang1 = one 8 li_lang2 = two 9 li_lang3 = three
index.html 文件內容：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>i18n 案例</title> 6 </head> 7 <body> 8 <div> 9 <p data-lang="lang_demo">這是一個 i18n demo</p> 10 <button data-lang="lang_btn" onclick="changeClick()">點擊切換</button> 11 <ul> 12 <li data-lang="li_lang1">一</li> 13 <li data-lang="li_lang2">二</li> 14 <li data-lang="li_lang3">三</li> 15 </ul> 16 </div> 17 <script src="js/jquery-1.11.3.min.js"></script> 18 <script src="js/jquery.i18n.properties-1.0.9.js"></script> 19 <script> 20 let lang = "zh"; 21 22 function changeClick() { 23 if (lang === "zh") { 24 lang = "en" 25 } else { 26 lang = "zh" 27 } 28 jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件 29 name: 'strings', //資源文件名稱 30 path: 'language/', //資源文件路徑 31 language: lang, 32 cache: false, 33 mode: 'map', //用Map的方式使用資源文件中的值 34 callback: function () {//加載成功后設置顯示內容 35 for (let i in $.i18n.map) { 36 $('[data-lang="' + i + '"]').text($.i18n.map[i]); 37 } 38 document.title = $.i18n.map['title']; 39 } 40 }); 41 } 42 43 </script> 44 </body> 45 </html>
我們根據在標簽內添加 data-lang=" " 標簽來與 strings_zh.properties 和 strings_en.properties 文件內的鍵值配對，然后通過點擊 button 按鈕來切換 lang 值，也就是達到中英切換。運行結果如下：
1、頁面加載完成：
2、button 按鈕點擊后：
