前端国际化最佳实践与本地化方案

专业解决方案

推荐使用成熟的国际化库，如 i18next 配合 react-i18next。它们提供了完整的生命周期管理，从配置到渲染都能自动化处理。

1. 初始化配置

首先安装依赖：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';
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. 组件中使用

在 React 组件中，利用 useTranslation Hook 获取翻译函数 t。注意处理带参数的变量，如用户名或计数。

// 组件中使用
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（从右向左）语言，需要动态调整 CSS 方向。

// 语言切换组件
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 { format } from 'date-fns';
import { zhCN, enUS, ja } from 'date-fns/locale';
import { useTranslation } from 'react-i18next';

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 <p>{formattedDate}</p>;
}

// 数字与货币本地化
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>;
}

// RTL 语言支持
function App() {
  const { i18n } = useTranslation();
  React.useEffect(() => {
    const rtlLanguages = ['ar', 'he', 'fa'];
    document.documentElement.dir = rtlLanguages.includes(i18n.language) ? 'rtl' : 'ltr';
  }, [i18n.language]);
  return (
    <div>
      <LanguageSwitcher />
      <Header />
      <Greeting name="张三" />
      <LocalizedDate />
      <LocalizedNumber number={1234567.89} />
      <LocalizedCurrency amount={100} currency="CNY" />
    </div>
  );
}

5. 进阶优化

对于大型项目，建议开启懒加载以减少首屏体积，并使用扫描工具自动提取未翻译的字符串。

// 懒加载翻译
import Backend from 'i18next-http-backend';
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
    // 其他配置...
  });

// i18next-scanner.config.js
module.exports = {
  input: ['src/**/*.{js,jsx,ts,tsx}'],
  output: './locales',
  options: {
    lngs: ['zh', 'en', 'ja'],
    defaultLng: 'zh',
    ns: ['translation'],
    defaultValue: (lng, ns, key) => key,
    resourceKeySeparator: '.',
    nsSeparator: ':',
    interpolation: { prefix: '{{', suffix: '}}' }
  }
};

总结与建议

做好国际化不仅仅是把字翻对，更在于细节体验。核心建议包括：使用专业库统一管理资源，避免硬编码；支持参数化翻译以应对动态内容；利用浏览器设置自动检测语言；处理日期、数字、货币的本地化格式；针对 RTL 语言适配布局；最后，通过工具链实现翻译资源的自动提取和按需加载。这些实践能让你的产品真正具备全球化的能力。