React TypeScript中Intl.NumberFormat报RangeError的原因及解决

可能触发错误的输入参数 #

• 非有限数值：虽然函数参数标注为number，但实际传入NaN、Infinity或-Infinity时，Firefox的Intl实现会比Chrome更严格，触发maximumFractionDigits的范围校验错误。
• 超范围极值：传入绝对值极大的数字（如接近Number.MAX_VALUE的数值，1e309及以上），Firefox在解析这类数值时可能出现异常，导致参数校验失败。

解决办法 #

1. 增加数值合法性校验 #

在格式化前先过滤非法数值，确保传入的是有效有限数字：

const formatCurrency = (item: number | null | undefined) => {
  // 校验数值是否为有效有限数字
  if (item == null || !Number.isFinite(item)) {
    return '';
  }
  const currencyFormat = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  });
  return currencyFormat.format(item);
}

2. 缓存格式化实例（优化+潜在问题规避） #

原代码每次调用都新建Intl.NumberFormat实例，虽然不是直接报错原因，但缓存实例可以避免重复初始化带来的潜在问题，同时提升性能：

// 全局缓存格式化实例
const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

const formatCurrency = (item: number | null | undefined) => {
  if (item == null || !Number.isFinite(item)) {
    return '';
  }
  return currencyFormatter.format(item);
}

3. 增加异常捕获兜底 #

如果偶发错误仍存在，添加try-catch捕获错误并返回兜底值：

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

const formatCurrency = (item: number | null | undefined) => {
  if (item == null || !Number.isFinite(item)) {
    return '';
  }
  try {
    return currencyFormatter.format(item);
  } catch (err) {
    // 出现错误时返回空或默认值
    return '';
  }
}

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