React货币格式化组件修改需求：移除小数位并保留千位分隔符

推荐方案：使用原生Intl.NumberFormat API #

手动写正则容易踩坑，浏览器原生的Intl.NumberFormat专门处理数值格式化，支持千位分隔符、货币符号等需求，代码更简洁可靠：

const Currency = (props) => {
  const { symbol = "NGN", value = 0 } = props;

  const formatCurrency = () => {
    // 把输入转为有效数字，无效输入默认设为0
    const numericValue = typeof value === "number" ? value : Number(value) || 0;
    // 取整数部分（如果需要四舍五入换成Math.round即可）
    const integerValue = Math.floor(numericValue);

    // 配置格式化规则：货币格式、不显示小数
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: symbol,
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    });

    // 调整符号与数值之间的空格（部分地区默认无空格，按需调整）
    return formatter.format(integerValue).replace(/^\D+/, `${symbol} `);
  };

  return <Text {...props}>{formatCurrency()}</Text>;
};

原正则方案修复 #

如果坚持用原有正则实现，问题大概率出在数值转换不严谨导致正则无法匹配，修复后的代码如下：

const Currency = (props) => {
  const defaultOptions = {
    thousandsSeparator: ",",
    symbol: props.symbol ?? "NGN",
  };
  const amountValue = props.value ?? 0;

  const formatCurrency = () => {
    let localAmount = amountValue;

    // 确保输入是有效数字：非数字类型先转换，转换失败设为0
    if (typeof localAmount !== "number") {
      localAmount = Number(localAmount);
      if (isNaN(localAmount)) {
        localAmount = 0;
      }
    }

    // 取整数部分并转字符串
    const integerPart = Math.floor(localAmount).toString();
    // 正则添加千位分隔符
    const formattedInteger = integerPart.replace(
      /(\d)(?=(\d{3})+(?!\d))/g,
      `$1${defaultOptions.thousandsSeparator}`
    );

    return `${defaultOptions.symbol} ${formattedInteger}`;
  };

  return <Text {...props}>{formatCurrency()}</Text>;
};

原代码问题点说明： #

1. 数值转换逻辑漏洞：如果props.value是无效字符串（比如"abc"），原代码里Math.floor(localAmount)会返回NaN，转字符串后是"NaN"，正则无法匹配任何数字，导致千位分隔符失效。修复后增加了isNaN判断，确保只会处理有效数字。
2. 空值处理更精准：用??替代三元运算符，避免把0这类合法数值误替换成0.0（虽然不影响功能，但逻辑更严谨）。

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