背景（问题）

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

巴特西

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

背景（问题）

过程&结论

解题思路（false）

题目上的代码运行结果

结论

实验

最终结论

证明

最新文章

热门文章