JavaScript国际化核心是分离文案、动态加载语言包、运行时渲染；通过JSON资源文件、单例i18n类封装t()方法与setLocale()切换，支持插值、持久化及URL感知。
JavaScript 中实现国际化（i18n）和多语言切换，核心是“分离文案”+“动态加载/切换语言包”+“运行时渲染”。不依赖框架也能做，但用成熟库更稳、更易维护。
准备多语言资源文件
把不同语言的文案抽成 JSON 对象，按 key 组织，保持结构一致：
zh.json
{ "welcome": "欢迎使用", "save": "保存", "loading": "加载中..." }en.json
立即学习“Java免费学习笔记（深入）”；
{ "welcome": "Welcome", "save": "Save", "loading": "Loading..." }建议按模块或页面拆分（如 common.json、dashboard.json），后期支持按需加载。
封装一个轻量 i18n 工具类
用单例管理当前语言、加载资源、提供翻译方法：
盛世企业网站管理系统1.1.2
下载
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
- 初始化时加载默认语言包（可异步 fetch）
- 提供
t(key, options?)方法获取翻译文本 - 提供
setLocale(lang)切换语言，并触发更新（如重渲染或 dispatch 自定义事件）
示例简版：
class I18n {
constructor() {
this.locale = 'zh';
this.messages = {};
}
async load(locale) {
const res = await fetch(`./locales/${locale}.json`);
this.messages = await res.json();
this.locale = locale;
document.documentElement.lang = locale;
this.emit('change');
}
t(key, replacements = {}) {
let text = this.messages[key] || key;
Object.entries(replacements).forEach(([k, v]) => {
text = text.replace(`{{${k}}}`, v);
});
return text;
}
on(event, cb) { /* 订阅 change 事件 */ }
}在 DOM 中使用翻译文案
避免硬编码文字，改用 data 属性或 JS 注入：
- 静态标签：用
data-i18n="welcome"，启动时遍历替换textContent - 动态内容：调用
i18n.t('save')渲染按钮、提示等 - 支持简单插值：如
i18n.t('hello', { name: 'Alice' })→"Hello, Alice!"
也可配合模板引擎（如 lit-html、Handlebars）或自定义指令提升体验。
处理语言切换与状态同步
切换语言不只是换文案，还要注意：
- 持久化用户选择：存到
localStorage或cookie，下次打开自动恢复 - URL 感知：支持路径前缀（
/zh/home）、查询参数（?lang=en）或 Accept-Language 头自动推断 - 组件响应：若用 React/Vue，让组件监听语言变化并重新渲染；纯 JS 可发自定义事件，由各模块订阅更新
例如：window.addEventListener('i18n-change', () => updateAllLabels())
