带千分位分隔符的数字输入框出现NaN及大数异常问题求助

问题原因分析 #

• 输入清空或输入字母时显示NaN：因为过滤后的内容非有效数字，Number.parseInt() 返回NaN，调用toLocaleString()就会输出NaN。
• 16位大数后续输入变0：JavaScript的Number类型有精度上限（最大精确整数为2^53，约9007199254740992），超过这个范围的数字无法被精确解析，导致后续输入的数字丢失精度，表现为末尾补0。

修复后的代码 #

expensesValueInput.addEventListener('keyup', (event) => {
  // 只保留输入中的数字，过滤所有非数字字符
  const currentValue = event.target.value.replace(/[^0-9]/g, '');
  
  // 处理空输入情况：清空输入框，state设为0
  if (!currentValue) {
    event.target.value = '';
    state.expenses = 0;
    return;
  }

  // 直接对字符串做千分位格式化，绕开Number精度限制
  const formattedValue = currentValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  event.target.value = formattedValue;

  // 大数用BigInt存储保证精度，不需要计算的话也可以直接存字符串
  state.expenses = BigInt(currentValue);
  // 若业务不需要数字类型，可替换为：state.expenses = currentValue;
});

关键修复点说明 #

• 过滤非法输入：用/[^0-9]/g正则直接移除所有非数字内容，从根源避免字母等无效输入导致的NaN问题。
• 空值兜底：当输入被清空时，主动设置输入框为空并将state置0，彻底避免NaN显示。
• 大数精度处理：
  • 千分位格式化直接操作字符串，不经过Number转换，不会丢失精度。
  • 存储时用BigInt类型保存超大数字，确保所有输入的数字都能被精确记录；如果业务不需要对该数值进行计算，也可以直接存储数字字符串。

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