为什么要从“Hello World”开始学本地化

很多人看到“本地化”就觉得复杂,其实从最简单的输出入手能够把核心问题一条条拆解出来:文本如何抽取、如何替换占位、复数规则怎么处理、还有文本方向和格式化等。这些是所有项目都会遇到的问题,先把 Hello World 问题做到位,后面遇到复杂场景才能有章可循。
先理解两个概念:i18n 与 L10n
- i18n(Internationalization) 是工程层面的准备:代码中不硬编码字符串、支持占位、使用资源文件、支持多种格式化器。
- L10n(Localization) 是内容层面的工作:翻译、文化适配、时区/货币、图片与排版调整。
一步步把 Hello World 做成本地化
1. 起点:不要把文本写死在代码里
示例(坏例子):
console.log("Hello World");
这段代码对单语言足够,但不利于翻译。改成从资源文件读取才是正确方向。
2. 资源文件的组织
常见做法是按语言建立文件,例如:
- locales/en.json
- locales/zh-CN.json
- locales/ar.json(右到左)
一个简单的 en.json:
{
"greeting": "Hello World"
}
中文文件:
{
"greeting": "你好,世界"
}
3. 占位符与参数化
真实应用常常要插入变量,比如用户名。约定占位符格式(如 ICU MessageFormat)可以统一处理:
{
"welcome": "Hello, {name}!"
}
ICU 的一个优势是支持复数和条件表达式:
{
"apples": "{count, plural, =0 {No apples} one {# apple} other {# apples}}"
}
4. 复数规则不可忽视
不同语言的复数规则差异巨大:英语通常 one/other,但俄语或阿拉伯语有更多类别。推荐使用支持 ICU 的库(例如 ICU MessageFormat、i18next with i18next-icu、FormatJS)。
5. 日期、时间与数字格式化
不要通过翻译文本手动拼接日期/数字,应该使用标准 API(Intl 在现代 JS 中)或平台自带的 locale-aware 格式化器:
new Intl.DateTimeFormat('fr-FR').format(new Date())
注意:时区与本地化是独立维度,决定显示时应区分用户时区与内容时区。
6. 右到左(RTL)语言支持
- 使用正确的 dir 属性:<html lang=”ar” dir=”rtl”>(或在单页 App 中动态切换)
- UI 组件需支持镜像布局(padding/margin/float 等)
- 测试文字、图标方向、以及混合 LTR/RTL 的场景(例如英文单词嵌入阿拉伯语句子)
示例:在三大平台实现 Hello World 本地化
Web(使用 i18next)
// 初始化
import i18next from 'i18next';
i18next.init({
lng: 'en',
resources: {
en: { translation: { greeting: "Hello World" } },
'zh-CN': { translation: { greeting: "你好,世界" } }
}
});
// 使用
console.log(i18next.t('greeting'));
Android(strings.xml)
<string name="greeting">Hello World</string>
<string name="greeting">你好,世界</string>
iOS(Localizable.strings)
// en.lproj/Localizable.strings
"greeting" = "Hello World";
// zh-Hans.lproj/Localizable.strings
"greeting" = "你好,世界";
编码、字体与字符集
务必统一使用 UTF-8。某些老系统或数据库字段可能使用其它编码,迁移时需要特别注意字符丢失与乱码问题。还有一点:不同语言对字体的支持差异很大,尤其是 CJK 与阿拉伯、印地语等,上线前要验证界面字体是否可显示全部字符。
质量保证与测试流程(实战清单)
- 打基础:提取所有可翻译字符串,生成一份 master resource。
- 伪本地化(pseudo-localization):自动生成带有边界字符的翻译,暴露长文本、占位、编码问题。
- 语义测试:检查翻译是否保留语境与品牌语气(交给本地译员或语言专家)。
- 冒烟测试:切换语言逐页检查界面与功能。
- 自动化测试:对关键路径做语言覆盖单元/端到端测试。
- 上线前检查表(见下表)
| 检查项 |
目的 |
| 资源完整性 |
所有键在目标语言存在且未误删 |
| 占位匹配 |
参数化字符串占位与代码中使用一致 |
| 伪本地化通过 |
发现长文本或方向问题 |
| 人工校对完成 |
翻译质量与品牌语气一致 |
机器翻译(AI)与人工校对结合:实用流程
现阶段常见且高性价比的做法是先用机器翻译(MT)生成初稿,然后由本地译员做人工后编辑(PE)。优势与要点:
- 速度快、成本低:MT 适合大量说明性文本或电商详情。
- 人工校对不可省:品牌文案、Slogan、界面上下文需要人工润色与文化适配。
- 翻译记忆(TM)+术语库:保证术语一致性,节约成本与时间。
常见陷阱与解决方法
- 键重名引发误翻:使用有上下文的命名规则(screenName.element.action)。
- 忽略复数规则:使用 ICU 或平台本地工具处理复数。
- 布局溢出:预留更长文本空间,或使用可伸缩组件。
- 忘记文化差异:不要直接翻译单位、图片或配色,必要时做文化适配。
- 在线翻译覆盖人工校对:在持续交付中把人工校对环节纳入关键发布流程。
可交付物与时间估算(简表)
| 任务 |
典型人力/天 |
说明 |
| 字符串抽取与资源组织 |
1-3 |
取决于项目规模,自动化工具能加速 |
| 机器翻译 + 人工后编辑(每千字) |
1-2 |
视语言对与领域专业度而定 |
| 伪本地化与测试 |
1 |
检查溢出与布局问题 |
| 上线前 QA |
1-3 |
包含译审与一轮修复 |
从 Hello World 到可扩展的本地化系统:架构建议
- 集中管理:使用翻译管理平台(TMS)或 Git + 自动化脚本同步资源。
- 版本控制:资源文件应纳入版本管理,发布时记录翻译版本。
- CI 集成:在构建流程中加入伪本地化和翻译完整性检查作为门控。
- 监控与回滚:上线后监控错误率、UI 报告,对翻译引起的问题能快速回滚。
小贴士(工程师常犯但容易忽视的细节)
- 不要把复数逻辑写死在模板里,留给消息格式器处理。
- 对带 HTML 的文案使用安全的插值机制,避免 XSS。
- 每个翻译条目最好带简短上下文注释,帮助译员理解用途。
- 把可复用短语抽成单条,避免在不同地方重复翻译导致不一致。
快速自检清单(发布前 10 分钟可做)
- 所有语言切换正常,关键页面能完整渲染。
- 关键路径(登录、购买、表单)在每种语言通过端到端测试。
- 伪本地化未出现乱码或布局崩溃。
- 翻译记忆库与术语表已更新并同步到 TMS。
- 人工校对的反馈已合并到资源文件。
好了,按上面的步骤从 Hello World 起步,慢慢把流程打磨成常规作业。实践中你会发现某些环节可以自动化,某些环节必须人工把关,这两者结合起来,既能保证效率也能保证品牌和用户体验——然后就像修一辆老车那样,一边调整一边开着上路,改得更顺手了自然就好了。