摘要：最近在項目中添加了語言國際化的功能。項目地址是雅虎的語言國際化開源項目的一部分，通過其提供的組件和可以與綁定。你當然可以使用的方式引用，但是，這樣有前途么創建配置文件這里，我們將文件命名為和，代表中文和美式英語的配置包。

最近在項目中添加了語言國際化的功能。

語言國際化，也有人說成是語言本地化，其實就是為Web App添加多語言，我們的項目當前包含了中文版和英文版，按理來說『逐字替換』也不是多大事兒，但是，這么Low的做法，有錢途嗎？

一開始的時候，我考慮的是傳統的為整個項目添加config文件，根據不同的語言和地區，加載不同的config文件，就能夠達到界面語言切換的目的。當然，也正是因為這個想法太過于幼稚，所以才被稱為『一開始』的想法。語言的國際化不僅僅是將界面上的UI文字翻譯成另一種語言，還包括了日期&時間顯示，數字顯示（英文環境下每隔3位一個逗號：1,000），量詞的顯示（一個蘋果是apple，兩個蘋果就應該是apples），甚至還有一個字符串中間插了一個變量的情況（"今天午飯吃了{count}個雞腿"）...

所以這并不只是一個簡單的字符替換問題，并且，我們要很方便的導出一個目錄，放到word或者page當中，給到其他同事對照著進行翻譯工作，這個非常重要！！難道你要讓產品經理直接在代碼里改么？或者你想一個一個搜索替換？不考慮清楚就干的話，相信我，You"ll pay for this。

作為一個有追求的代碼家，你肯定不希望在index.html當中增加一行

項目地址：https://github.com/yahoo/reac...

React-intl是雅虎的語言國際化開源項目FormatJS的一部分，通過其提供的組件和API可以與ReactJS綁定。上面這句話援引了官方文檔的說辭，主要表達的是，這是一個很屌的開源項目，有大團隊支持，使用量也很大，不會太坑爹，你們放心用。雖然雅虎都快被收購了。

React-intl提供了兩種使用方法，一種是引用React組建，另一種是直接調取API，官方更加推薦在React項目中使用前者，只有在無法使用React組件的地方，才應該調用框架提供的API，事實上，我在項目的過程中真的遇到了無法使用組件的情況，這個我會另外寫一篇文章來描述。

React-intl提供的React組件有如下幾種：

包裹在需要語言國際化的組建的最外層，為包含在其中的所有組建提供包含id和字符串的鍵值對。（如："homepage.title":"Hommily";）

a. 用于格式化日期，能夠將一個時間戳格式化成不同語言中的日期格式。

傳入時間戳作為參數：

輸出結果：

4/5/2016

b. 用于格式化時間，效果與相似。

傳入時間戳作為參數：

輸出結果：

1:09 AM

c. 通過這個組件可以顯示傳入組件的某個時間戳和當前時間的關系，比如 “ 10 minutes ago"。

傳入時間戳作為參數：

輸出結果:

now

10秒之后的輸出結果：

10 seconds ago

1分鐘之后的輸出結果：

1 minute ago

a. 這個組件最主要的用途是用來給一串數字標逗號，比如10000這個數字，在中文的語言環境中應該是1,0000，是每隔4位加一個逗號，而在英語的環境中是10,000，每隔3位加一個逗號。

傳入數字作為參數：

輸出結果：

1,000

b. 這個組件可用于格式化量詞，在中文的語境中，其實不太會用得到，比如我們說一個雞腿，那么量詞就是‘個’，我們說兩個雞腿，量詞還是‘個’，不會發生變化。但是在英文的語言環境中，描述一個蘋果的時候，量詞是apple，當蘋果數量為兩個時，就會變成apples，這個組件的作用就在于此。

傳入組件的參數中，value為數量，其他的為不同數量時對應的量詞，在下面的例子中，一個的時候量詞為message，兩個的時候量詞為messages。實際上可以傳入組件的量詞包括 zero, one, two, few, many, other 已經涵蓋了所有的情況。

傳入組件的量詞參數可以是一個字符串，也可以是一個組件，我們可以選擇傳入組件，就可以實現量詞的不同語言的切換。

輸出結果：

messages

a. 這個組件用于格式化字符串，是所有的組件中使用頻率最高的組件，因為基本上，UI上面的每一個字符串都應該用這個組件替代。這個組件的功能豐富，除了可以根據配置輸出不同語言的簡單字符串之外，還可以輸出包含動態變化的參數的復雜字符串，具體的用法在后面的例子中會慢慢敘述。

比如我們在locale配置文件中寫了如下內容：

const app = {
    greeting:"Hello Howard!",
}

export default app;

使用這個組件的時候，我們這么寫：

id指代的是這個字符串在locale配置文件中的屬性名，description指的是對于這個位置替代的字符串的描述，便于維護代碼，不寫的話也不會影響輸出的結果，當在locale配置文件中沒有找到這個id的時候，輸出的結果就是defaultMessage的值。

輸出的結果：

Hello, Howard!

b. 這個組件的用法和完全相同，唯一的不同就是輸出的字符串可以包含HTML標簽，但是官方不太推薦使用這個方法，如果可以想辦法用的話，就不應該使用這個組件，我揣測應該是性能方面不如，這個組件的用法我就不舉例了。

Well，到此為止，已經把React-intl提供的所有組件介紹完了，下面就給大家介紹一下具體如何去使用吧。

(本文例子運行在OSX環境，Window操作方法的終端在安裝的時候要注意用管理員身份運行)

假設你已經在你的系統中安裝了node.js和npm，如果你還不知道這兩個是什么東西，請自行百度，對，在百度都能找到答案。

