答案：通过定义多语言JSON文件并创建支持动态加载、语言切换和文本插值的I18n类，结合浏览器语言自动检测，实现轻量级JavaScript国际化方案，便于维护与扩展。
实现一个 JavaScript 的国际化（i18n）方案，核心是让应用支持多语言切换，并能根据用户环境动态加载对应的语言文本。以下是一个实用、可扩展的实现思路。
定义语言资源文件
将每种语言的文本内容组织成结构化的 JSON 文件，便于维护和扩展。
例如：locales/zh-CN.json
{
"greeting": "你好",
"welcome": "欢迎使用我们的应用"
}
locales/en-US.json
立即学习“Java免费学习笔记（深入）”；
{
"greeting": "Hello",
"welcome": "Welcome to our app"
}
创建 i18n 核心模块
封装一个简单的 i18n 实例，负责加载语言包、切换语言、格式化文本。
示例代码：
class I18n {
constructor() {
this.translations = {};
this.currentLang = 'zh-CN';
}
async load(lang) {
if (this.translations[lang]) {
this.currentLang = lang;
return;
}
try {
const response = await fetch(`/locales/${lang}.json`);
const messages = await response.json();
this.translations[lang] = messages;
this.currentLang = lang;
} catch (error) {
console.error(`Failed to load language: ${lang}`, error);
}
}
t(key, params) {
let text = this.translations[this.currentLang]?.[key] || key;
// 支持简单插值：如 {name}
if (params) {
Object.keys(params).forEach(param => {
text = text.replace(new RegExp(`{${param}}`, 'g'), params[param]);
});
}
return text;
}
}
// 全局实例
const i18n = new I18n();
export default i18n;
在页面中使用
引入 i18n 模块，在 DOM 渲染或事件中调用翻译方法。
示例：
import i18n from './i18n';
async function render() {
await i18n.load('en-US'); // 或根据浏览器语言自动判断
document.getElementById('greeting').textContent = i18n.t('greeting');
document.getElementById('welcome').textContent = i18n.t('welcome', { name: 'User' });
}
render();
自动检测用户语言
利用浏览器的 navigator.language 自动选择语言。
function getBrowserLang() {
const lang = navigator.language || 'zh-CN';
return lang.startsWith('en') ? 'en-US' : 'zh-CN';
}
初始化时调用：i18n.load(getBrowserLang())。
基本上就这些。一个轻量的 i18n 方案不需要复杂工具也能满足多数需求，关键是结构清晰、易于维护。如果项目变大，可以考虑集成 formatjs 或 i18next 等成熟库。不复杂但容易忽略的是语言包缓存和异步加载的错误处理。
