簡介
如果一個應用程式在設計時,可以在不修改應用程式的情況下,根據不同的使用者直接採用不同的語言、數字格式、日期格式等,這樣的設計考量稱為國際化(internationalization),簡稱i18n(因為internationalization有18個字母)。
國際化的重要觀念之一是地區(Locale)資訊,地區資訊代表了特定的地理、政治或文化區,地區資訊可由一個**語言編碥(Language code)與可選的區域編碼(Country code)**來指定,其中語言編碼是 ISO-639 定義,由兩個小寫字母代表,例如”ca”表示嘉泰羅尼亞文(Catalan),”zh”表示中文(Chinese)。
區域編碼則由兩個大寫字母表示,定義 在ISO-3166, 例如IT表示義大利(Italy)、TW表示台灣(Taiwan)。
在React中的用法
安裝 react-intl
yarn add react-intl
使用 IntlProvider
將 <IntlProvider> 包在最外層,讓所有內部 component 都可以存取到它提供的屬性與方法。

取得使用者語系並帶入 IntlProvider
接著:
- 透過 navigator.language 取得使用者在瀏覽器上所使用的語系,並且將它代入 IntlProvider 的 local 屬性中
- 若有需要可以定義 defaultLocale 屬性

定義多語系字典檔
做好上述設定後,就可以來定義多語系用的字典檔。假設我們要做 i18n 的內容是範例頁面中的「Learn React」這個部分:

這時候就可以先定義這個字典檔。首先在 ./src 資料夾內再新增一個 i18n 的資料夾,裡面分別放入 en.js, zh.js, ja.js:

接著分別定義每支字典檔的內容,這裡的 app.learn 可以視為 id,之後的使用 react-intl 提供的方法或組件時,他會根據你提供的這個 id 來帶入不同的內容,而 { } 刮起來的 name 表示它是動態的變數:
**// ./src/i18n/en.js**
const en = { 'app.learn': 'Learn {name}' };
export default en;
**// ./src/i18n/zh.js**
const zh_TW = { 'app.learn': '學習 {name}' };
export default zh_TW;
**// ./src/i18n/ja.js**
const ja_JP = { 'app.learn': '学び {name}' };
export default ja_JP;
撰寫切換語言的功能
因為一開始使用的是 functional component,想要添加狀態(state)的話,可以匯入 useState

在 App.js 的地方,撰寫三個按鈕可以來切換 locale 的狀態:

文字訊息多語系
這裡說明的是最一般用來轉換不同語系字串的作法,react-intl 提供了:

根據不同的語言傳入不同的語系檔
可以切換 locale 的狀態後,最後就可以根據使用者選擇的語言傳入不同的語系檔。
先將剛剛撰寫好的語系檔載入:

接著定義 messages 這個變數,透過 if 判斷使用者切換到的語言為何,最後將 messages 傳入 <IntlProvider>: