浅谈JS输出中的“+”作用问题

背景（问题）

web前端考试有这么一道题目（为了阅读方便和应文章的景，小编将题目进行了微调）

<input type="number" value="1" id="a">
<input type="number" value="1" id="b">
<input type="number" value="1" id="c">
<button onclick="add()">会弹出什么呢？</button>

function add() {
    var a = document.getElementById("a").value;
    var b = parseInt(document.getElementById("b").value);
    var c = parseInt(document.getElementById("c").value);
    alert(a + b + c);
}

Q：当我们点击按钮时，弹出的提示框的内容是什么？

过程&结论

解题思路（false）

因为input的value值为String型，即字符串类型

因此a的类型为String型

b，c 被parse方法给转换成Number型

因此先计算b + c = 2，再将a和2进行拼接

最后得出结果为12

题目上的代码运行结果

提示框的内容为：111

结论

当js的输出中有String型时，所有的“+”起到拼接运算的作用

好，本期结束个der

怎么可能这么简单潦草地结束呢？肯定还得有实验来证明这些结论吧

实验

老演员全部上阵，再加一位str变量，值为“a”

先把不变的HTML部分展示出来：

<input type="number" value="1" id="a">
<input type="number" value="1" id="b">
<input type="number" value="1" id="c">
<button onclick="add()">会弹出什么呢？</button>

第一次实验

function add() {
    var a = parseInt(document.getElementById("a").value);
    var b = parseInt(document.getElementById("b").value);
    var c = parseInt(document.getElementById("c").value);
    var str = "a";
    alert(str + a + b + c);
}

第一次实验运行结果

提示框内容：a111

第二次实验

function add() {
    var a = parseInt(document.getElementById("a").value);
    var b = parseInt(document.getElementById("b").value);
    var c = parseInt(document.getElementById("c").value);
    var str = "a";
    alert(a + str + b + c);
}

第二次实验运行结果

提示框内容：1a11

第三次实验

function add() {
    var a = parseInt(document.getElementById("a").value);
    var b = parseInt(document.getElementById("b").value);
    var c = parseInt(document.getElementById("c").value);
    var str = "a";
    alert(a + b + str + c);
}

第三次实验运行结果

提示框内容：2a1

第四次实验

function add() {
    var a = parseInt(document.getElementById("a").value);
    var b = parseInt(document.getElementById("b").value);
    var c = parseInt(document.getElementById("c").value);
    var str = "a";
    alert(a + b + c + str);
}

第三次实验运行结果

提示框内容：3a

最终结论

当JS输出的内容中包含字符串，那么字符串后面的“+”全都起拼接作用

证明

alert(1 + 1 + 1 + 1 + 1 + "a" + 1 + 1 + 1 + 1 + 1);

运行结果：5a11111