如何修复JavaScript按重量计算运费时1-10区间计算错误问题

错误原因 #

• 条件判断未互斥：你用了多个独立的if语句，没有用else if做分支互斥，只要重量符合多个区间的判断条件，就会累加对应多个档位的运费，比如输入重量1的话，会同时满足<=1、<=3、<=5、<=10、<=25五个条件，运费会被错误累加为2+3+4+5+6=20美元，和预期的2美元不符。
• 计费区间不完整：原有规则缺少1.1-1.9kg、3.1-3.9kg、5.1-5.9kg三个重量段的计费标准，修复代码默认按区间向上匹配的逻辑补充，即1.1-1.9kg按2-3kg档位计费、3.1-3.9kg按4-5kg档位计费、5.1-5.9kg按6-10kg档位计费，你可以根据实际需求调整对应阈值。
• 输入值未做类型转换：从input标签取到的value是字符串类型，直接做数值比较、计算可能出现异常。
• 超25kg的循环计费逻辑错误：原有循环内的运费累加逻辑混乱，不符合多单位计费的预期。

修复后代码 #

JS部分 #

function sprice() {
  // 输入转数字，非数字输入默认按0处理
  let weight = Number(document.getElementById("number").value) || 0;
  let totalFreight = 0;
  // 单单位最大重量，超过25kg拆分为多个单位计费
  const perUnitMaxWeight = 25;
  let remaining = weight;

  while (remaining > 0) {
    const currentWeight = Math.min(remaining, perUnitMaxWeight);
    let unitFreight = 0;
    // 互斥条件匹配运费档位
    if (currentWeight <= 0.5) {
      unitFreight = 1;
    } else if (currentWeight <= 1) {
      unitFreight = 2;
    } else if (currentWeight <= 3) {
      unitFreight = 3;
    } else if (currentWeight <= 5) {
      unitFreight = 4;
    } else if (currentWeight <= 10) {
      unitFreight = 5;
    } else if (currentWeight <= 25) {
      unitFreight = 6;
    }
    totalFreight += unitFreight;
    remaining -= perUnitMaxWeight;
  }
  document.getElementById("ans").innerHTML = "$" + totalFreight;
}

HTML部分和原有代码一致即可 #

<form>
  输入重量:<input type="text" id="number" name="number" /><br />
  <input type="button" value="查询" onclick="sprice()" />
</form>
<br>
<p>运费价格:<span id="ans"></span></p>

验证效果 #

• 输入0.3 → 运费$1
• 输入0.8 → 运费$2
• 输入2.5 → 运费$3
• 输入4 → 运费$4
• 输入7 → 运费$5
• 输入15 → 运费$6
• 输入30 → 运费$7（30kg拆为25kg+5kg两个单位，对应6+1=7）

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