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

问题分析：

• 硬编码导致维护困难。
• 简单替换无法处理复杂语境。
• 忽视复数、日期及货币格式会导致显示错误。

推荐实现方案

使用 i18next

# 安装依赖
npm install i18next react-i18next

// 配置
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: {
    translation: {
      welcome: 'Welcome to our app!',
      login: 'Login',
      itemCount: 'You have {{count}} item(s) in your cart.',
      itemCount_plural: 'You have {{count}} items in your cart.'
    }
  },
  zh: {
    translation: {
      welcome: '欢迎使用我们的应用！',
      login: '登录',
      itemCount: '您的购物车中有 {{count}} 件商品。'
    }
  }
};

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

export default i18n;

// 使用
import React from 'react';
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}

function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count })}</p>;
}

// 切换语言
import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSelector() {
  const { i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

处理复数形式

// 配置复数规则
const resources = {
  en: {
    translation: {
      itemCount: 'You have {{count}} item in your cart.',
      itemCount_plural: 'You have {{count}} items in your cart.'
    }
  },
  zh: {
    translation: {
      itemCount: '您的购物车中有 {{count}} 件商品。'
    }
  }
};

// 使用复数形式
function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count, plural: count !== 1 })}</p>;
}

处理日期和时间格式

// 使用 Intl.DateTimeFormat
function FormatDate({ date }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date)}
    </p>
  );
}

处理货币格式

// 使用 Intl.NumberFormat
function FormatPrice({ price, currency = 'USD' }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)}
    </p>
  );
}

处理 RTL 语言

// 检测 RTL 语言
function isRTL(lang) {
  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
  return rtlLanguages.includes(lang);
}

// 设置 RTL 样式
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { i18n } = useTranslation();
  useEffect(() => {
    if (isRTL(i18n.language)) {
      document.documentElement.dir = 'rtl';
      document.documentElement.lang = i18n.language;
    } else {
      document.documentElement.dir = 'ltr';
      document.documentElement.lang = i18n.language;
    }
  }, [i18n.language]);
  return <div>应用内容</div>;
}

最佳实践

// 分离翻译文件
// public/locales/en/translation.json
{
  "welcome": "Welcome to our app!",
  "login": "Login"
}

// 配置 i18next 加载后端资源
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  });

// 使用命名空间
function Home() {
  const { t } = useTranslation(['home', 'common']);
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button>{t('login', { ns: 'common' })}</button>
    </div>
  );
}

// 动态加载翻译
function DynamicComponent() {
  const { t, i18n } = useTranslation();
  useEffect(() => {
    i18n.loadNamespaces('dynamic');
  }, [i18n]);
  return <p>{t('dynamicText', { ns: 'dynamic' })}</p>;
}

总结与建议

国际化是提升用户体验的关键，但需谨慎实施。过度追求多语言支持可能增加维护成本，应根据目标用户群体决定范围。核心原则是服务于用户体验，而非炫技。若实现导致体验下降，则违背初衷。