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）：
立即学习“Java免费学习笔记（深入）”；
- 提取主语言码：
"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
);
}
在页面中使用：<h1>{t("welcome")}</h1> 或 button.textContent = t("login")。
响应式切换语言（无需刷新）
切换语言时重新加载对应语言包，并触发所有已渲染文本更新：
- 给需要翻译的元素加
data-i18n="welcome"属性 - 用
document.querySelectorAll("[data-i18n]")批量更新textContent或placeholder - 若用框架（如 Vue/React），可用指令或 Hook 自动绑定，避免手动遍历
用户点击「中文」按钮后，调用 setLocale("zh")，再执行一次批量刷新即可生效。
