如何过滤NaN？输入框未填值时求和显示NaN的解决方法

嘿，这个NaN的问题我太熟了！本质原因就是空输入或者无效值被parseFloat()解析成了NaN，而任何和NaN的数学运算结果都会是NaN，最后自然就显示出NaN了。咱们一步步来修复：

核心解决方案：给所有可能产生NaN的地方加 fallback 处理 #

修改你的calculate函数，对每个参与计算的值都做有效性校验，一旦解析失败就用0来替代，这样就能彻底避免NaN的出现。

修改后的app.js代码如下：

$(document).ready(calculate);
$(document).on("keyup", calculate);

function calculate() {
  var sum = 0;
  // 先处理monetary_factor，确保是有效数字，默认1防止意外
  var parsedFactor = parseFloat(monetary_factor.replace(",", ".")) || 1;

  $(".o-money__answer").each(function(){
    // 1. 处理输入框的值：空值或无效内容转为0
    var inputValue = $(this).val().trim();
    var parsedInput = parseFloat(inputValue) || 0;

    // 2. 处理隐藏输入框的值：确保是有效数字，默认0
    var hiddenValue = $(this).parent().find('input[type=hidden]').val();
    var parsedHidden = parseFloat(hiddenValue) || 0;

    // 3. 安全计算累加
    sum += parsedInput * parsedFactor * parsedHidden;
  });

  // 最后输出结果，即使sum是0也能正常显示两位小数
  $("#o-money__totalsum").html(sum.toFixed(2));
}

为什么这样改？ #

• parseFloat('')会返回NaN，所以我们先用trim()去掉输入的空格，空值直接用|| 0转为0；
• 对隐藏输入框和monetary_factor也做了同样的处理，防止后端输出的值意外无效（比如空字符串）；
• 所有运算都基于有效数字，sum就永远不会变成NaN了，页面会正常显示0.00或者正确的求和结果。

额外优化（可选） #

如果想从源头减少无效输入，可以给.o-money__answer输入框加个数字限制，比如只允许输入数字和小数点：

$(document).on("input", ".o-money__answer", function() {
  $(this).val($(this).val().replace(/[^0-9.]/g, ''));
});

这样用户就没法输入字母之类的无效内容，进一步降低出现异常的概率~

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