JavaScript中加号操作符细节

发布于 大漠

JavaScript是一门非常优秀的语言。我喜欢它的灵活性,因为可以使用它做很多事情,比如说改变变量的类型,可以给对像添加方法或属性,也可以在不同的变量类型上使用操作符等等。

然而,要灵活的用好JavaScript还是需要付出一定的代价。开发人员需要了解如何使用不同的操作符处理不同类型,比如加法(+)、等于或全等于(=====),不等于或不全等(!=====)等。同时许多操作符都可以使用自己的方式来处理类型的转换。

加法操作符

最常用的操作符之一是加法操作符:+。这个操作符是用来连接字符串和数字。

规则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可以使用objectarraynull或者undefined上使用操作符。接下来,我们看看使用这些的规则和细节。

使用规则

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

operand + operand = result  
  • 如果操作符数中有一个对象,它将转换为原始值(stringnumberboolean)
  • 如果操作符数中有一个字符串,第二个操作数将转换成字符串,并且连接在一起转换成一个字符串
  • 在其它情况之下,两个操作数转换为数字并且将执行加法运算

对象转换的规则:

  • 如果对象类型是一个Date,可以使用toString()方法
  • 在其它情况下使用valueOf()方法,它将返回一个原始值
  • 如果valueOf()方法不能将它返回一个原始值,可以使用toString()方法。而这种情况大部分情况下都会发生

如果两个操作数是原始类型,那么操作符将会作检查,如果至少一个操作数是字符串的话,将会把它们当字符串连接在一起。在其它情况之下,只会把操作数当作数字,并且做加法运算。

学习示例

下面的示例帮助你更好的理解加法操作符,同时能了解一些更复杂情况之下如何时转换。

示例1: 数字和字符串

var result = 1 + "5"; //"15"
  • 1 + "5":根据规则2,第二个操作数是一个字符串,那么数字1将会变成字符串"1"
  • "1" + "5": 字符串连接
  • "15"

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

示例2: 数字和数组

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

  • [1,3,5] + 1: 根据规则一,数组[1,3,5]将原始值转换出来"1,3,5"
  • "1,3,5" + 1: 根据规则二,数字1将会转换成字符串"1"
  • "1,3,5" + "1": 字符串连接
  • 1,3,51

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

示例3: 数字和布尔值

var result = 10 + true; // 11
  • 10 + true: 根据规则三,布尔值true将转换为数字1
  • 10 + 1: 数字做加法运算
  • 11

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

示列4:数字和对象

var result = 15 + {};//"15[object Object]"
  • 15 + {}: 第二个操作数是一个对象,根据规则一和对象转换为字符串[object Object]
  • 15 + "[object Object]": 根据规则二,数字15转换为字符串"15"
  • "15" + "[object Object]": 字符串连接
  • "15[object Object]"

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

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

示例5: 数字和null

var result = 8 + null; //8
  • 8 + null: 因为操作数没有字符串,根据规则三,null将转换为数字0
  • 8 + 0: 两个数字做加法运算
  • 8

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

示例6: 字符串和null

var result = "queen" + null; // "queennull"
  • "queen" + null: 因为第一个操作数是一个字符串,根据规则二,null将转换为一个字符串"null"
  • "queen" + "null": 字符串连接
  • "queennull"

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

示例7: 数字和undefined

var result = 12 + undefined; // NaN
  • 12 + undefined: 因为没有任何一个操作数是字符串,根据规则三,undefined将转换为一个数字NaN
  • 12 + NaN: 做数字加法运算
  • 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"

总结

为了避免潜在的问题,不在对旬上直接使用加法操作符,除非明确使用toString()valueOf()方法。

如上面的示例所示,上面有一些特列的案例。简单点说,如果开发人员知道确切的数据类型在做加法操作的时候,知道场景的转换规则,将会帮助你减少出错的概率,让你编码也更开心。

本文根据@Dmitri Pavlutin的《JavaScript addition operator in details》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://rainsoft.io/javascriptss-addition-operator-demystified/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/javascript/javascriptss-addition-operator-demystified.htmlAfterpay