('b' + 'a' + + 'a' + 'a').toLowerCase()输出banana的剖析

前言

今天逛微博的时候看到有个博主发的一个问题，代码如下:

('b' + 'a' + + 'a' + 'a').toLowerCase()
// "banana"

当时第一反应是JavaScript会报错，但是并没有。然后就来了兴趣

剖析

后来仔细一想，估计和JavaScript运算符优先级、隐式转化有关系。

于是先去MDN查了一下JavaScript运算符优先级

我先把上面代码用到的运算符和优先级列举出来：

优先级	运算类型	关联性	运算符
20	圆括号	n/a	`(...)`
16	一元正号	从右至左	`+ ...`
13	加法	从左至右	`... + ...`

OK，了解了上面的运算符后，我们现在来拆分下上面的代码

首先把toLowerCase去掉，这个函数没啥用，只是起到一个迷惑的作用。

'b' + 'a' + + 'a' + 'a'
// to 
'b' + 'a' + (+ 'a') + 'a'

这就是主要的，因为一元正号的优先级是比加法高的，所以这里用括号标注一下。

现在我们来看下一元正号的说明：

一元正号运算符位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。它可以将字符串转换成整数和浮点数形式，也可以转换非字符串值 true，false 和 null。小数和十六进制格式字符串也可以转换成数值。负数形式字符串也可以转换成数值（对于十六进制不适用）。如果它不能解析一个值，则计算结果为 NaN。

注意看上面的这段话：如果操作数不是一个数值，会尝试将其转换成一个数值和如果它不能解析一个值，则计算结果为 NaN

那上面代码的+ 'a'就是会变成NaN，过程如下：

'b' + 'a' + (+ 'a') + 'a'
// to
'b' + 'a' + Number('a') + 'a'
// to
'b' + 'a' + NaN + 'a'

是不是清晰很多了，然后又涉及到了隐式转化，加号在JavaScript规则里有一条是，当操作符有一个是字符串类型时，另一个也要转成字符串类型。也就是说NaN要进行toString。那NaN在执行是什么呢？在ECMA-262中有说明，如图：

Imgur

也就是说NaN会转成"NaN"。所以上面的代码就变成了这样：

'b' + 'a' + NaN + 'a'
// to
'b' + 'a' + "NaN" + 'a'

最终在调用toLowerCase函数转成小写，就变成了banana

alo7 / blog-FE

('b' + 'a' + + 'a' + 'a').toLowerCase()输出banana的剖析 #17

前言

剖析