Question

我是JavaScript的新手，有人可以解释为什么这3个结果不同吗？

示例1。

var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;

输出：10

示例2。

var x = 5 + 2 + "3";
document.getElementById("demo").innerHTML = x;

输出：73

示例3。

var x = 5 + "2" + 3;
document.getElementById("demo").innerHTML = x;

输出：523

Answer 1

重载

+以执行字符串连接和添加，它是left-to-right associative。

由于运算符过载，因此需要有一条规则来解决两个操作数具有不同数据类型的情况。这条规则很简单：

如果一个操作数是一个字符串，则将另一个操作数转换为字符串。

这意味着代码被评估为

// 1.
((5 + 2) + 3) 
 = 7 + 3 
 = 10

// 2.
((5 + 2) + "3")
  = 7 + "3"           // number + string -> convert number to string
  = "7" + "3" 
  = "73"

// 3.
(("5" + 2) + 3)       // number + string -> convert number to string
  = (("5" + "2") + 3)  
  = "52" + 3          // number + string -> convert number to string
  = "52" + "3" 
  = "523"

Answer 2

提供的答案稍微不那么技术性的版本（这些都比这个答案更正确），但是允许你不想要显示的输出 - 它全部关于字符串与数字 - 如果两个元素是数字并且你添加它们 - 你将得到数字加法。如果您有一个数字和一个字符串 - 当您添加它们时，输出将是后跟字符串的数字。

所以看看你的例子：

var x = 5 + 2 + 3;
Output: 10

5,2和3都是数字，因此输出就是它们全部加在一起

var x = 5 + 2 + "3";
Output: 73

5和2是数字，所以加在一起得到7，但＆＃34; 3＆＃34;是一个字符串，所以它给出后跟字符串的数字，即7后跟3或73

   x = "5" + 2 + 3;
   Output: 523

5是一个字符串，2和3是数字，但不是相互添加，而是彼此相邻显示 - 523

var x = 5 + "2" + 3;
Output: 523

5是一个数字，＆＃34; 2＆＃34;是一个字符串，3是一个数字，但不相互添加，而是彼此相邻显示 - 523

Answer 3

+从左到右，完成哪个操作取决于参数。如果两个参数都是数字，则执行加法。如果任何参数不是数字，则执行连接。因此5 + 2为7，但"5" + "2"为"52"（就像"a" + "b"是"ab"）。此外，5 + "2"和"5" + 2也都是"52"。然后，它类似地与52 + 3，52 + "3"和"52" + 3一起使用。

Answer 4

这与JavaScript具有松散类型的数据类型有关。在您的第一个示例中，所有数字都相加，因为它们都被视为整数。

在您的其他示例中，语句从左到右处理。所以数字+数字+字符串首先添加数字，然后尝试添加数字和字符串，这将使返回的结果成为字符串。

在number + string + number的情况下，当添加前两个操作数时，输出是一个字符串，所以当添加一个字符串和一个数字时，它将返回一个字符串。

进一步阅读：http://www.w3schools.com/js/js_datatypes.asp

JavaScript变量查询理解

4 个答案: