前端国际化实战：从避坑到最佳实践

基础配置

推荐使用 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 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;

注意 escapeValue: false 是为了让 React 渲染 JSX 标签时不被转义，这在模板字符串中很关键。

组件中使用

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();
  // 自动根据 count 选择单复数 key
  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>
  );
}

高级场景处理

日期与货币格式化

不要试图用正则去处理日期或货币，直接使用浏览器原生的 Intl API。

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

结合 i18next 使用时，先格式化再传入占位符，避免翻译键值中包含变量逻辑。

RTL（从右向左）布局

阿拉伯语、希伯来语等需要从右向左阅读。需要动态调整文档方向。

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

function App() {
  const { i18n } = useTranslation();
  
  useEffect(() => {
    const rtlLangs = ['ar', 'he', 'fa', 'ur'];
    if (rtlLangs.includes(i18n.language)) {
      document.documentElement.dir = 'rtl';
    } else {
      document.documentElement.dir = 'ltr';
    }
    document.documentElement.lang = i18n.language;
  }, [i18n.language]);

  return <div>应用内容</div>;
}

记得在 CSS 中使用逻辑属性（如 margin-inline-start 代替 margin-left），以便适配双向布局。

最佳实践总结

1. 文件分离：将翻译文件按语言或命名空间拆分，便于团队协作和维护。

   // public/locales/en/common.json
   { "login": "Login", "register": "Register" }
   

2. 命名空间：大型项目建议按模块划分 namespace，减少单个文件的体积。
3. 动态加载：对于非首屏资源，按需加载翻译包，优化首屏性能。
4. 适度原则：不要为了国际化而国际化。如果产品仅面向特定地区，过度设计反而增加负担。

总结与建议

国际化确实能提升产品的全球竞争力，但实施过程需要权衡成本。见过太多开发者滥用 i18n 库，导致项目臃肿不堪。核心在于把握度：针对目标市场做必要的本地化，而不是盲目追求全功能覆盖。

记住，国际化的终极目的是提升用户体验，而非炫技。如果实现方案让用户感到困惑或卡顿，那便是失败的尝试。在实际开发中，保持代码简洁，优先解决高频痛点，才是长久之计。