JavaScript国际化核心是分离语言内容与逻辑、按需加载语言包、动态切换渲染；通过JSON管理多语言文案，fetch加载，t()函数翻译，data-i18n声明式绑定，localStorage持久化语言选择。

JavaScript 实现国际化（i18n）多语言支持，核心是**分离语言内容与逻辑代码、按需加载对应语言包、动态切换并渲染文本**。不依赖框架时，用轻量方案就能满足多数场景。

语言包按键值组织，JSON 文件管理

把每种语言的文案存为独立 JSON 文件，结构扁平清晰，方便维护和翻译协作：

// locales/zh.json
{
  "welcome": "欢迎使用",
  "settings": "设置",
  "save": "保存"
}

// locales/en.json
{
  "welcome": "Welcome",
  "settings": "Settings",
  "save": "Save"
}

键名统一用英文小写+下划线，避免空格或特殊字符；值为对应语言的翻译文本。

运行时加载语言包 + 全局 i18n 函数

用 fetch 动态加载当前语言的 JSON，缓存结果，提供一个简单函数调用翻译：

• 初始化时设置默认语言（如从 navigator.language 或 localStorage 读取）
• 首次调用 t('welcome') 时自动加载对应语言包，后续直接查表
• 支持嵌套键（如 "form.submit.label"），用点号分隔，增强可扩展性

示例实现片段：

let currentLocale = 'zh';
let messages = {};

async function loadLocale(lang) {
  if (messages[lang]) return;
  const res = await fetch(`/locales/${lang}.json`);
  messages[lang] = await res.json();
}

function t(key, options = {}) {
  const keys = key.split('.');
  let val = messages[currentLocale];
  for (const k of keys) {
    if (val && typeof val === 'object') val = val[k];
    else break;
  }
  return val || key;
}

HTML 中标记可翻译文本，用 data-i18n 属性驱动

避免在 JS 里拼接 DOM 文本，改用声明式方式：

页面加载后遍历所有带 data-i18n 的元素，用 t() 替换其 textContent 或 placeholder 等属性：

• 支持 data-i18n-attr 指定目标属性（如 placeholder、title）
• 切换语言时重新执行该过程，无需重写整个页面
• 配合 MutationObserver 可自动处理动态插入的节点

支持语言切换与持久化

用户点击切换语言时，更新 currentLocale，重新加载语言包，再刷新界面文本：

• 把选中语言存入 localStorage，下次访问自动恢复
• 切换前可加 loading 状态，避免文案闪动（例如先隐藏再显示）
• URL 支持路径前缀（如 /en/settings）时，可结合 History API 同步路由

简单触发示例：

document.getElementById('lang-en').onclick = () => {
  currentLocale = 'en';
  localStorage.setItem('lang', 'en');
  loadLocale('en').then(() => renderI18n());
};

基本上就这些。不需要引入大型库，几十行代码就能搭出可靠、易维护的多语言基础。关键在语言包结构清晰、加载时机合理、DOM 绑定方式简洁——其余都是围绕这三点的细节优化。