摘要：假如有這么一段句子這件衣服是人民幣如果我們想將一個數字以人民幣的形式寫進去的話可以這么做最終顯示結果是這件衣服是人民幣其實它做了兩件事一個是加符號，另一個是加分隔符。同時表示人民幣，表示美元。

今天來介紹一個非常international的東西。

i18n
國際化(internationalization)的簡稱。之所以叫i18n，是因為字母i和n之間有18個字母，所以才叫i18n。不要認為這是一個高大上的名詞，其實就是因為懶才簡寫的。hiahiahia...

因為本系列是以React為中心，所以只介紹React項目中的國際化解決方案。當然還有很多很多...很多別的國際化解決方案，但是不是所有的輪子都適合React這輛開往幼兒園的車。
實際上國際化在日常項目中用的沒那么頻繁，除非有業務需求，比如要做一個非常international的項目。目前在React中比較熱門的兩個包就是react-intl-universal 和 react-intl。因為本文重點介紹對象是前者，所以我們先簡單介紹下后者。當然在這里不會把它的使用方法列出來，而是把它的缺點列出來，為什么呢？因為筆者懶啊！
react-intl不足的地方主要是兩個：

它只能用于視圖層。舉個例子，比如React.Comoponent對象，但是對于Vanilla JS就會顯得很無力了，因為它無法在Vanilla JS中實例化。(這里會有人感到奇怪，Vanilla JS是什么鬼？哈哈...百gu度ge吧，不會發現新大陸)!

其次

想使用國際化方法，我們必須要利用它的一個方法將自己的組件轉化成另外一個class。這就比較蛋疼了，例子如下:

import { injectIntl } from "react-intl";
class MyComponent extends Component {
  render() {
    const intl = this.props;
    const title = intl.formatMessage({ id: "title" });
    return (
{title}
);
  }
};
export default injectIntl(MyComponent);

看我筆者第一篇文章的朋友應該有印象：所有被包裹過的組件，如果你想獲得原本的組件的對象，那得調用相應的方法。這里也不例外，如果我們想獲取組件的原對象，那就得這么做：

class MyComponent {...}
export default injectIntl(MyComponent, {withRef: true});
 
class App {
  render() {
    
  }
  getMyInstance() {
    console.log("getMyInstance", this.refs.my.getWrappedInstance());
  }
}

這樣寫會不會覺得太麻煩了...
所以Alibaba前端組就按捺不住了，然后就搞出了自己的react-intl-universal。看名字不就是在react-intl后面加個universal嗎？的確是這樣，不過筆者不清楚這個框架的核心邏輯是不是參考的react-intl，但是單從名字來看就有點"可疑"了，翻譯就是react-intl的通用版(當然，純屬意淫，一笑而過！)。

作為一個國際化解決方案，首先實現國際化是它的基本功能。其次它還有一些別的功能，比如文本格式化、貨幣格式化、時間格式化等等，我相信這些都是我們頁面開發經常使用到的功能。

首先來看一下它的技術功能：國際化
react-intl-universal采用了與組件無關的方法來實現國際化。國際化的本質其實就是將我們預先設置好的不同語言的句子按照語言環境顯示在頁面上。

import intl from "react-intl-universal";

通過intl這個對象來實現初始化和國際化處理。我們可以認為這個intl是一個單例對象。我們在App啟動的時候對其進行初始化，爾后在別的地方再次導入的時候仍然是一個已經初始化過的對象。在這種情況下，國際化處理就會變得異常簡單。其次就是準備多語言句子了，傳統的在前端處理這個問題是將不同語言的句子放在不同的json文件中再導出，文件結構如下：

這樣我們就可以在App啟動或者切換語言的時候導入相應的json對象了。

首先是API介紹

intl對象主要有三個常用的用于國際化處理的API，determineLocale、init、get。

determineLocale
看到方法名就應該知道它是用來干什么了。它用來確定在整個體系中使用的是哪種語言。看代碼：

let currentLocale = intl.determineLocale({
    urlLocaleKey: "lang",
    cookieLocaleKey: "lang"
});

react-intl-universal確定語言的方式有三種，一個是通過urlLocaleKey，即lang關鍵字從url中獲取是哪種語言。比如：http://localhost?lang=en-US，因為lang對應的值是en_US，所以語言為英文。其次是從Cookie獲取，因為Cookie也是以鍵值對形式存儲的，所以會檢查當前域下的Cookie是否有對應的lang。如果上述兩種都沒有，那么會默認使用瀏覽器當前的語言類型。當然上述的urlLocaleKey和cookieLocaleKey是可以自定義的，不是固定的lang.

init

