前端国际化开发实践：基于 i18next

前端国际化开发实践

常见误区

前端国际化并非大公司的专属需求。常见误区包括：

• 认为只面向国内用户无需国际化，导致业务拓展海外时临时抱佛脚。
• 直接硬编码中文字符串，后续支持多语言时维护成本极高。
• 依赖机器翻译，导致翻译质量差，影响用户体验。

国际化是现代前端开发的标配，而非可选功能。

国际化价值

• 全球用户覆盖：吸引来自不同国家和地区的用户。
• 业务拓展：为未来的海外业务做准备。
• 用户体验：让用户使用自己熟悉的语言。
• 品牌形象：展现专业、全球化的品牌形象。

错误示例

硬编码字符串会导致维护困难：

// 反面教材：硬编码字符串
function Header() {
  return (
    <div className="header">
      <h1>欢迎来到我的网站</h1>
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于我们</a>
        <a href="/contact">联系我们</a>
      </nav>
    </div>
  );
}

// 反面教材：手动切换语言
function App() {
  const [language, setLanguage] = useState('zh');
  const getText = (key) => {
    const texts = {
      zh: { welcome: '欢迎', about: '关于我们', contact: '联系我们' },
      en: { welcome: 'Welcome', about: 'About Us', contact: 'Contact Us' }
    };
    return texts[language][key];
  };
  return (
    <div>
      <button onClick={() => setLanguage('zh')}>中文</button>
      <button onClick={() => setLanguage('en')}>English</button>
      <h1>{getText('welcome')}</h1>
      {/* 其他内容 */}
    </div>
  );
}

实现方案

使用专业的国际化库，如 i18next 配合 react-i18next。

1. 安装依赖

npm install i18next react-i18next

2. 配置 i18next (i18n.js)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import zh from './locales/zh.json';
import en from './locales/en.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      zh: { translation: zh },
      en: { translation: en }
    },
    lng: 'zh',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

3. 翻译资源文件 (locales/zh.json)

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

4. 组件中使用

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>
  );
}

 () {
   { t } = ();
   (
    
  );
}

5. 语言切换组件

import React from 'react';
import { useTranslation } from 'react-i18next';

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 支持：支持从右到左的语言如阿拉伯语。
• 懒加载翻译：按需加载翻译资源，减少包大小。

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