JavaScript隐式类型转换详解：==、关系运算符与对象转换规则

前言

表达式'2'>'10'返回true的结果，可能让许多开发者感到困惑。在JavaScript中，当运算符两侧的数据类型不一致时，CPU无法直接计算，此时编译器会自动将两侧数据转换为相同类型后再进行运算。这种无需程序员手动干预、由引擎自动完成的转换机制，被称为隐式类型转换。

要理解'2'>'10'为何返回true，首先需要掌握JavaScript中隐式类型转换的核心规则。

隐式类型转换规则

1. == 操作符的强制类型转换规则

当字符串与数字进行比较时，字符串会被转换为数字，随后再进行数值比较。
当其他类型与布尔类型进行比较时，布尔值会先被转换为数字，然后应用其他比较规则。
null与undefined之间使用==比较时，结果为true；而它们与其他任何值进行比较时，结果均为false。
当对象与非对象进行比较时，对象会先调用ToPrimitive抽象操作转换为原始值，然后再进行比较。
如果任一操作值为NaN，则相等比较返回false（注意：NaN不等于NaN本身）。
当两个操作值都是对象时，比较的是它们是否指向内存中的同一个对象。如果指向同一对象，则返回true；否则返回false。

2. 递增递减操作符（前置与后置）、一元正负操作符

这些操作符适用于任何数据类型，其转换规则与Number()函数基本一致，具体表现如下：

若字符串包含有效数字字符，则先将其转换为数字（转换逻辑同Number()），然后执行加减1操作，变量由字符串变为数值。
若字符串不包含有效数字字符，则变量值被设为NaN，变量由字符串变为数值。
若为布尔值false，先将其转换为0，再执行加减1操作，变量由布尔值变为数值。
若为布尔值true，先将其转换为1，再执行加减1操作，变量由布尔值变为数值。
若为浮点数值，直接执行加减1操作。
若为对象，先调用对象的valueOf()方法，若返回值为原始类型则应用前述规则；若结果为NaN，则调用toString()方法后再应用规则。最终变量由对象变为数值。

3. 加法运算操作符

JavaScript中的加号既用于数值相加，也用于字符串连接，因此其规则分为两种情况：若两个操作值均为数值，遵循以下规则：

若任一操作数为NaN，则结果为NaN。
若为Infinity + Infinity，结果为Infinity。
若为-Infinity + (-Infinity)，结果为-Infinity。
若为Infinity + (-Infinity)，结果为NaN。
若为+0 + (+0)，结果为+0。
若为(-0) + (-0)，结果为-0。
若为(+0) + (-0)，结果为+0。

若至少有一个操作值为字符串，则遵循以下规则：

若两个操作值均为字符串，则将它们拼接。
若仅有一个操作值为字符串，则将另一个操作值转换为字符串，然后进行拼接。
若有一个操作数是对象、数值或布尔值，则调用其toString()方法获取字符串值，再应用上述字符串规则。对于undefined和null，分别调用String()显式转换为字符串。
由此可见，在加法运算中，只要有一个操作值为字符串类型，引擎就会将另一个操作值转换为字符串，最终执行字符串拼接。

4. 乘除、减号运算符、取模运算符

这些运算符专注于数值运算，因此具有共性：若任一操作值不是数值，则会被隐式调用Number()函数进行转换。

5. 逻辑操作符（!、&&、||）

逻辑非（!）操作符首先通过Boolean()函数将操作值转换为布尔值，然后取反。对于逻辑与（&&），若操作值非布尔值，则遵循以下转换规则：

若第一个操作数经Boolean()转换后为true，则返回第二个操作值；否则返回第一个操作值（注意：返回的是原始值，而非Boolean()转换后的值）。
若有一个操作值为null，则返回null。
若有一个操作值为NaN，则返回NaN。
若有一个操作值为undefined，则返回undefined。对于逻辑或（||），若操作值非布尔值，遵循以下规则：
若第一个操作值经Boolean()转换后为false，则返回第二个操作值；否则返回第一个操作值（注意：返回的是原始值，而非Boolean()转换后的值）。
对于undefined、null和NaN的处理规则与逻辑与（&&）相同。

6. 关系操作符（<, >, <=, >=）

与上述运算符类似，关系操作符可作用于任意类型，因此当非数值类型参与比较时，系统会进行隐式类型转换：

若两个操作值均为数值，则直接进行数值比较。
若两个操作值均为字符串，则比较它们对应的字符编码值。
若仅有一个操作值是数值，则将另一个操作值转换为数值，再进行数值比较。
若有一个操作数是对象，则调用valueOf()方法（若对象无此方法则调用toString()方法），得到的结果按前述规则执行比较。
若有一个操作值是布尔值，则将其转换为数值，再进行比较。注：NaN是一个特殊值，它不与任何类型的值相等（包括自身），且与任何类型的值进行大小比较时都返回false。

7. 其他值到字符串的转换规则

Null和Undefined类型：null转换为字符串"null"，undefined转换为字符串"undefined"。
Boolean类型：true转换为字符串"true"，false转换为字符串"false"。
Number类型的值直接转换，但极小或极大的数字会使用指数形式表示。
Symbol类型的值直接转换，但仅允许显式强制类型转换，使用隐式强制类型转换会产生错误。
对于普通对象，除非自定义了toString()方法，否则默认调用Object.prototype.toString()返回内部属性[[Class]]的值，如"[object Object]"。若对象拥有自定义toString()方法，则调用该方法并使用其返回值。

