前端国际化(i18n)的JS实现方案_javascript技巧

核心实现步骤如下：

1. 定义多语言资源文件使用JSON格式存储不同语言的文本内容，例如：

   const LANGUAGES = { en: { welcome: "Welcome", login: "Login" }, zh: { welcome: "欢迎", login: "登录" }};

   建议拆分为独立文件（如lang/en.json），通过动态导入或<script>标签引入。

2. 检测用户语言偏好

   浏览器语言：通过navigator.language获取，简化判断逻辑：function getBrowserLang() { const lang = navigator.language || 'en'; return lang.startsWith('zh') ? 'zh' : 'en';}

   优先级处理：URL参数（?lang=zh）> localStorage > 浏览器语言：function getCurrentLang() { const urlParam = new URLSearchParams(window.location.search).get('lang'); return urlParam || localStorage.getItem('i18n_lang') || getBrowserLang();}

3. 动态替换页面文本

   标记元素：使用data-i18n属性指定键名：<h1 data-i18n="welcome"></h1><button data-i18n="login"></button>

   翻译函数：遍历标记元素并替换内容：function translate(lang) { const texts = LANGUAGES[lang] || LANGUAGES.en; document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); el.textContent = texts[key] || key; // 显示键名作为回退 }); localStorage.setItem('i18n_lang', lang);}

   初始化：调用translate(getCurrentLang())。

4. 语言切换功能提供按钮或下拉菜单，调用switchLanguage并更新URL（可选）：

   function switchLanguage(lang) { translate(lang); // 可选：更新URL参数（需处理历史记录） const url = new URL(window.location); url.searchParams.set('lang', lang); window.history.pushState({}, '', url);}

优化建议：

• 键名设计：使用命名空间（如header.title）避免冲突。
• 异步加载：大型项目可动态加载语言包：async function loadLanguage(lang) { const response = await fetch(`/lang/${lang}.json`); LANGUAGES[lang] = await response.json(); translate(lang);}
• 占位符支持：扩展翻译函数处理动态内容：// 资源文件中定义： "greeting": "Hello, {name}!"function translate(lang, params = {}) { // ...遍历元素逻辑 if (key.includes('.')) { // 处理嵌套键（如"header.title"） const keys = key.split('.'); let value = texts; keys.forEach(k => value = value?.[k]); el.textContent = value?.replace?.(/{([^}]+)}/g, (_, p) => params[p] || ''); }}

完整示例代码：

方案优势：

• 轻量无依赖：适合静态网站，无需构建工具。
• 可维护性：JSON结构清晰，易于扩展新语言或修改文本。
• 持久化：通过localStorage记住用户选择。

扩展场景：

• 结合后端渲染时，可将语言参数传递给服务端，实现服务端直出对应语言的内容。
• 复杂项目可逐步迁移至i18next等库，保留相似的资源文件结构。