如何避免JavaScript数值计算返回NaN？附实际代码问题排查示例

问题原因说明 #

1. 你为hUeCalc、masseCalc赋值的逻辑错误：你定义了匿名函数但没有执行，还直接将函数对象用Number()转换，得到的结果必然是NaN。就算你执行了这两个匿名函数，函数内部也没有写return语句返回计算结果，执行后得到的是undefined，转成Number依然是NaN。
2. 重量（masse）的判断逻辑顺序错误：你先判断>=3000的分支，那么数值>=3500的场景永远不会走到对应分支，因为3500已经满足>=3000的条件。
3. 存在未覆盖的边界场景：比如2000<masse<3000的区间你没有写判断逻辑、用户没选柴油/汽油单选框的场景也没有兜底处理，这些都会导致计算结果为undefined，最终转成NaN。

修正后的代码 #

function calc() {
    let hubraum = Number(hubraumComponent.value);
    let emission = Number(emissionComponent.value);
    let masse = Number(masseComponent.value);

    // 输入合法性校验，避免无效输入导致NaN
    if(isNaN(hubraum) || isNaN(emission) || isNaN(masse)) {
        tax.innerHTML = "请输入合法的数值";
        return;
    }
    if(!Diesel.checked && !Benzin.checked) {
        tax.innerHTML = "请选择燃油类型";
        return;
    }

    // 修正hUeCalc计算逻辑，直接计算无需额外嵌套匿名函数
    let hUeCalc;
    if (Diesel.checked) {
        hUeCalc = ((Math.ceil((hubraum/100)))*9.5)+((emission-95)*2);
    } else if (Benzin.checked) {
        hUeCalc = ((Math.ceil((hubraum/100)))*2)+((emission-95)*2);
    }

    // 修正masseCalc判断顺序，补充缺失区间的计算规则
    let masseCalc;
    if (masse >= 3500) {
        masseCalc = (Math.ceil(masse/200)*6.39);
    } else if (masse >= 3000) {
        masseCalc =(Math.ceil((masse/200)*6.01));
    } else if (masse <= 2000) {
        masseCalc = (Math.ceil((masse/200)*5.625));
    } else {
        // 2000<masse<3000的区间规则可根据你的实际需求修改
        masseCalc = (Math.ceil((masse/200)*5.8));
    }

    let berechnung = hUeCalc + masseCalc;
    // toFixed(2)用来保留两位小数，符合金额展示习惯，不需要可删除
    tax.innerHTML = berechnung.toFixed(2) + "€";
    console.log('Calc has been done');
    console.log('hubraum value is ' + hubraum);
    console.log('emission value is ' + emission);
    console.log('masse value is ' + masse);
    console.log('hubraumcalc value is ' + hUeCalc);
    console.log('massecalc value is ' + masseCalc);
}

额外说明 #

你提到的switch case方案也可以实现相同逻辑，和if判断本质没有区别，不会影响计算结果，你可以根据自己的代码习惯选择即可。

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