前端国际化最佳实践：从硬编码到专业方案

推荐的技术方案

为了高效管理多语言资源，我们推荐使用成熟的国际化库，如 i18next 配合 react-i18next。这套方案不仅支持动态切换，还能处理复杂的参数替换和格式本地化。

1. 初始化配置

首先安装依赖并配置 i18next。这里我们设置了默认语言、回退语言以及浏览器语言检测逻辑。

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

i18n
  .use(initReactI18next)
  .init({
    resources: {
      zh: { translation: zh },
      en: { translation: en },
      ja: { translation: ja }
    },
    lng: 'zh',
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
    detection: {
      order: ['navigator', 'localStorage', 'cookie'],
      caches: ['localStorage', 'cookie']
    }
  });

export default i18n;

2. 翻译资源文件

将文本提取到独立的 JSON 文件中，便于管理和维护。支持嵌套结构和变量插值。

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

// 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",
  "date": "Today is {{date}}"
}

3. 组件中使用

利用 useTranslation Hook 获取翻译函数 t。这样组件内部无需关心语言状态，只需调用 t(key) 即可。

// 组件示例
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>
  );
}

4. 语言切换与本地化格式

除了文本，日期、数字和货币也需要根据地区格式化。同时，对于阿拉伯语等 RTL（从右向左）语言，需要调整布局方向。

// 语言切换组件
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>
      <button onClick={() => changeLanguage('ja')}>日本語</button>
    </div>
  );
}

// 日期和时间本地化
import React from 'react';
import { useTranslation } from 'react-i18next';
import { format } from 'date-fns';
import { zhCN, enUS, ja } from 'date-fns/locale';

function LocalizedDate() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const getLocale = () => {
    switch (i18n.language) {
      case 'zh': return zhCN;
      case 'en': return enUS;
      case 'ja': return ja;
      default: return enUS;
    }
  };
  const formattedDate = format(currentDate, 'yyyy 年 MM 月 dd 日 EEEE', { locale: getLocale() });
  return (
    <div>
      <p>{formattedDate}</p>
    </div>
  );
}

// 数字与货币本地化
function LocalizedNumber({ number }) {
  const { i18n } = useTranslation();
  const formattedNumber = new Intl.NumberFormat(i18n.language).format(number);
  return <p>{formattedNumber}</p>;
}

function LocalizedCurrency({ amount, currency }) {
  const { i18n } = useTranslation();
  const formattedCurrency = new Intl.NumberFormat(i18n.language, {
    style: 'currency',
    currency: currency
  }).format(amount);
  return <p>{formattedCurrency}</p>;
}

5. RTL 支持与工程化

对于阿拉伯语、希伯来语等 RTL 语言，需要在 CSS 中增加 [dir="rtl"] 样式，并在 JS 中动态设置 document.documentElement.dir。此外，生产环境建议使用 i18next-http-backend 按需加载翻译包，并使用 i18next-scanner 自动提取代码中的翻译键，减少人工维护成本。

关键要点

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

做好这些细节，你的网站才能真正具备全球化能力。