js動態變數名從0到1教你寫乙個JS的多語言庫

造這個輪子源於之前做的那個彩虹屁老婆外掛程式，裡面需要用到多語言切換。借這個由頭，自己來實現一下。做之前其實對js的多語言庫沒什麼了解，做完之後倒是去比較了下vue-i18n。

大部分js的多語言庫似乎都採用了json格式，可以很方便的轉為物件解析，還可以分多級結構來組織配置內容。但是我個人感覺json格式對非技術人員(比如正經請個翻譯的話)並不太友好。加上聯想起過去做ios開發多語言時的體驗，我還是傾向於選擇普通的文字格式，基本上完全照搬ios裡的.strings檔案來做多語言配置。

//vue-i18n示例
$t("login.title")
//nslocalizedstring示例
nslocalizedstring("知道了")

本例裡是乙個node環境，所以用fs來讀取檔案內容，然後賦值給data。如果要支援瀏覽器環境，可以用其他http框架api來讀取檔案內容。

const list = data.split("\n");

在這裡我使用了兩個陣列，乙個用來存放讀取所用的鍵名，乙個用來存放對應的值。是不是可以扔到{}物件裡呢？考慮到可能有一些特殊情況需要使用特殊字元來取值，為了保證這種特殊情況下的相容性，所以盡量不要讓key成為key。

keys=;
values=;
for (var i = list.length - 1; i >= 0; i--)

首先通過string的split方法，以=為分隔符拆分字串為陣列。然後trim裁剪掉兩邊的空格，給這樣的配置結構增加一定的容錯性。

以上步驟完成後，我們就可以通過values[keys.indexof("鍵")]的方式來獲取對應的多語言文字了。

在使用多語言時，我們可能會遇到這樣的情況。「我有1個蘋果」，其中數字部分是動態的，前後為固定不變的內容。當然我們可以使用a+變數+b的形式來組合，但這樣未免有點麻煩，而且影響**的可讀性。

這個時候我們就需要另一種實現方式

localized("請選擇檔案","model.json")

也需要支援攜帶多個變數

localized("請選擇，檔案","png","jpg")

這樣用起來就非常簡單，**也十分好讀。實現的核心就是先用正則將結構全部提取出來，然後按照args的傳遞順序依次替換

let dynamics=value.match(//g);
if(!dynamics)return value;
var dynamic_str = value;
for (var i = 0; i     var d_item=dynamics[i];
dynamic_str=dynamic_str.replace(d_item,`$`);
}return dynamic_str;

自己手寫乙個多語言庫不難，核心邏輯並不複雜。重點是在造輪子的過程中，去思考使用場景，多語言配置的提供者，有可能遇到哪些問題，什麼樣的配置能提公升他們的工作效率。在**層，api怎麼設計更好用，**可讀性更好等等。

js動態變數名從0到1教你寫乙個JS的多語言庫

從0到1，開發乙個動畫庫 2

如何運營好乙個論壇，從0到1入門

自己從0到1開發乙個APP需要了解什麼內容

js動態變數名 從0到1教你寫乙個JS的多語言庫

從0到1，開發乙個動畫庫 2

如何運營好乙個論壇，從0到1入門

自己從0到1開發乙個APP需要了解什麼內容

相關推薦

js動態變數名從0到1教你寫乙個JS的多語言庫