JavaScript类属性用+=赋值出现字符串拼接而非数值累加的问题

问题触发的核心逻辑 #

• 所有HTML表单输入控件的value属性返回值固定为字符串类型，和你给input设置的type="number"属性没有任何关系。你代码中读取的输入值qq实际是字符串格式，比如输入10时拿到的是字符序列"10"，不是可参与计算的数值10。
• JavaScript的+/+=运算符存在固定的隐式转换规则：只要两个操作数中有任意一个是字符串，运算符就会执行字符串拼接，而非数值累加。你类中初始化的inbank是数值100，和字符串"10"执行累加时，JS会先把100隐式转为字符串"100"，再拼接得到结果"10010"；第二次提交时inbank已经变成字符串类型，再拼接输入值就会得到"1001010"，和你观测到的现象完全匹配。
• 代码存在的其他潜在问题：你只定义了Person类，但没有完成实例化，直接调用pocketToBank函数时会抛出person1 is not defined的运行时错误，需要在类定义后补充实例化逻辑：

  // 基于Person类创建实际的实例对象
  const person1 = new Person("测试用户");
  

修复后的可运行代码 #

读取输入值时，将字符串格式的输入显式转换为数值类型，同时增加基础合法性校验，避免非法输入导致计算异常：

class Person {
    constructor(name) {
        this.name = name;
        this.bank = 1000;
        this.inbank = 100;
    }
}
// 完成类的实例化
const person1 = new Person("测试用户");

function pocketToBank() {
    const rawInput = document.getElementById("pockettobank").value;
    // 用Number()把字符串输入转为合法数值
    const transferAmount = Number(rawInput);
    // 拦截非法输入：非数字、金额小于等于0的情况直接中断计算
    if (isNaN(transferAmount) || transferAmount <= 0) return;

    person1.inbank += transferAmount;
    person1.bank -= transferAmount;
    updateStats();
};

实用简写：如果不需要复杂的合法性校验，也可以在读取的输入值前加一元+运算符快速完成字符串转数字，写法为const transferAmount = +document.getElementById("pockettobank").value，是前端开发中常用的简洁写法。

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