JavaScript国际化核心是分离语言内容与逻辑代码、动态加载语言包并实时更新界面文本；采用JSON管理文案、按需加载缓存、data-i18n标记替换、Intl处理格式化、localStorage持久化偏好并响应系统语言变化。
JavaScript 实现国际化（i18n）的核心是**分离语言内容与逻辑代码，按用户偏好动态加载对应语言包，并实时更新界面文本**。关键不在于用多复杂的库，而在于结构清晰、切换无刷新、状态可保持。
用 JSON 语言包管理翻译内容
把每种语言的文案单独存为 JSON 文件，结构扁平易维护：
// locales/zh.json
{
"welcome": "欢迎来到我们的网站",
"login": "登录",
"settings": "设置"
}
// locales/en.json
{
"welcome": "Welcome to our website",
"login": "Login",
"settings": "Settings"
}
- 键名统一用小写+下划线或驼峰，避免空格和特殊字符
- 嵌套结构慎用（如
{"button": {"submit": "提交"}}），深层嵌套会增加调用成本 - 日期、数字、复数等需格式化的内容，暂不放这里，交给专门的 i18n 库处理
运行时动态加载 + 缓存语言包
不用一次性加载所有语言，按需 fetch 并缓存，减少首屏体积：
- 首次访问检测
navigator.language或读取 localStorage 中保存的用户选择 - 用
import()动态导入或fetch().then(r => r.json())加载对应 JSON - 加载后存入内存对象（如
const messages = {}），后续切换直接读取，不重复请求
统一文本替换机制（无框架也够用）
给 HTML 元素加 data-i18n 属性标记需要翻译的 key：
立即学习“Java免费学习笔记（深入）”；
<h1 data-i18n="welcome"></h1> <button data-i18n="login"></button>
再写一个简单函数批量替换：
function applyLocale(lang) {
fetch(`/locales/${lang}.json`)
.then(r => r.json())
.then(translations => {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.dataset.i18n;
if (translations[key] !== undefined) {
el.textContent = translations[key];
}
});
});
}
- 支持
data-i18n-attr扩展到属性（如placeholder、title） - 表单控件、SVG 文本、动态插入的 DOM 需额外调用一次该函数
- 配合
IntlAPI 处理时间/货币（new Intl.DateTimeFormat('zh').format(new Date())）
记住用户选择并响应系统语言变化
切换语言不只是改页面，还要持久化偏好并兼顾系统行为：
- 切换时写入
localStorage.setItem('preferred-lang', 'en') - 监听
languagechange事件（部分浏览器支持），或在页面初始化时比对navigator.language与当前语言，自动提示切换 - URL 中带语言参数（如
/en/settings）更利于 SEO 和分享，可用history.pushState同步
