javascript国际化是什么_如何实现多语言

JavaScript国际化（i18n）是前端应用根据用户语言环境动态切换界面语言的能力，核心包括语言资源分离（JSON管理）、运行时检测与切换、复数/占位符/格式化支持，推荐使用i18next+原生Intl方案。

JavaScript国际化（i18n）是指让前端应用能根据用户语言环境动态切换界面语言，不依赖后端渲染，核心是把文本内容从代码中抽离、按语言分组管理，并在运行时按需加载或切换。

语言资源分离：用 JSON 管理多语言文案

把不同语言的字符串存成独立的 JSON 文件，比如：
zh.json：{"welcome": "欢迎使用", "save": "保存"}
en.json：{"welcome": "Welcome", "save": "Save"}
这样代码里只写 key（如 t('welcome')），具体显示什么由当前语言包决定。

运行时语言检测与切换

可通过以下方式确定初始语言：

• 读取 navigator.language 或 navigator.languages[0]
• 检查 URL 参数（如 ?lang=ja）
• 读取 localStorage 中用户上次选择的语言

切换语言时，重新加载对应语言包（可预加载，也可动态 fetch），再触发 UI 重渲染（如 React 可用 Context + useEffect；纯 JS 可遍历带 data-i18n 属性的元素并替换文本）。

支持复数、占位符和格式化

基础 key-value 不够用，真实场景需要：

• 占位符：如 "Hello {name}" → t('hello', { name: 'Alice' })
• 复数规则：英文用 count == 1 ? 'item' : 'items'，但阿拉伯语有 6 种复数形式，需按语言规则匹配
• 日期/数字/货币格式：用 Intl.DateTimeFormat、Intl.NumberFormat 等原生 API，它们会自动适配当前 locale

轻量方案推荐：i18next + 原生 Intl

不建议从零手写 i18n 系统。推荐组合：

• i18next：处理语言包加载、key 查找、插值、复数、命名空间等逻辑
• Intl 对象：专注格式化（时间、数字、相对时间、列表等），它由浏览器原生支持，无需额外包
• 搭配 i18next-browser-languagedetector 自动探测语言，i18next-http-backend 加载远程语言文件

简单初始化示例：

i18next
  .use(LanguageDetector)
  .use(Backend)
  .init({
    fallbackLng: 'en',
    lng: 'zh',
    interpolation: { escapeValue: false }
  });