前端国际化实战：基于 i18next 的多语言方案

正确的做法

// 正确的做法：使用专业的国际化库
// 安装依赖：npm install i18next react-i18next
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import zh from './locales/zh.json';
import en from './locales/en.json';

// 配置 i18next
i18n
  .use(initReactI18next)
  .init({
    resources: {
      zh: { translation: zh },
      en: { translation: en }
    },
    lng: 'zh', // 默认语言
    fallbackLng: 'en', // 回退语言
    interpolation: {
      escapeValue: false // React 已经默认转义
    }
  });

export default i18n;

// locales/zh.json
/*
{
  "welcome": "欢迎来到我的网站",
  "nav": {
    "home": "首页",
    "about": "关于我们",
    "contact": "联系我们"
  },
  "greeting": "你好，{{name}}！",
  "count": "你有 {{count}} 条消息"
}
*/

// locales/en.json
/*
{
  "welcome": "Welcome to my website",
  "nav": {
    "home": "Home",
    "about": "About Us",
    "contact": "Contact Us"
  },
  "greeting": "Hello, {{name}}!",
  "count": "You have {{count}} messages"
}
*/

// 正确的做法：在组件中使用
import React from 'react';
import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation();
  return (
    <div className="header">
      <h1>{t('welcome')}</h1>
      <nav>
        <a href="/">{t('nav.home')}</a>
        <a href="/about">{t('nav.about')}</a>
        <a href="/contact">{t('nav.contact')}</a>
      </nav>
    </div>
  );
}

function Greeting({ name }) {
  const { t } = useTranslation();
  return (
    <div>
      {/* 带参数的翻译 */}
      <p>{t('greeting', { name })}</p>
    </div>
  );
}

function MessageCount({ count }) {
  const { t } = useTranslation();
  return (
    <div>
      {/* 复数形式 */}
      <p>{t('count', { count })}</p>
    </div>
  );
}

// 正确的做法：语言切换组件
function LanguageSwitcher() {
  const { i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div className="language-switcher">
      <button onClick={() => changeLanguage('zh')}>中文</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

核心建议

这才是前端国际化！不是简单地手动切换字符串，而是使用专业的国际化库，统一管理翻译资源。

记住，国际化不仅仅是翻译文本，还包括日期、时间、数字、货币等格式的本地化，以及 RTL（从右到左）语言的支持。

别再觉得国际化麻烦了，它是你网站走向世界的必备技能！

总结

• 使用专业库：如 i18next、react-intl 等
• 统一管理翻译资源：将翻译文本放在单独的 JSON 文件中
• 支持参数化翻译：处理带变量的文本
• 支持复数形式：根据数量变化显示不同的文本
• 自动检测语言：根据用户浏览器设置自动切换语言
• 本地化格式：处理日期、时间、数字等的本地化
• RTL 支持：支持从右到左的语言如阿拉伯语
• 懒加载翻译：按需加载翻译资源，减少包大小

国际化，让你的网站更具全球视野！