javascript中的+运算符

不念不忘少年蓝@ 2022-06-08 09:39 129阅读 0赞

## 加法操作符+ ##

### 规则1:字符串连接 ###

// string + string = string (concatenation)
    var result = "Hello, " + "World!";
    console.log(result); // "Hello, World!"

### 规则2：数字加法运算 ###

// number + number = number (addition)
    var result = 10 + 5;  
    console.log(result);// 15

JavaScript可以使用object、array、null或者undefined上使用操作符。接下来，我们看看使用这些的规则和细节。

### 使用规则 ###

来看看下面的一些示例，了解JavaScript中如何通过操作符转换一些类型：

operand + operand = result

*  如果操作符数中有一个对象，它将转换为原始值(string、number或boolean)
 *  如果操作符数中有一个字符串，第二个操作数将转换成字符串，并且连接在一起转换成一个字符串
 *  在其它情况之下，两个操作数转换为数字并且将执行加法运算

**对象转换的规则：**

*  如果对象类型是一个Date，可以使用toString()方法
 *  在其它情况下使用valueOf()方法，它将返回一个原始值  
    如果valueOf()方法不能将它返回一个原始值，可以使用toString()方法。而这种情况大部分情况下都会发生
 *  如果两个操作数是原始类型，那么操作符将会作检查，如果至少一个操作数是字符串的话，将会把它们当字符串连接在一起。在其它情况之下，只会把操作数当作数字，并且做加法运算。

### 学习示例 ###

**示例1: 数字和字符串**

var result = 1 + "5"; //"15"

1.  1 + “5”：根据规则2，第二个操作数是一个字符串，那么数字1将会变成字符串”1”
2.  “1” + “5”: 字符串连接
3.  “15”

第二个操作数是一个字符串。第一个操作数把number转换成string，然后将它们连接在一起。

**示例2： 数字和数组**

var result = [1,3,5] + 1; // "1,3,51"

1.  \[1,3,5\] + 1: 根据规则一，数组\[1,3,5\]将原始值转换出来”1,3,5”
2.  “1,3,5” + 1: 根据规则二，数字1将会转换成字符串”1”
3.  “1,3,5” + “1”: 字符串连接
4.  1,3,51

第一个操作数是一个数组array，它将值转换为字符串，第二个操作数是数字，它将值转换为字符串，然后将两个字符串连接在一起。

**示例3： 数字和布尔值**

var result = 10 + true; // 11

1.  10 + true: 根据规则三，布尔值true将转换为数字1
2.  10 + 1: 数字做加法运算
3.  11

因为两个操作数都不是字符串，布尔值将转换为数字符，然后作数字加法运算。

**示列4：数字和对象**

var result = 15 + {};//"15[object Object]"

1.  15 + \{\}: 第二个操作数是一个对象，根据规则一和对象转换为字符串\[object Object\]
2.  15 + “\[object Object\]”: 根据规则二，数字15转换为字符串”15”
3.  “15” + “\[object Object\]”: 字符串连接
4.  “15\[object Object\]”

第二个操作数是一个对象，它将转换为一个字符串。因为valueOf()方法返回的是对象本身，而不是一个原始值，使用toString()方法，它返回的是一个字符串。

第二个操作数转换之后是一个字符串，此时数字也将转换为一个字符串，然后两个操作数做字符串连接。

**示例5： 数字和null**

var result = 8 + null; //8

1.  8 + null: 因为操作数没有字符串，根据规则三，null将转换为数字0
2.  8 + 0: 两个数字做加法运算
3.  8

如果操作数不是对象或字符串时，null将转换为数字，然后做数字的加法运算。

**示例6: 字符串和null**

var result = "queen" + null; // "queennull"

1.  “queen” + null: 因为第一个操作数是一个字符串，根据规则二，null将转换为一个字符串”null”
2.  “queen” + “null”: 字符串连接
3.  “queennull”

因为第一个操作数是一个字符串，所以null将转换为一个字符串”null”，然后两个操作数做字符串连接。

**示例7： 数字和undefined**

var result = 12 + undefined; // NaN

1.  12 + undefined: 因为没有任何一个操作数是字符串，根据规则三,undefined将转换为一个数字NaN
2.  12 + NaN: 做数字加法运算
3.  NaN

因为没有操作数是对象或字符串，undefined将转换为NaN。两个数字做加法运算，因为任何一个数字和NaN做加法运算，其值都等于NaN

console.log(1 + "5"); // "15" 
    console.log([1, 3, 5] + 1); //"1,3,51" 
     console.log(10 + true); //11 
    console.log(15 + {}); //"15[object Object]" 
    console.log(8 + null); // 8 
    console.log("queen" + null); // "queennull" 
    console.log({} + null); // "[object Object]null"
    console.log(12 + undefined); //NaN
    console.log("w3cplus" + undefined);//"w3cplusundefined" 
    console.log([] + null); // "null" 
    console.log([] + undefined); // "undefined" 
    console.log([] + "w3cplus"); // "w3cplus"

著作权归作者所有。  
商业转载请联系作者获得授权,非商业转载请注明出处。  
原文: [https://www.w3cplus.com/javascript/javascriptss-addition-operator-demystified.html][https_www.w3cplus.com_javascript_javascriptss-addition-operator-demystified.html] © w3cplus.com

[https_www.w3cplus.com_javascript_javascriptss-addition-operator-demystified.html]: https://www.w3cplus.com/javascript/javascriptss-addition-operator-demystified.html