JavaScript二次方程求根计算器运行返回NaN问题排查

问题原因 #

• 校验顺序错误：当前代码先执行根号计算、求根运算，再校验输入合法性，非法输入或者不符合二次方程求解条件的数值会在计算阶段直接生成NaN，后续校验逻辑根本不会生效
• 输入值类型问题：从input元素拿到的value默认是字符串类型，虽然JS弱类型特性会在乘法运算时尝试隐式转换，但遇到非纯数字输入时转换结果异常，也会导致计算NaN
• 缺少边界场景处理：没有处理二次项系数a为0（不是二次方程，且会触发除以0错误）、判别式b²-4ac < 0（无实根，Math.sqrt负数会返回NaN）的场景，同时函数定义的a、b、c形参无实际作用，点击触发时并未传入对应参数

修正后的JS代码 #

function quadratic() {    
  // 先获取输入并显式转换为数值类型
  const a = Number(document.getElementById("a").value);
  const b = Number(document.getElementById("b").value);
  const c = Number(document.getElementById("c").value);
  const resultDom = document.getElementById("quadraticOut");

  // 先做所有合法性校验
  if (isNaN(a) || isNaN(b) || isNaN(c)) {
    alert("请输入合法数字");
    resultDom.innerHTML = "输入无效";
    return;
  }
  if (a === 0) {
    alert("二次项系数a不能为0");
    resultDom.innerHTML = "不是合法二次方程";
    return;
  }
  const delta = b * b - 4 * a * c;
  if (delta < 0) {
    resultDom.innerHTML = "当前方程无实根";
    return;
  }

  // 校验全部通过后再执行计算
  const sqrtDelta = Math.sqrt(delta);
  const quadraticPos = (-b + sqrtDelta) / (2 * a); 
  const quadraticNeg = (-b - sqrtDelta) / (2 * a);

  resultDom.innerHTML =
    "方程的两个实根为：<br/>" + 
    quadraticPos.toFixed(2) +
    "<br/>" + 
    quadraticNeg.toFixed(2);
}

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