前端技术分享
0%

国际化与本地化

发表于 分类于

在全球化的今天，Web 应用需要支持多语言、多地区的用户。这不仅涉及翻译文本，还包括日期格式、数字、货币、文本方向等。本篇文章介绍国际化（i18n）与本地化（l10n）的基本概念、实现方式和工具链。

基本概念

  • 国际化（Internationalization, i18n）：设计和开发应用以便支持多语言/地区。
  • 本地化（Localization, l10n）：为特定语言/地区翻译文本、调整布局、修复内容。

二者通常交替进行：开发时考虑可替换性，之后由本地化团队提供具体翻译。

文本翻译方法

静态文本

使用 JSON/PO 文件存储翻译，例如：

1
2
3
4
{
  "welcome": "欢迎",
  "logout": "退出登录"
}

在代码中根据当前语言选择对应文本。常见库：

  • i18next
  • Vue I18n
  • react-intl

动态文本与插值

模板中使用占位符：

1
2
3
{
  "greeting": "Hello, {{name}}!"
}

在运行时替换插值，注意翻译时词序可能不同。

日期和数字格式

利用 Intl API：

1
2
3
4
const date = new Date();
new Intl.DateTimeFormat('zh-CN', { dateStyle: 'long' }).format(date);

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(123456.78);

此接口支持时区、日历类型、小数点分隔符等。

方向性与布局

阿拉伯语、希伯来语等从右到左书写（RTL），需要在 HTML 或 CSS 中设置：

1
<html dir="rtl">

CSS 中使用 :dir(rtl) 选择器，也可以通过 logical properties (margin-inline-start 等) 自动适配。

字体与字符集

选择支持目标语言的字体，避免文字替换为豆腐块。对于 CJK 字体，注意文件大小和加载策略。

语言检测与切换

可以通过以下方式检测用户偏好：

  • 浏览器 navigator.language 或 navigator.languages
  • 后端根据 Accept-Language 头部
  • 用户设置保存在 cookies/localStorage

切换语言时，应重新渲染界面并可能重新请求资源。

翻译管理工具

  • Crowdin、Transifex、POEditor 等在线翻译平台。
  • gettext / PO 文件，适用于多种语言。
  • l10n tools：如 babel-plugin-react-intl 等可自动提取字符串。

动态内容与 SEO

对于需要索引的内容，确保每种语言有独立 URL，如 /en/about、/zh/about。使用 <link rel="alternate" hreflang="..."> 告诉搜索引擎。

代码拆分与懒加载

按语言打包，减少初始包体积：

1
import(`./locales/${lang}.json`).then(msgs => { /* ... */ });

使用 Webpack 等构建工具的动态导入特性。

静态站点与国际化

静态生成器如 Next.js、Gatsby 提供 i18n 插件。需要在构建时创建不同语言版本的页面。

翻译质量与文化敏感性

翻译不仅是字面意思，更要考虑语境、文化差异。例如，西方笑话在中国可能不通。建议使用专业翻译，并进行本地测试。

下拉列表与排序

不同语言的排序规则不同，可使用 Intl.Collator：

1
2
const collator = new Intl.Collator('sv', { sensitivity: 'base' });
['apple','Ångström'].sort(collator.compare);

可访问性与 i18n

屏幕阅读器依赖语言属性识别发音，使用 lang 属性：

1
<p lang="en">Hello</p>

另外，提供翻译切换时更新 lang 并可提供 aria-live 提示。

测试国际化

  • 自动化测试绑定特定语言环境，比如使用 jest 设置 navigator.language。
  • 人工审核各语言界面，检查文本截断、布局适配。

常见挑战

  • 文本长度差异：德语通常比英语长，需考虑溢出。
  • 日期格式：MM/DD/YYYY vs DD/MM/YYYY。
  • 时区处理：避免 new Date() 在不同国家得到不同结果。

性能与缓存

将翻译文件gzip压缩并设置缓存头。对于多个语言可使用 CDN 多语言域名或路径。

法律与隐私

某些国家/地区有特定要求，例如 GDPR、CCPA。了解并遵守当地法律，尤其是与 Cookie/存储相关的隐私政策。

进阶主题

  • 双语混合渲染：在同一页面展示多语言内容，如术语表。
  • MT + 人工校对：将机器翻译结果交给译者修订，提高效率。
  • 内容版本控制：翻译版本同步、变更历史。

总结

国际化和本地化是构建全球化应用的关键步骤。技术实现只是基础，文化理解和流程管理同样重要。通过合理选择工具、制定规范和进行严格测试，可以让不同语言的用户都获得一致且愉快的体验。开始时把 i18n 作为项目设计考虑，会避免后期昂贵的重构工作。