JavaScript中+运算符未求和反而拼接字符串问题排查

嘿，我看到你遇到了这个常见的JavaScript小坑——从表单输入框获取的value属性默认是字符串类型，所以直接用+运算符时，JS会执行字符串拼接，而不是你想要的数值加法，比如输入3和5就会得到"35"而非8。

问题根源 #

举个例子，当你写var principal = princ.value时，哪怕用户输入的是数字，principal实际存储的是"3"这种字符串，而不是数值3。两个字符串用+连接，自然就变成了拼接结果。

几种快速解决方法 #

你只需要把字符串转换为数值后再运算就行，这里给你几种常用的方式：

1. 用Number()函数转换
   这是最直观的方式，能把合法的数值字符串转成对应数值：

function validateForm() {
  var principal = Number(princ.value);
  var interestrate = Number(interest.value);
  var monthlypayment = Number(monthly.value);
  var months = principal + interestrate; // 现在会得到正确的加法结果
  // 你的后续还款次数计算逻辑...
}

2. 用parseInt()/parseFloat()处理
   如果是整数（比如月份）用parseInt()，带小数的数值（比如利率）用parseFloat()，记得给parseInt()加上第二个参数10（指定十进制），避免意外的进制转换：

function validateForm() {
  var principal = parseInt(princ.value, 10);
  var interestrate = parseFloat(interest.value);
  var monthlypayment = parseFloat(monthly.value);
  var months = principal + interestrate;
  // 后续逻辑...
}

3. 简洁的一元加号+转换
   这是个小技巧，在变量前加+能快速把字符串转成数值：

function validateForm() {
  var principal = +princ.value;
  var interestrate = +interest.value;
  var monthlypayment = +monthly.value;
  var months = principal + interestrate;
  // 后续逻辑...
}

额外提醒：验证输入合法性 #

为了避免用户输入非数值内容导致运算结果为NaN，可以在转换后加个简单验证：

function validateForm() {
  var principal = +princ.value;
  if (isNaN(principal)) {
    alert("请输入有效的本金数值哦");
    return false; // 阻止表单提交或后续逻辑执行
  }
  // 其他字段也可以做类似验证
}

内容的提问来源于stack exchange，提问作者Timuçin Çiçek