如何在react-intl v5.21全局修改en-US货币小数分隔符？

核心思路 #

由于要求保留en-US区域设置、固定使用USD币种，同时全局替换小数分隔符为逗号，我们可以通过扩展并覆盖en-US的本地化货币格式数据来实现，无需修改区域设置或每次手动传格式化参数。

步骤1：自定义en-US本地化货币配置 #

创建一个自定义locale数据文件，修改USD币种的小数分隔符规则：

// custom-en-us-locale.js
import { enUS } from '@formatjs/intl-locale-data';
import { NumberFormat } from '@formatjs/intl-numberformat';

// 复制原en-US的货币配置，仅修改USD的小数分隔符
const customEnUSLocale = {
  ...enUS,
  numberFormat: {
    ...enUS.numberFormat,
    currencies: {
      ...enUS.numberFormat.currencies,
      USD: {
        ...enUS.numberFormat.currencies.USD,
        decimalSeparator: ',',
        // 保留原en-US的千位分隔符（若需调整可修改此处）
        groupingSeparator: '.'
      }
    }
  }
};

// 注册自定义的locale数据到NumberFormat
NumberFormat.__addLocaleData(customEnUSLocale);

export default customEnUSLocale;

步骤2：在应用入口注入自定义配置 #

在应用根组件初始化前，先加载并注册自定义locale数据，再渲染IntlProvider：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { IntlProvider, FormattedCurrency } from 'react-intl';
import './custom-en-us-locale'; // 导入即完成注册

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <IntlProvider locale="en-US" defaultLocale="en-US">
    {/* 使用默认FormattedCurrency组件，指定USD币种 */}
    <FormattedCurrency value={123.45} currency="USD" />
    {/* 输出结果：123,45 */}
  </IntlProvider>
);

步骤3：验证全局生效 #

无论是使用FormattedCurrency组件，还是通过useIntl()钩子调用formatCurrency方法，只要保持locale为en-US、currency为USD，都会自动应用自定义的小数分隔符规则：

// 示例：使用useIntl钩子
import { useIntl } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  const formatted = intl.formatCurrency(123.45, 'USD');
  console.log(formatted); // 输出：123,45
  return <div>{formatted}</div>;
}

内容的提问来源于stack exchange，提问作者Itai