使用split解析金额出现NaN、数值异常如何正确获取值

• 金额解析逻辑硬编码依赖R$ （带空格）的分隔格式：当输入为R$5.00这类R$后无空格的格式时，split操作拿不到有效数字段，后续调用split(',')会直接触发NaN错误，导致页面无响应。
• 金额单位换算逻辑错误：拆分出逗号前后的整数、小数段后直接拼接转数字，相当于把“分”单位的值直接当成“元”使用，比如R$400,00会被解析为40000，数值放大100倍。
• 掩码方法千分位判断逻辑存在偏移：传入小于1的金额时，遍历插入分隔符的条件计算错误，无法正确生成小金额的展示格式。

业务侧金额解析逻辑 #

const { valueAmount, textDescription } = props.navigation.state.params;
// 清洗输入字符串，移除货币符号、多余空格，仅保留数字、逗号、负号
const cleanedValue = valueAmount.replace(/[^\d,-]/g, '');
// 拆分整数、小数部分，小数位默认兜底为00，固定取2位避免格式异常
const [integerPart, decimalPart = '00'] = cleanedValue.split(',');
const normalizedDecimal = decimalPart.padEnd(2, '0').slice(0, 2);
// 拼接为分单位数值后除以100，转为元单位，无效值兜底为0
const amount = Number(`${integerPart}${normalizedDecimal}`) / 100 || 0;

修复后的金额掩码方法 #

const convertMoneyTextMask = (value) => {
  const numVal = Number(value);
  // 无效值直接兜底
  if (isNaN(numVal)) return 'R$ 0,00';

  const absNumStr = Math.abs(numVal).toFixed(2).replace(/\D/g, '');
  const prefix = numVal >= 0 ? 'R$ ' : 'R$ -';

  // 处理小于1元的边界场景
  if (absNumStr.length === 1) return `${prefix}0,0${absNumStr}`;
  if (absNumStr.length === 2) return `${prefix}0,${absNumStr}`;

  let maskedStr = '';
  // 从右往左遍历插入小数逗号、千分位点
  for (let i = absNumStr.length - 1; i >= 0; i--) {
    const rightOffset = absNumStr.length - 1 - i;
    // 倒数第3位前插入小数逗号
    if (rightOffset === 2) {
      maskedStr = `,${absNumStr[i]}${maskedStr}`;
    }
    // 小数位之后每3位插入千分位点，避免在字符串最开头插入点
    else if (rightOffset > 2 && (rightOffset - 2) % 3 === 0 && i !== 0) {
      maskedStr = `${absNumStr[i]}.${maskedStr}`;
    }
    else {
      maskedStr = `${absNumStr[i]}${maskedStr}`;
    }
  }

  return `${prefix}${maskedStr}`;
};

• 输入R$5.00（R$后无空格）：解析得到数值5，渲染为R$ 5,00，无NaN报错
• 输入R$400,00：解析得到数值400，渲染为R$ 400,00，无数值放大问题
• 输入R$0,05这类极小金额：解析得到数值0.05，渲染为R$ 0,05，无响应异常

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