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

今天來介紹一個(gè)非常international的東西。

i18n
國(guó)際化(internationalization)的簡(jiǎn)稱。之所以叫i18n，是因?yàn)樽帜?b>i和n之間有18個(gè)字母，所以才叫i18n。不要認(rèn)為這是一個(gè)高大上的名詞，其實(shí)就是因?yàn)閼胁藕?jiǎn)寫的。hiahiahia...

因?yàn)楸鞠盗惺且訰eact為中心，所以只介紹React項(xiàng)目中的國(guó)際化解決方案。當(dāng)然還有很多很多...很多別的國(guó)際化解決方案，但是不是所有的輪子都適合React這輛開往幼兒園的車。
實(shí)際上國(guó)際化在日常項(xiàng)目中用的沒那么頻繁，除非有業(yè)務(wù)需求，比如要做一個(gè)非常international的項(xiàng)目。目前在React中比較熱門的兩個(gè)包就是react-intl-universal 和 react-intl。因?yàn)楸疚闹攸c(diǎn)介紹對(duì)象是前者，所以我們先簡(jiǎn)單介紹下后者。當(dāng)然在這里不會(huì)把它的使用方法列出來，而是把它的缺點(diǎn)列出來，為什么呢？因?yàn)楣P者懶啊！
react-intl不足的地方主要是兩個(gè)：

它只能用于視圖層。舉個(gè)例子，比如React.Comoponent對(duì)象，但是對(duì)于Vanilla JS就會(huì)顯得很無力了，因?yàn)樗鼰o法在Vanilla JS中實(shí)例化。(這里會(huì)有人感到奇怪，Vanilla JS是什么鬼？哈哈...百gu度ge吧，不會(huì)發(fā)現(xiàn)新大陸)!

其次

想使用國(guó)際化方法，我們必須要利用它的一個(gè)方法將自己的組件轉(zhuǎn)化成另外一個(gè)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);

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

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

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

作為一個(gè)國(guó)際化解決方案，首先實(shí)現(xiàn)國(guó)際化是它的基本功能。其次它還有一些別的功能，比如文本格式化、貨幣格式化、時(shí)間格式化等等，我相信這些都是我們頁面開發(fā)經(jīng)常使用到的功能。

首先來看一下它的技術(shù)功能：國(guó)際化
react-intl-universal采用了與組件無關(guān)的方法來實(shí)現(xiàn)國(guó)際化。國(guó)際化的本質(zhì)其實(shí)就是將我們預(yù)先設(shè)置好的不同語言的句子按照語言環(huán)境顯示在頁面上。

import intl from "react-intl-universal";

通過intl這個(gè)對(duì)象來實(shí)現(xiàn)初始化和國(guó)際化處理。我們可以認(rèn)為這個(gè)intl是一個(gè)單例對(duì)象。我們?cè)贏pp啟動(dòng)的時(shí)候?qū)ζ溥M(jìn)行初始化，爾后在別的地方再次導(dǎo)入的時(shí)候仍然是一個(gè)已經(jīng)初始化過的對(duì)象。在這種情況下，國(guó)際化處理就會(huì)變得異常簡(jiǎn)單。其次就是準(zhǔn)備多語言句子了，傳統(tǒng)的在前端處理這個(gè)問題是將不同語言的句子放在不同的json文件中再導(dǎo)出，文件結(jié)構(gòu)如下：

這樣我們就可以在App啟動(dòng)或者切換語言的時(shí)候?qū)胂鄳?yīng)的json對(duì)象了。

首先是API介紹

intl對(duì)象主要有三個(gè)常用的用于國(guó)際化處理的API，determineLocale、init、get。

determineLocale
看到方法名就應(yīng)該知道它是用來干什么了。它用來確定在整個(gè)體系中使用的是哪種語言?？创a：

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

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

init

init方法即用來初始化intl對(duì)象。初始化參數(shù)主要是兩個(gè)，一個(gè)是currentLocale即當(dāng)前的語言，另一個(gè)是locales即當(dāng)前語言對(duì)應(yīng)的json對(duì)象，比如{"en-US":{"key1":"value1"} 或者 {"zh-CN":{"key1":"值1"}}。

get
get方法就相對(duì)簡(jiǎn)單，就是根據(jù)鍵去intl中獲取對(duì)應(yīng)的值，這里不做過多解釋。

完整的初始化過程如下：

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

    loadLocales() {
        const _self = this;
        let currentLocale = intl.determineLocale({  //如果cookie和url中均沒有相關(guān)參數(shù)，那么以瀏覽器語言為準(zhǔn)
            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});
            });
    }
    
    ....
}

然后在需要國(guó)際化的地方這么使用

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

是不是很簡(jiǎn)單? 而且完全避免了react-intl的兩個(gè)缺點(diǎn)。

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

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

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

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

紅色

缺省值其實(shí)就是默認(rèn)值，是對(duì)于json鍵值對(duì)的默認(rèn)值。將入我們?nèi)カ@取一個(gè)json中沒有的鍵值對(duì)那么系統(tǒng)就會(huì)報(bào)錯(cuò)。如何去規(guī)避這個(gè)問題呢？react-intl-universal給我們提供了這樣一個(gè)方法：

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

這是一個(gè)鏈?zhǔn)秸{(diào)用。如果json中沒有not-exist-key這個(gè)鍵，那就會(huì)默認(rèn)返回defaultMessage的參數(shù)。簡(jiǎn)寫是intl.get("not-exist-key").d("default message")。

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

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

此時(shí)就用到了get放的第二個(gè)參數(shù)。對(duì)于上面的例子，我們可以這樣處理：

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

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

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

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

如果我們想將一個(gè)數(shù)字以人民幣的形式寫進(jìn)去的話可以這么做：

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

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

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

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

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

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

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

同時(shí)日期展示形式有四種

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

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

short： 今天是18/12/3

medium： 今天是2018年12月3日

long： 今天是2018年12月3日

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

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

{
    "time": "現(xiàn)在時(shí)間是{time,time,short}"
}

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

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

顯示結(jié)果是現(xiàn)在時(shí)間是下午5:54。其實(shí){time,time,short}這段指令就是將time變量替換成對(duì)應(yīng)日期(new Date())并以short形式展示。

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

short： shows date as shortest as possible

medium： shows short textual representation of the month

long： shows long textual representation of the month

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

short： 現(xiàn)在時(shí)間是下午5:54

medium： 現(xiàn)在時(shí)間是下午5:58:22

long： 現(xiàn)在時(shí)間是GMT+8 下午5:58:50

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