init方法即用來初始化intl對象。初始化參數主要是兩個，一個是currentLocale即當前的語言，另一個是locales即當前語言對應的json對象，比如{"en-US":{"key1":"value1"} 或者 {"zh-CN":{"key1":"值1"}}。

get
get方法就相對簡單，就是根據鍵去intl中獲取對應的值，這里不做過多解釋。

完整的初始化過程如下：

class App extends Component{
    ....
    
    componentDidMount() {
        this.loadLocales();
    }

    loadLocales() {
        const _self = this;
        let currentLocale = intl.determineLocale({  //如果cookie和url中均沒有相關參數，那么以瀏覽器語言為準
            urlLocaleKey: "lang",
            cookieLocaleKey: "lang"
        });

        http
            .get(`locales/${currentLocale}.json`)   //理解為按需加載并且locales文件夾需要放在public文件下供http訪問
            .then(res => {
                return intl.init({
                    currentLocale,
                    locales: {
                        [currentLocale]: res.data //如果key是變量，那么需要用[]包一下
                    }
                });
            })
            .then(() => {
                _self.setState({initDone: true});
            });
    }
    
    ....
}

然后在需要國際化的地方這么使用

import intl from "react-intl-universal";
{intl.get("name")}

是不是很簡單? 而且完全避免了react-intl的兩個缺點。

前面說了react-intl-universal不僅僅可以用來做國際化處理，還可以用來做簡單的文本格式化處理。下面我們列舉幾個常用的。

假如我們的json文件中有這么一段

...
"red": "
紅色
",
...

如果我們直接用get方法獲取的話，那么會直接把

紅色

缺省值其實就是默認值，是對于json鍵值對的默認值。將入我們去獲取一個json中沒有的鍵值對那么系統就會報錯。如何去規避這個問題呢？react-intl-universal給我們提供了這樣一個方法：

intl.get("not-exist-key").defaultMessage("default message")

這是一個鏈式調用。如果json中沒有not-exist-key這個鍵，那就會默認返回defaultMessage的參數。簡寫是intl.get("not-exist-key").d("default message")。

假如某個句子包含了一個變量怎么辦？比如一個用戶名，我們只有在用戶登錄的時候才知道他的用戶名。

{
    "me": "你好，我是{me}"
}

此時就用到了get放的第二個參數。對于上面的例子，我們可以這樣處理：

{intl.get("me", {"me": "皮卡丘"})}

get方法會找出句子中被{}包住的變量me，然后在第二個參數(json對象)找出me對應的值皮卡丘并將{me}整個用皮卡丘替換。另外需要注意的是，json對象只能為一層，不可嵌套。

它還可以用來格式化貨幣。假如有這么一段句子

{
  "price": "這件衣服是 {price,number,CNY} 人民幣",
}

如果我們想將一個數字以人民幣的形式寫進去的話可以這么做：

{intl.get("price", {"price": 1000})}

最終顯示結果是:這件衣服是 ￥1,000 人民幣
其實它做了兩件事：一個是加符號，另一個是加分隔符。同時CNY表示人民幣，USD表示美元。

然后是日期的處理。假如有這么一段話：

{
    "date": "今天是{date,date,full}"
}

然后我們這么使用它的話：

{intl.get("date",{"date":new Date()})}

顯示結果是今天是2018年12月3日星期一。其實{date,date,full}這段指令就是將date變量替換成對應日期(new Date())并以long形式展示。

同時日期展示形式有四種

short： shows date as shortest as possible

medium： shows short textual representation of the month

long： shows long textual representation of the month

full： shows dates with the most detail

他們之間有什么不同呢？我們用剛剛的例子做個展示：

short： 今天是18/12/3

medium： 今天是2018年12月3日

long： 今天是2018年12月3日

full： 今天是2018年12月3日星期一

最后是時間。我們按部就班來。假如有這么一段話：

{
    "time": "現在時間是{time,time,short}"
}

然后我們這么使用它的話：

 
{intl.get("time",{"time":new Date()})}

顯示結果是現在時間是下午5:54。其實{time,time,short}這段指令就是將time變量替換成對應日期(new Date())并以short形式展示。

但是時間展示形式只有三種，它沒有full

short： shows date as shortest as possible

medium： shows short textual representation of the month

long： shows long textual representation of the month

他們之間有什么不同呢？我們用剛剛的例子做個展示：

short： 現在時間是下午5:54

medium： 現在時間是下午5:58:22

long： 現在時間是GMT+8 下午5:58:50

上述貼出來的示例都是在中文環境下。如果有興趣的朋友可以把整個例子download下來本地運行下，邊看邊寫，受益匪淺。好了，收拾下班咯...