17370845950

JavaScript国际化核心是分离文案、动态加载语言包、运行时渲染；通过JSON资源文件、单例i18n类封装t()方法与setLocale()切换，支持插值、持久化及URL感知。

JavaScript 中实现国际化（i18n）和多语言切换，核心是“分离文案”+“动态加载/切换语言包”+“运行时渲染”。不依赖框架也能做，但用成熟库更稳、更易维护。

准备多语言资源文件

把不同语言的文案抽成 JSON 对象，按 key 组织，保持结构一致：

zh.json

{ "welcome": "欢迎使用", "save": "保存", "loading": "加载中..." }

en.json

{ "welcome": "Welcome", "save": "Save", "loading": "Loading..." }

建议按模块或页面拆分（如 common.json、dashboard.json），后期支持按需加载。

封装一个轻量 i18n 工具类

用单例管理当前语言、加载资源、提供翻译方法：

• 初始化时加载默认语言包（可异步 fetch）
• 提供 t(key, options?) 方法获取翻译文本
• 提供 setLocale(lang) 切换语言，并触发更新（如重渲染或 dispatch 自定义事件）

示例简版：

class I18n {
  constructor() {
    this.locale = 'zh';
    this.messages = {};
  }
  async load(locale) {
    const res = await fetch(`./locales/${locale}.json`);
    this.messages = await res.json();
    this.locale = locale;
    document.documentElement.lang = locale;
    this.emit('change');
  }
  t(key, replacements = {}) {
    let text = this.messages[key] || key;
    Object.entries(replacements).forEach(([k, v]) => {
      text = text.replace(`{{${k}}}`, v);
    });
    return text;
  }
  on(event, cb) { /* 订阅 change 事件 */ }
}

在 DOM 中使用翻译文案

避免硬编码文字，改用 data 属性或 JS 注入：

• 静态标签：用 data-i18n="welcome"，启动时遍历替换 textContent
• 动态内容：调用 i18n.t('save') 渲染按钮、提示等
• 支持简单插值：如 i18n.t('hello', { name: 'Alice' }) → "Hello, Alice!"

也可配合模板引擎（如 lit-html、Handlebars）或自定义指令提升体验。

处理语言切换与状态同步

切换语言不只是换文案，还要注意：

• 持久化用户选择：存到 localStorage 或 cookie，下次打开自动恢复
• URL 感知：支持路径前缀（/zh/home）、查询参数（?lang=en）或 Accept-Language 头自动推断
• 组件响应：若用 React/Vue，让组件监听语言变化并重新渲染；纯 JS 可发自定义事件，由各模块订阅更新

例如：window.addEventListener('i18n-change', () => updateAllLabels())