JSON在前端国际化中是语言资源容器而非待翻译对象，通过多语言JSON文件按键查值实现本地化，结合动态映射、按需加载、缓存及统一i18n函数调用完成全流程。
JavaScript 中 JSON 数据做前端国际化翻译，核心不是“翻译 JSON”，而是把 JSON 作为语言资源容器来用——它存的是各语言的文本映射，运行时根据用户语言环境查表取值，而不是调 API 实时翻译 JSON 内容本身。
用 JSON 当语言包，不是翻译 JSON
常见误区是试图把一段英文 JSON 数据（比如 {"status": "active"}）直接扔给翻译 API 转成中文。这既低效又不可控。正确做法是：提前准备好结构一致的多语言 JSON 文件，例如：
-
locales/en.json：{"status.active": "Active", "status.closed": "Closed"} -
locales/zh.json：{"status.active": "已启用", "status.closed": "已关闭"}
前端加载对应语言的 JSON，再通过键（如 "status.active"）查出本地化文本。JSON 在这里是“词典”，不是待翻译的原始数据。
动态匹配数据库状态值
当后端返回像 {"status": "active"} 这类固定编码字段时，前端可借助 JSON 映射做语义转换：
立即学习“Java免费学习笔记（深入）”；
- 定义映射关系：
const statusMap = { active: 'status.active', closed: 'status.closed' }; - 取出原始值：
const rawStatus = data.status; // "active" - 查语言包：
t(statusMap[rawStatus]); // t() 是 i18n 函数，返回对应语言的文案
这样既保持了后端数据结构稳定，又让前端展示完全本地化，无需改动接口或重复请求翻译服务。
按需加载 + 缓存语言包
避免一次性加载所有语言 JSON，尤其对多语言站点：
- 只加载当前语言包，例如用
import(`./locales/${lang}.json`)动态导入 - 首次加载后缓存在内存或
localStorage中，下次访问直接复用 - 配合
Intl.DateTimeFormat等原生 API 处理日期、数字等格式，不依赖 JSON
避免硬编码，统一走 i18n 函数
所有界面文本，包括按钮、提示、状态标签，都应通过统一函数获取：
- 不要写：
<span>已启用</span> - 改写为：
<span>{t('status.active')}</span> - 支持插值：
t('welcome.name', { name: '张三' }) → "欢迎，张三！"
这样后期增删语言、调整措辞，只需改 JSON 文件，不碰业务逻辑代码。