8. 其他值到数字值的转换规则

Undefined类型的值转换为NaN。
Null类型的值转换为0。
Boolean类型的值：true转换为1，false转换为0。
String类型的值转换逻辑同Number()函数：若包含非数字字符则转换为NaN，空字符串转换为0。
Symbol类型的值不能转换为数字，会抛出错误。
对象（包括数组）首先被转换为相应的基本类型值；若返回的是非数字的基本类型值，则再遵循上述规则将其强制转换为数字。

为了将值转换为相应的基本类型值，抽象操作ToPrimitive会首先（通过内部操作DefaultValue）检查该值是否有valueOf()方法。若存在且返回基本类型值，则使用该值进行强制类型转换。若不存在，则使用toString()的返回值（如果存在）进行强制类型转换。

如果valueOf()和toString()均不返回基本类型值，则会产生TypeError错误。

9. 其他值到布尔类型的值的转换规则

以下值被视为假值（falsy）：undefined、null、false、+0、-0、NaN以及空字符串""。

假值的布尔强制类型转换结果为false。从逻辑上讲，假值列表之外的所有值均为真值（truthy）。

总结

null与undefined相等，且等于自身。
false、0、''（空字符串）和[]（空数组）在==比较中相等。
NaN和{}（普通对象）与任何值都不相等，包括它们自己。

NaN == NaN  //false
NaN == undefined //false
NaN == false //false
NaN == null //false
NaN==[]  //false
NaN==''  //false
NaN=={}  //false
false == false  //true
false == undefined  //false
false == null  //false
false == []  //true
false == {}  //false
false == ''  //true
undefined == undefined //true
undefined == null  //true
undefined == false //false
undefined == [] //false
undefined == {}  //false
undefined == '' //false
null == null   //true
null == NaN  //false  
null == []  //false
null == {}  //false
null == undefined  //true
0==false    //true   
0 == []  //true
0 == {}  //false
0 == null  //false
0 == undefined //false
0 == '' //true
0 == NaN //false
false == []  //true
false == {}  //false
false == null  //false
false == undefined  //false
false == ''  //true
false == NaN  //false
[]=={} //false
Boolean([])   //true
Boolean({})   //true
Boolean(null)  //false
Boolean(NaN) //false
Boolean(undefined)  //false
Boolean('')  //false
Boolean(0)  //false
Number(undefined)  //NaN
Number({})    //NaN
Number(NaN)  //NaN
Number('')  //0
Number([])    //0
Number(false)  //0
Number(null)  //0

'2'>'10'为什么是true？

基于上述转换规则，我们可以解答这道题目。首先定位到关系操作符，其规则指出：若两个操作数都是字符串，则比较字符串对应的字符编码值。按照常规思维，人们可能认为会先转为数字再比较（即2>10返回false），但事实并非如此。这体现了JavaScript的特殊性。JavaScript中使用charCodeAt()函数来获取字符编码值。

console.log('2'>'10') // true
//首先将操作符两边都转为字符编码再进行比较
'2'.charCodeAt() //50
'10'.charCodeAt() // 49
// 所以 '2'>'10' 会返回true

我们再来看几道有趣（且容易出错）的题目。

1. 复杂数据类型转string

先调用valueOf()方法获取原始值，如果原始值不是string类型，则调用toString()方法转成string。

console.log([1,2] == '1,2')  //true
[1,2].toString() // '1,2'
var a = {}
console.log(a.toString()) // "[object Object]"
console.log(a == "[object Object]") //true

解析：

先将左边数据类型转换为string，此时两边均为字符串，再比较字符编码值。

2. 逻辑非隐式转换与关系运算符隐式转换

console.log([] == 0) // true
console.log(![] == 0) // true 
console.log([] == ![])  // true  是不是觉得很离谱？？？
console.log([] == [])  //false
console.log({} == !{}) //false
console.log({} == {})  // false

看到这些结果是否感到惊讶？我也曾对此感到震惊，这确实是一个深坑。玩笑归玩笑，让我们深入探讨其背后的原理。

解析：

console.log([] == 0) // true
/*关系运算符（3）如果只有一个操作值是数值，则将另一个操作值转换为数值，进行数值比较
原理：
1.[].valueOf().toString() 得到字符串""
2.将""转为数字Number("") 得到数字0
所以 [] == 0 成立
*/
console.log(![] == 0) // true 
/*
原理：与上面类似，只是逻辑运算符优先级高于关系运算符，所以先执行![] 得到false
false == 0 成立
*/

console.log([] == ![])  // true  
/*
上面我们知道了 []==0 ![] == 0 
所以 [] == ![]
*/
console.log([] == [])  //false
/*
引用数据类型数据存在堆中，栈中存储的是它们的地址，两个[]地址肯定不一样，所以是false
*/

console.log({} == !{}) //false
/*
原理：
1. {}.valueOf().toString()  得到"[object,Object]"
2. !{} == false
3. Number("[object,Object]") // NaN
     Number(false) //0
4. NaN != 0
*/
console.log({} == {})  // false
/*
引用数据类型数据存在堆中，栈中存储的是它们的地址，所以肯定不一样
*/

JavaScript真值表

以上就是'2'>'10'==true?解析JS如何进行隐式类型转换的详细内容，更多关于JS隐式类型转换的资料请关注本站其它相关文章！

深入解析JavaScript隐式类型转换：从'2'>'10'到复杂对象比较

前言