分享

宅技術-React 多國語系(一)

React i18n l10n introduction basic

Photo by Jason Leung on Unsplash

這是一篇關於許多國家例如:臺灣、美國、日本、中國……等的一個故事。在程式設計上,一定有人被這些不同的語言搞到胃痛,這篇提供了一個簡單的胃乳片,緩解一下你的不適。如果好用請,持續服用,直到不再暴飲暴食。

大綱

第一篇:多國語系介紹
會介紹多國語系的基本知識,流程、使用標準。
第二章:Intl 物件+ Format.js 介紹
會深入去看 JavaScript 目前 Intl 物件的功能,以及 Format.js 的基礎。會附上 Intl 與 Format.js 的程式範例。
第三章:server side and client side 多國語系
這部分會各寫一個 server side and client side 多國語系範例,並且詳細介紹程式邏輯。
第四章:React 多國語系套件
基本上會把這篇翻譯一遍,然後所使用的把版本更新成最新的。
第五章:開發規劃
這邊想要討論一下,開發時如何規劃會比較好呢?
如果有機會,應該會加開Format.js 的 document 翻譯。

閱讀條件

背景知識
React i18n l10n introduction basic

頭痛

至少要知道 http request 跟 header 還有基礎 JavaScript 知識,不然會頭痛喔。
本文適合
  1. 對於多國語系完全不熟悉,想了解多國語系的朋友們。
本文不適合
  1. 知道多國語系概念,想了解如何運作的人。
  2. 想知道 React 多國語系套件的人。
  3. 想看範例的人。

基本知識

React i18n l10n introduction basic

Photo by Jakob Owens on Unsplash

多國語系基本上就是做 國際化加上在地化,也就是 i18n 與 l10n
  • i18n:i 跟 n 中間有  18 個字母,就是  Internationalization 國際化 。
  • l10n:l 跟 n 中間有 10 個字母,就是  Localization 在地化。
在軟體工程中 i18n 是為了 l10n 準備。呃,老師我聽不懂。如果我這網站目標客群有四個國家,他們各地有不同的語言文化。那豈不是要做四個網站。
錯惹!這樣改一個功能就要改四個站,如果 20 個國家那工程師會死掉。
最好的辦法就是讓網站自己去看使用者在哪一個國家。
再去把想對應的文字資料載入。
那讓網站可以依據相對應的地區做更動這件事,就是 i18n。
l10n 就是翻譯、符合該地區的內容。

流程

來畫個大致上的流程圖好勒!
React i18n l10n introduction basic

server render 多國語系模式

React i18n l10n introduction basic

client render 多國語系

第一種
  1. http header 裡面會帶有 Accept-Language 這個  key 或是 cookie / query 中帶有語系資料
  2. server 吃到 語系資料,把 application 跟 該語系 json 檔案送出。
  3. 當前端切換語系時用重新跟 server 要一次資料
切換語系時也可以只傳回  json,在前端動態引入,就看怎麼設計。
第二種
  1. 不管你 request header 帶什麼,我把整包語系檔給你
  2. 前端要切語系的時候自己重新 render 一下就好,少一個 http 的溝通成本
最後的結果應該是今天在台灣會看到 "哈嘍" 那麼在美國就會看到 "Hello"。
But,實際上我們會遇到的問題絕對不是那麼簡單!還有五關要過!
第一關:單複數
第二關:數字日期格式
第三關:圖片
第四關:文字方向
第五關:用語習慣
大魔王:怎麼跟翻譯合作?!?也就是翻譯的流程如何自動化。
種種不容易使得 多國語系跟生產一樣困難。
React i18n l10n introduction basic

Photo by freestocks on Unsplash

標準

所以有各種標準出現,這邊僅介紹 Format.js 所使用的標準。
  1. ECMA-402:這個就是 JavaScript 的標準規範,在 402 之中規範了國際化的 api 格式。例如: Intl 這個物件,專門用來國際化的。所以使用 Format.js 就必須要注意,你使用的 JavaScript 的運行環境必須符合 ECMA-402。
  2. Unicode CLDR:這就是國家代碼,這個國家代碼標準可以選用不同的語言檔案。例如:在 CLDR 中 TW 是個國家。
  3. ICU Message syntax:這不是 ICU 病房。不過不知道這個東西你想要做多國語系也跟進 ICU 病房差不多。這是一種語法格式,透過 key 來定義變數,你可以到這裡看 code。裡面 ICU object 中的 fruit 就是一串 ICU Message,其實還滿好理解的。typeOfFruit由外界決定,選取所需要的水果後,在決定數量。
React i18n l10n introduction basic

Photo by Mufid Majnun on Unsplash

這樣只解決了 1、2、 5。3、4 要在一開始的時候就進行設計,後續在改動會想吐血,三跟四必須要先探討產品 TA的圖片以及用語禁忌,要怎麼樣編排設計。至於大魔王就是各家公司需要自行去解決的問題了,這個流程上的建置比較複雜這一開始就不說嘞
這篇是十分簡單的介紹,就先這樣。之後幾篇會沿著大綱逐一介紹,不過還是需要各位自行實驗看看唷。
# 紀錄 # 技術 
分類:學習

寫扣寫到變金魚腦的人生,只好把想分享的全部紀錄下來。

評論
更多文章
載入中... 沒有更多了