JavaScript计算变量时出现字符串拼接而非数值运算问题如何解决

问题根因 #

从DOM属性、localStorage中读取的内容默认均为字符串类型，JavaScript的加法运算符+在遇到字符串类型操作数时会优先执行字符串拼接逻辑，而非算术加法。你的代码中val从textarea的innerHTML中获取为字符串，random * px因为乘法运算符的隐式转换会得到数字结果，二者相加时就会触发字符串拼接，导致出现015这类异常结果。

修复方案 #

所有参与算术运算的变量需要显式转换为数值类型，同时针对textarea元素调整内容读写方式，优化代码健壮性：

• 读取localStorage和textarea内容时直接转换为数值类型，可选使用Number()、parseInt()（整数场景）、parseFloat()（浮点数场景）
• textarea元素读写内容优先使用value属性，比innerHTML更适配表单元素的内容操作
• 可增加非数值场景兜底逻辑，避免转换失败出现NaN

修改后代码示例 #

function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function func() {
    // 显式转换为数值，非数值默认兜底为0
    var pxL = Number(localStorage.getItem("pxL")) || 0;
    var val = Number(document.getElementById("bp").value) || 0;
    document.getElementById("bp").value = funcCalc(val, randomRange(1, 10), pxL);
}
function funcCalc(val, random, px) {
    return val + random * px;
}

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