React应用基于API字段实现货币换算 如何配置locale实现数值自动转换

首先你需要明确一个核心误区：locale 配置本身没有办法实现货币汇率的自动换算。
locale 仅负责控制数值格式化的展示规则，比如货币符号的展示位置、千分位分隔符样式、保留小数位数等，和汇率计算完全无关。你想要的自动换算需要额外新增业务逻辑实现，具体修改步骤如下：

• 新增汇率获取逻辑：你需要提前获取到原始数值对应的基准货币，和目标展示货币之间的汇率值，汇率可以从业务接口、第三方汇率服务拉取后做本地缓存
• 修改formatCurrency函数，新增汇率换算逻辑，先完成数值换算再执行格式化

修改后的参考代码如下：

export const formatCurrency = (
  value: number,
  targetCurrency: string = 'USD',
  baseCurrency: string = 'USD', // 替换为你接口返回actualCost的默认货币单位
  exchangeRate: number, // 基准货币转目标货币的汇率，比如1USD兑换0.9EUR时传0.9
  locale: string = 'en-US'
) => {
  // 同币种不需要换算，直接格式化
  const convertedValue = baseCurrency === targetCurrency 
    ? value 
    : Number((value * exchangeRate).toFixed(2));
  return Formatters(locale).number.currency(targetCurrency)(convertedValue);
};

调用方式对应修改为：

// 提前从缓存/接口拿到对应costCurrency的汇率再传入
{formatCurrency(actualCost, costCurrency, 'USD', costCurrencyExchangeRate)}

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