滑块相关诡异Bug求助：公式计算结果不符合预期

我一眼就揪出问题了——你从滑块输入框拿到的this.value是字符串类型，直接参与数学运算时会触发字符串拼接，而不是你期望的数值计算！

举个实际场景：当滑块值是50的时候，500+b会变成500+"50"，结果是字符串"50050"，之后再加上(500-b)/n的数值45，JS会把字符串和数字强制拼接，最终得到"5005045"这种完全偏离预期的结果。

解决方案：先把字符串转为数字类型 #

只需要在计算前，把传入的b转换成数字即可，这里给你三种常用的转换方式：

方式1：使用Number()函数（最直观） #

能正确处理整数和浮点数，是通用性最强的转换方式：

<html> 
<head> </head> 
<body > 
<p id="txt"></p> 
<p id="txt2"></p> 
<div class="slidecontainer"> 
<input type="range" min="0" max="100" value="50" id="b"> 
</div> 
<script> 
var n = 10; 
function route(bStr){
  // 将字符串转换为数字
  const b = Number(bStr);
  document.getElementById('txt').innerHTML = 500 + b + (500 - b)/n;
  document.getElementById('txt2').innerHTML = 500 - b - (500 - b)/n;
} 
document.getElementById("b").oninput = function() { 
  route(this.value) 
} 
</script> 
</body> 
</html>

方式2：使用一元加运算符+（最简洁） #

这是JS里的语法糖，转换效果和Number()完全一致：

const b = +bStr;

方式3：使用parseInt()（适合整数场景） #

如果确定输入是整数，也可以用这个，但一定要加上第二个参数10，避免触发八进制解析的旧坑：

const b = parseInt(bStr, 10);

修复后再测试，当滑块值为50时，第一个公式的结果会是500+50+(500-50)/10 = 595，第二个是500-50-(500-50)/10 = 405，完全符合数学计算的预期啦！

内容的提问来源于stack exchange，提问作者Zorro Le Dozo