打開終端，進入項目根目錄，輸入以下指令安裝React-intl:

npm install react-intl -save

注意：為了兼容Safari各個版本，需要同時安裝 intl，intl在大部分的『現代』瀏覽器中是默認自帶的，但是Safari和IE11以下的版本就沒有了，這里需要留個心眼。

安裝intl需要在終端中輸入以下指令：

npm install intl --save

這里還有一個注意：由于React-intl的每一個組件的使用方法大同小異，和ReactJS的語法完全一致，所以我就僅僅描述如何使用這個組件的用法，借此拋磚引玉，相信看完之后已經足夠幫助你迅速的去使用這個開源框架了。

import { FormattedMessage } from "react-intl"; 

由于我使用的是ES6 的語法，所以是支持直接引用組件的。你當然可以使用ES5的方式引用，但是，這樣有前途么？

require ReactIntl from "react-intl";

這里，我們將文件命名為zh_CN.js和en_US.js，代表中文和美式英語的配置包。

在zh_CN.js編寫如下代碼：

const zh_CN = {
            hello:"你好，方浩！"，
            superHello:"你好，{ someone } !"
        }
export default zh_CN;    

在en_US.js編寫如下代碼：

const en_US = {
            hello:"Hello, Howard!"，
            superHello:"Hello, { someone } !"
        }    
export default en_US;

于是，我們就創建好了locale文件，但是，在實際的項目中配置文件不會這么簡單，您可能需要根據業務需求按照不同的頁面或者不同的功能塊創建不同的文件樹，然后用模塊化的方法將不同的配置文件進行組織，已達成你的目標，這里我也就沒能力逼逼太多了。

你可能想問，{ someone } 是什么鬼？其實悟性高一些的話就應該已經猜到，這個應該就是前面提到過的在字符串中插入動態參數的用法，事實上也是這樣的。

使用 組件包裹住需要您需要進行語言國際化的組件，用法和React-redux的差不多，當 包裹住某個組件的時候，這個組件本身和組件內部包含的子組件就可以獲得所有React-intl提供的接口以及在 中引入的locale配置文件的內容。

import React from "react";
import { render } from "react-dom";
//引入locale配置文件，具體路徑根據實際情況填寫
import zh_CN from "./zh_CN";
import en-US from "./en-US";
//如果瀏覽器沒有自帶intl，則需要在使用npm安裝intl之后添加如下代碼
import intl from "intl";
addLocaleDate([...en,...zh]);

...
...

render(    
        
            
        ,    
        document.getElementById("container")
);

需要傳遞兩個參數：

locale是傳遞需要國際化的語言的縮寫，通過這個參數可以確定格式化日期，數字，量詞的時候按照哪一種語言的規則，這個是規則是intl提供的，一般瀏覽器會內置這個庫，但是在Safari和IE11之前需要自己安裝，安裝的方法前面已經提及，請自己翻閱。

messages是用于傳遞剛剛我們在第3步中定義的配置文件的，從示例代碼中我們可以看出，首先我們使用Import語句引入了配置文件，然后將配置文件的內容傳遞給了messages這個參數，此時組件中的所有組件都可以拿到配置文件中的內容了。

那個跳起來的同學，請先坐下，我猜你是想問，是不是每次都要手動修改這兩個參數以適配不同語言呢？

其實不然，我們完全可以按照下面的做法自動識別當前瀏覽器的語言：

chooseLocale(){
    switch(navigator.language.split("_")[0]){
        case "en":
            return "en_US";
            break;
        case "zh":
            return "zh_CN";
            break;
        ...
        ...
        ...
        default:
            return "en_US";
            break;
    }
}
render(    
        
            
        ,    
        document.getElementById("container")
);

您還需要知道的是，是可以嵌套使用的，也就是說，在一個內部還可以有N個，這個功能的實際意義就是可以在英文網站中嵌套一個中文的或者德語的或者法語的板塊，應用起來會更加靈活一些。

前面的幾個步驟其實都是為了這個步驟做鋪墊的，在添加了之后，我們就可以在其包裹的及包含的所有組件中獲取到配置文件的信息，傳入組件的id參數也能其在配置文件中對應的字符串了。

使用的方法如下：

在Js執行的時候，組件就會找到配置文件中，‘hello"鍵名對應的字符串"Hello, Howard!".

輸出的結果為：

Hello, Howard!

那么如何輸出含有動態參數的字符串呢？比如Hello，Johnson!，如果我要問候的對象是一個變量呢？

那就這么寫唄。。

以上的例子中，賦給someone的就是一個變量（假設這個變量是通過參數傳進這個組件的），注意，如果是這樣的話，那么locale配置文件中就要這么寫。

 superHello:"你好，{ someone } !"

前面其實提過了，怕你忘了...我已經悄無聲息的把id換成了superHello。

更牛逼的是，這個someone還可以包含HTML標簽！

this.props.name,
    }
    />

輸出結果：

Hello, Howard!

于是，這個名字就被加粗了。

眼尖的同學又要跳起來了，“webFunc，為什么所有的輸出都帶一個標簽，我就不能換成別的么？”

不要著急，我正要說這個，對于這個問題，官方的文檔是這么說的。

By default  will render the formatted string into
a . If you need to customize rendering, you can either wrap it
with another React element (recommended), specify a different tagName
(e.g., "div"), or pass a function as the child.

翻譯過來就是，默認的是會包裹在標簽中的，如果想要讓輸出的字符串包裹在其他標簽中的話，比如你想包裹在

Hello, Howard!

Hello, Howard!