应用程序 i18n 解决方案

i18n 解决方案，多是采用 ICU 实现，搞起来有点繁琐。

一个翻译字段包含三部分信息 ：

1. id，i18n 库和应用程序用
2. 描述，通用语言，一般为英文；翻译公司/人员用
3. 本地化语言，默认语言，业务用户用

分三步解决这个字段的翻译：

1. 定义/声明/标记，开发人员定义好需要翻译的文本字段，包含上面的三部分信息
2. 翻译模板，通过 i18n 库，将声明提取转换成翻译模板文件，发给翻译公司/人员，进行翻译
3. 翻译文件，通过 i18n 库，将翻译模板转换成最终本地化文件，应用程序中使用

另外，一个翻译字段是可以模板化的，如 ICU 风格：插值 (Interpolation)、格式化 (Formatting) …

以 Web 应用程序简要说明：

// 翻译文件 zh/translations.json
{
  "Welcome, {name}!": "欢迎, {name}!",
  "{itemsCount, plural,  =0 {There is no item.} one {There is # item.} other {There are # items.}}": "{itemsCount1, plural,  =0 {这里什么都没有！} one {这里有 # 个。} other {这里有多达 # 个。}}",
}

/* react-i18next */ 
import { useTranslation, withTranslation } from 'react-i18next';
import { Trans, Plural, Select } from 'react-i18next/icu.macro';

// View
const [name , setName] = useState('Xiang');
const [itemsCount, setItemsCount] = useState(0);

<Trans>Welcome, { name }!</Trans>

<Plural
  count={itemsCount}
  $0="There is no item."
  one="There is # item."
  other="There are # items."
/>

---

• Language family - Wikipedia
• IETF language tag - Wikipedia
• BCP 47 - Tags for Identifying Languages
• RFC 4646 - Tags for Identifying Languages
• Language tags in HTML and XML
• Localizing with ICU
• Angular - Localizing your app
• Format.JS - react-intl, or react-i18next
• Vue I18n
• Internationalization support | Node.js v14.7.0 Documentation
• full-icu - npm

China → cn

Chinese → zh

zh-Hant (Chinese written using the Traditional Chinese script)
zh-Hans (Chinese written using the Simplified Chinese script)
zh-cmn-Hans-CN (Chinese, Mandarin, Simplified script, as used in China)