手帐 Blog

主题

17 · 国际化 i18n ​

目标：文案抽离；知道复数 / 日期 / 数字本地化；有 RTL 意识；能选 vue-i18n / react-i18next 一类方案起步。

1. 背景与目标 ​

产品未出海也可以练 i18n：消灭硬编码文案，为多语言与文案评审打底。

2. 核心概念 ​

text
代码里用 key → 语言包 JSON/YAML → 运行时按 locale 取值
日期/数字/货币 → Intl 或库（勿手拼）
复数 → 规则按语言不同（one/other/…）
RTL → 布局镜像，不只是翻译
坑点说明
拼接句子"共" + n + "条" 换英文语序就挂；用插值模板
图内文字难翻译；尽量 DOM 文案
键名随意按页面/模块前缀：note.delete.title

3. 最小实践 ​

json
// zh-CN.json
{
  "note": {
    "empty": "暂无手帐",
    "count": "共 {n} 条"
  }
}
js
// 伪代码：vue-i18n / i18next 类似
t('note.count', { n: 3 })

日期：

js
new Intl.DateTimeFormat('zh-CN', {
  dateStyle: 'medium',
  timeStyle: 'short',
}).format(new Date())

列出一页硬编码中文 → 抽 10 个 key → 切 en 能换语言（即使英文是机翻）。

4. 踩坑与取舍 ​

  1. 过早全站 i18n：无需求时先规范「文案常量文件」即可。
  2. 翻译者改 key：key 稳定，改 value。
  3. 忽略长度：德文往往更长，按钮别写死宽度。
  4. RTL 只靠 dir=rtl：图标方向、抽屉开合也要测。

5. 验收清单 ​

  • [ ] 一页文案 key 化，可切换两种 locale
  • [ ] 日期/数字至少一处用 Intl
  • [ ] 知道复数与字符串拼接的问题
  • [ ] （可选）读过目标库官方 Plural 文档一节

6. 下一步 ​

→ 18 · PWA 与 Service Worker

参考链接 ​