JavaScript国际化核心是分离语言资源、动态加载文案、统一管理语言状态；推荐i18next库，也支持手动实现轻量切换，并需同步HTML lang属性及CSS适配，大项目宜按需加载语言包。
JavaScript 实现国际化（i18n）和多语言切换，核心是**分离语言资源、动态加载对应文案、统一管理语言状态**。不依赖框架也能做，但推荐用成熟方案降低维护成本。
使用 i18next（最常用、生态完善）
i18next 是目前最主流的 JS 国际化库，支持浏览器、Node.js、React、Vue 等，配置灵活，插件丰富。
- 安装：
npm install i18next i18next-browser-languagedetector - 基础初始化（浏览器环境）：
// i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(LanguageDetector)
.init({
fallbackLng: 'en',
debug: true,
resources: {
en: { translation: { welcome: 'Welcome!' } },
zh: { translation: { welcome: '欢迎！' } }
}
});
// 切换语言
function changeLang(lang) {
i18n.changeLanguage(lang);
}
// 使用文案
document.getElementById('welcome').textContent = i18n.t('welcome');
手动实现轻量级多语言切换（适合小项目）
若不想引入第三方库，可自己维护语言包对象 + 一个切换函数。
- 定义语言资源（JSON 结构清晰）：
const locales = {
en: {
greeting: 'Hello',
submit: 'Submit'
},
zh: {
greeting: '你好',
submit: '提交'
}
};
- 全局语言状态与切换逻辑：
let currentLang = 'zh'; // 默认中文
function setLang(lang) {
if (locales[lang]) {
currentLang = lang;
localStora
ge.setItem('preferredLang', lang); // 持久化用户选择
}
}
function t(key) {
return locales[currentLang]?.[key] || locales.en[key] || key;
}
// 页面中使用：
document.querySelector('#greeting').textContent = t('greeting');
结合 HTML lang 属性与 CSS 适配
语言切换不只是文字，还涉及排版（如 RTL 阿拉伯语）、字体、日期格式等。建议同步更新 ：
- 切换时设置：
document.documentElement.lang = 'zh'; - 利用 CSS 的
:lang()伪类做样式微调：
:lang(zh) .name { font-family: "PingFang SC", sans-serif; }
:lang(ar) { direction: rtl; text-align: right; }
进阶：按需加载语言包（避免打包体积过大）
资源较多时，不要一次性把所有语言打包进主 JS。可用动态 import() 加载：
async function loadLang(lang) {
try {
const mod = await import(`./locales/${lang}.js`);
i18n.addResourceBundle(lang, 'translation', mod.default);
i18n.changeLanguage(lang);
} catch (e) {
console.error('Failed to load language:', lang);
}
}
对应每个语言一个模块：locales/zh.js 导出纯对象，Webpack/Vite 会自动代码分割。
