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，缓存结果，提供一个简单函数调用翻译：
立即学习“Java免费学习笔记（深入）”；
- 初始化时设置默认语言（如从
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 文本，改用声明式方式：
<h1 data-i18n="welcome"></h1> <button data-i18n="save"></button>
页面加载后遍历所有带 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 绑定方式简洁——其余都是围绕这三点的细节优化。
