Black-Hole's Blog

In love

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

Posted at — Aug 15, 2019

前言

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

('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