前端国际化实战指南：构建全球化应用

组件内使用

通过 useTranslation Hook 获取 t 函数，这是最简洁的调用方式。注意复数参数需要配合后端规则配置。

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

function ItemCount({ count }) {
  const { t } = useTranslation();
  // 自动匹配单复数规则
  return <p>{t('itemCount', { count })}</p>;
}

特殊场景处理

日期和货币不能只靠翻译字符串，必须结合浏览器原生 API (Intl)。

日期格式化

不要直接把时间戳塞进翻译键，先格式化再传参。

function OrderDate({ date }) {
  const { t, i18n } = useTranslation();
  const locale = i18n.language;
  
  // 使用 Intl 按当前语言格式化
  const formattedDate = new Intl.DateTimeFormat(locale, {
    year: 'numeric', month: 'long', day: 'numeric'
  }).format(date);

  return <p>{t('orderDate', { date: formattedDate })}</p>;
}

RTL 语言支持

阿拉伯语等从右向左的语言需要调整 DOM 方向，这通常需要在根组件监听语言变化。

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

function App() {
  const { i18n } = useTranslation();

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

  return <div>...</div>;
}

工程化最佳实践

随着项目扩大，翻译文件会越来越多。这时候就要考虑拆分和按需加载了。

文件分离与命名空间

不要把几千行翻译全塞在一个 translation.json 里。按业务模块拆分，比如 common.json, home.json。

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

// public/locales/en/home.json
{
  "welcome": "Welcome to our app!"
}

使用时指定命名空间：

const { t } = useTranslation(['home', 'common']);
// 访问 common 命名空间的 key
<button>{t('login', { ns: 'common' })}</button>

动态加载

对于大型 SaaS 应用，可以按需加载特定模块的翻译，减少首屏体积。

useEffect(() => {
  i18n.loadNamespaces('dynamic');
}, [i18n]);

经验之谈

国际化确实能提升用户体验，但千万别为了国际化而国际化。如果产品只面向单一地区，强行上多语言只会增加维护成本。

另外，别过度依赖库的功能。有时候简单的逻辑判断比复杂的配置更可靠。记住，国际化的终极目标是让用户感觉不到语言障碍，而不是展示技术复杂度。如果实现得让用户觉得卡顿或错乱，那就是失败的。

把握好度，根据实际业务需求决定范围，这才是资深开发者的选择。