JavaScript中如何实现多语言？

在Web应用开发中，面向不同地区的用户时，多语言支持是提升用户体验的重要功能。很多开发者会疑惑JavaScript中如何实现多语言，其实实现逻辑并不复杂，核心就是管理不同语言的文本资源，再根据用户选择动态替换页面内容。下面会介绍两种常用的实现方案，适配不同规模的项目需求。

方案一：轻量对象映射实现多语言

如果项目规模较小，语言种类不多，不需要复杂的格式化能力，可以用最简单的对象映射方案，直接把不同语言的文本按key对应存储，切换时读取对应对象的属性即可。

1. 准备语言资源

先把所有需要展示的文本按语言分类，存储到对应的对象中，key保持一致，方便统一调用。

// 定义语言资源对象
const langResources = {
  zh: {
    welcome: '欢迎来到我的应用',
    login: '登录',
    register: '注册',
    greeting: '你好，{name}'
  },
  en: {
    welcome: 'Welcome to my app',
    login: 'Login',
    register: 'Register',
    greeting: 'Hello, {name}'
  }
};

2. 实现语言切换逻辑

需要记录当前选择的语言，同时提供切换方法，切换后重新渲染页面文本。

// 默认语言设为中文
let currentLang = 'zh';

// 获取当前语言的文本
function t(key, params = {}) {
  let text = langResources[currentLang][key] || key;
  // 处理带占位符的文本，比如{name}
  Object.keys(params).forEach(paramKey => {
    text = text.replace(`{${paramKey}}`, params[paramKey]);
  });
  return text;
}

// 切换语言的方法
function switchLang(lang) {
  if (langResources[lang]) {
    currentLang = lang;
    // 重新渲染页面文本
    renderPageText();
    // 可以把用户选择存到localStorage，下次访问保持语言
    localStorage.setItem('user_lang', lang);
  }
}

// 渲染页面文本的方法
function renderPageText() {
  document.getElementById('welcome').textContent = t('welcome');
  document.getElementById('login-btn').textContent = t('login');
  document.getElementById('register-btn').textContent = t('register');
  // 带参数的文本示例
  document.getElementById('greeting').textContent = t('greeting', { name: '张三' });
}

// 页面加载时读取用户之前保存的语言
window.addEventListener('DOMContentLoaded', () => {
  const savedLang = localStorage.getItem('user_lang');
  if (savedLang && langResources[savedLang]) {
    currentLang = savedLang;
  }
  renderPageText();
});

3. 页面基础结构

页面中需要给需要切换文本的元素加上对应的id，方便JS获取并修改内容。

<div>
  <span id="welcome"></span>
  <p id="greeting"></p>
  <button id="login-btn"></button>
  <button id="register-btn"></button>
  <select onchange="switchLang(this.value)">
    <option value="zh">中文</option>
    <option value="en">English</option>
  </select>
</div>

方案二：使用i18n标准库实现多语言

如果项目规模较大，需要处理复数、日期时间格式化、货币格式化等复杂场景，推荐使用成熟的i18n库，比如vue-i18n（Vue项目）、react-i18next（React项目）或者原生的i18next库，这里以原生i18next为例介绍用法。

1. 安装并初始化i18next

先通过npm安装i18next，或者直接在页面引入CDN资源，然后初始化配置语言资源和默认语言。

import i18next from 'i18next';

// 初始化i18next
i18next.init({
  lng: localStorage.getItem('user_lang') || 'zh', // 默认语言
  fallbackLng: 'zh', // 找不到对应文本时的 fallback 语言
  resources: {
    zh: {
      translation: {
        welcome: '欢迎来到我的应用',
        login: '登录',
        register: '注册',
        greeting: '你好，{{name}}',
        item: '你有{{count}}个物品',
        item_plural: '你有{{count}}个物品' // 处理复数场景
      }
    },
    en: {
      translation: {
        welcome: 'Welcome to my app',
        login: 'Login',
        register: 'Register',
        greeting: 'Hello, {{name}}',
        item: 'You have {{count}} item',
        item_plural: 'You have {{count}} items'
      }
    }
  }
}, (err, t) => {
  // 初始化完成后渲染页面
  if (!err) {
    renderPageText();
  }
});

2. 使用i18next获取文本

i18next提供了统一的t方法获取对应语言的文本，支持参数、复数等复杂处理。

// 获取普通文本
console.log(i18next.t('welcome')); // 输出当前语言对应的欢迎文本

// 带参数的文本
console.log(i18next.t('greeting', { name: 'John' }));

// 复数场景处理
console.log(i18next.t('item', { count: 1 })); // 输出 You have 1 item
console.log(i18next.t('item', { count: 5 })); // 输出 You have 5 items

// 切换语言
function switchLang(lang) {
  i18next.changeLanguage(lang, () => {
    renderPageText();
    localStorage.setItem('user_lang', lang);
  });
}

// 渲染页面文本
function renderPageText() {
  document.getElementById('welcome').textContent = i18next.t('welcome');
  document.getElementById('login-btn').textContent = i18next.t('login');
  document.getElementById('register-btn').textContent = i18next.t('register');
  document.getElementById('greeting').textContent = i18next.t('greeting', { name: '张三' });
  document.getElementById('item-count').textContent = i18next.t('item', { count: 3 });
}

两种方案的选择建议

可以根据项目实际情况选择对应的方案：

• 小型项目、语言种类少、没有复杂格式化需求，优先选轻量对象映射方案，无额外依赖，实现简单
• 中大型项目、需要支持复数、日期货币格式化、多语言资源拆分加载，优先选i18n标准库方案，功能完善，扩展性强

另外需要注意，如果多语言资源较多，建议把不同语言的资源拆分到单独的JSON文件中，切换语言时动态加载，避免初始包体积过大。同时可以把用户选择的语言存到localStorage或者cookie中，下次用户访问时自动应用之前选择的语言，提升使用体验。

JavaScript多语言国际化i18n语言切换修改时间：2026-05-29 22:46:20