JSON 与国际化:构建多语言应用

jsoni18nlocalizationtranslations

JSON 是现代 Web 应用中管理翻译的最流行格式。本指南展示如何有效地构建和使用 i18n JSON 文件。

基本翻译结构

{

"home": {

"title": "欢迎",

"subtitle": "构建精彩内容",

"cta": "开始使用"

},

"nav": {

"about": "关于",

"contact": "联系我们",

"blog": "博客"

}

}

嵌套与扁平结构

嵌套(更易组织):

{

"user": {

"profile": {

"title": "我的资料",

"edit": "编辑资料"

}

}

}

带点号的扁平键(更适合翻译人员):

{

"user.profile.title": "我的资料",

"user.profile.edit": "编辑资料"

}

复数处理

{

"items": {

"zero": "没有项目",

"one": "1 个项目",

"other": "{count} 个项目"

}

}

插值

插入动态值:

{

"welcome": "你好,{name}!",

"lastSeen": "{days} 天前最后访问",

"cartTotal": "总计:{amount}"

}

组织翻译文件

messages/

├── en/

│ ├── common.json — 共享字符串

│ ├── home.json — 首页

│ └── errors.json — 错误信息

└── zh/

├── common.json

├── home.json

└── errors.json

热门 i18n 库

  • next-intl — Next.js 国际化(本站正在使用!)
  • react-i18next — React 生态标准
  • vue-i18n — Vue.js 国际化
  • i18next — 框架无关,通用方案
  • 最佳实践

  • 使用键名而非英文文本"greeting" 而非 "Hello"
  • 保持翻译同步 — 所有语言使用相同的键
  • 回退语言 — 始终有默认语言
  • 意译而非直译 — 翻译含义,不是逐字翻译
  • 使用命名空间 — 按功能或页面分组
  • 本站正是使用 JSON 配合 next-intl 实现双语支持(英文和中文)!

    相关工具