为什么明明解析的是数字，parseFloat执行后仍返回NaN？

• 执行逻辑顺序错误：代码中优先执行了tipCustom.value / 100的运算，而tipCustom.value是字符串类型，当输入为空、存在非法字符时，除法运算会直接返回NaN，对NaN执行parseFloat返回结果仍然是NaN
• 缺少非法值兜底校验：没有判断输入值是否合法就直接参与运算，边界场景下必然触发异常

正确逻辑应为先把输入值转为数字，再做除法运算，同时增加非法值兜底逻辑，修复后代码如下：

const tipCustom = document.querySelector(".tip-custom");
tipCustom.addEventListener("input", tipInputFun);
let tipValue = 0.15;
function tipInputFun() {
  // 先转数字，转换失败默认用15兜底，对应默认15%的小费比例，可根据业务需求调整兜底值
  const inputVal = parseFloat(tipCustom.value) || 15;
  tipValue = inputVal / 100;
  console.log(tipValue);
}

• 可以给HTML的input元素增加min="0"属性，避免用户输入负数小费
• 如果需要限制小数位数，可以在转数字后增加toFixed(n)方法做精度限制

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