第16章 国际化与多语言支持

时间和货币的本地化

1. 时间本地化

在React应用中实现时间的本地化显示是国际化的重要环节。以下是常见实现方式：

使用原生JavaScript API

const date = new Date();
const localizedDate = date.toLocaleDateString(navigator.language, {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

使用第三方库（推荐）

  1. date-fns

    import { format, parseISO } from 'date-fns';
import { enUS, zhCN } from 'date-fns/locale';

const date = parseISO('2023-01-01');
format(date, 'PPPP', { locale: currentLocale === 'zh' ? zhCN : enUS });

  2. moment.js（注意：已进入维护模式）

    moment.locale('zh-cn');
moment().format('LLLL');

2. 货币本地化

货币格式需要考虑符号位置、千分位分隔符和小数位数等差异。

原生实现

const formatter = new Intl.NumberFormat(navigator.language, {
  style: 'currency',
  currency: 'USD'
});
formatter.format(1234.56); // "$1,234.56" (en-US)

结合i18next

import i18n from 'i18next';

const formatCurrency = (value) => {
  return new Intl.NumberFormat(i18n.language, {
    style: 'currency',
    currency: i18n.t('currencyCode')
  }).format(value);
};

3. 最佳实践建议

  1. 动态加载语言包

    // 按需加载date-fns语言包
const loadLocale = async (locale) => {
  return await import(`date-fns/locale/${locale}/index.js`);
};

  2. 统一格式化组件

    const LocalizedDate = ({ isoString }) => {
  const { i18n } = useTranslation();
  return (
    <span>
      {new Date(isoString).toLocaleDateString(i18n.language)}
    </span>
  );
};

  3. 货币汇率处理

    • 考虑使用API获取实时汇率
    • 在Redux或Context中存储汇率数据
    • 实现自动转换组件

4. 常见问题解决方案

问题解决方案
时区差异使用UTC时间存储，前端转换显示
货币符号位置通过Intl.NumberFormat自动处理
多语言格式缓存使用Memoization优化性能

5. 示例代码整合

import { useTranslation } from 'react-i18next';

const PriceDisplay = ({ value }) => {
  const { i18n } = useTranslation();
  
  return (
    <div>
      <p>
        日期: {new Date().toLocaleDateString(i18n.language)}
      </p>
      <p>
        价格: {new Intl.NumberFormat(i18n.language, {
          style: 'currency',
          currency: 'CNY'
        }).format(value)}
      </p>
    </div>
  );
};

通过以上方法，可以确保应用在不同语言环境下正确显示时间和货币格式，提供真正的国际化用户体验。

Last Updated::