JavaScript国际化核心是分离语言内容与逻辑代码并动态加载翻译资源，通过多语言JSON包、浏览器语言检测、localStorage持久化及t()翻译函数实现无后端的前端i18n，支持响应式语言切换。

JavaScript 实现国际化（i18n）的核心是**分离语言内容与逻辑代码，按用户语言环境动态加载对应翻译资源**。不依赖后端也能在纯前端完成，关键是做好语言包管理、自动检测和运行时替换。

准备多语言 JSON 语言包

为每种语言建一个独立的键值对对象，用统一的 key（推荐英文或语义化 ID），值为对应语言的文案：

• zh.json：{"welcome": "欢迎来到我们的网站", "login": "登录"}
• en.json：{"welcome": "Welcome to our site", "login": "Login"}
• ja.json：{"welcome": "当社サイトへようこそ", "login": "ログイン"}

文件可静态托管，也可通过 API 动态获取，建议按需加载以减少首屏体积。

检测并设置当前语言

优先读取用户浏览器语言（navigator.language 或 navigator.languages[0]），再 fallback 到 localStorage 记住的偏好，最后兜底为默认语言（如 en）：

• 提取主语言码： "zh-CN" → "zh"，"en-US" → "en"
• 检查是否支持该语言（比对预设语言列表 ["zh", "en", "ja"]）
• 将最终确定的语言存入 localStorage.setItem("lang", "zh")，便于下次快速读取

封装 i18n 工具函数

写一个轻量翻译函数，支持嵌套 key 和简单插值（如 t("hello_name", { name: "Alice" })）：

let messages = {};
let currentLang = "en";

export function setLocale(lang) {
  currentLang = lang;
  // 这里可异步加载对应 JSON，然后赋值给 messages
}

export function t(key, params = {}) {
  let text = messages[currentLang]?.[key] || key;
  return Object.keys(params).reduce(
    (str, k) => str.replace(`{${k}}`, params[k]),
    text
  );
}

在页面中使用：

{t("welcome")}

响应式切换语言（无需刷新）

切换语言时重新加载对应语言包，并触发所有已渲染文本更新：

• 给需要翻译的元素加 data-i18n="welcome" 属性
• 用 document.querySelectorAll("[data-i18n]") 批量更新 textContent 或 placeholder
• 若用框架（如 Vue/React），可用指令或 Hook 自动绑定，避免手动遍历

用户点击「中文」按钮后，调用 setLocale("zh")，再执行一次批量刷新即可生效。