JavaScript隐式类型转换原理、优先级、规则及场景

写作不易，如有帮助请点赞、收藏+关注，更多技术资料获取请点击

Gitee

JavaScript中的类型转换是一项非常重要的功能，它使得在编写代码时更加灵活和便捷。其中，隐式类型转换是指在代码执行期间，JavaScript自动地将一个数据类型转换为另一个数据类型，而无需手动进行显式类型转换。

隐式类型转换的原理可以总结为以下几点：

• JavaScript是一门动态类型语言，变量的类型是在运行时确定的。在表达式中使用不同类型的变量时，JavaScript引擎会根据变量的值和上下文自动进行类型转换。
• JavaScript中的类型转换是通过内置的类型转换函数实现的。例如，Number()函数用于将一个值转换为数字类型，String()函数用于将一个值转换为字符串类型。
• 隐式类型转换的规则是由JavaScript引擎所遵循的，不同的引擎实现可能会有所不同。通常，JavaScript引擎会尽可能地按照开发者的意图进行转换，但也有一些隐式类型转换可能会导致一些意外的行为。
• 在JavaScript中，布尔类型值会被转换为数字类型进行运算。true会被转换为1，false会被转换为0。字符串类型的值会被尝试转换为数字类型进行运算，如果无法转换则会返回NaN。另外，在进行字符串和数字类型的加法操作时，数字类型的值会被转换为字符串类型，然后进行字符串的拼接。

需要注意的是，尽管JavaScript引擎能够自动执行隐式类型转换，但在编写代码时，最好还是尽可能地避免隐式类型转换，以减少代码的不确定性和错误。在需要进行类型转换的情况下，建议尽量使用显式类型转换函数来进行转换，以增加代码的可读性和可维护性。

优先级

在 JavaScript 中，隐式类型转换的优先级是根据数据类型和操作符来决定的。以下是一些常见的数据类型和操作符的优先级：

• 字符串拼接（+）：如果一个操作数是字符串，则另一个操作数将被强制转换为字符串。因此，字符串拼接的优先级高于其他所有操作符。
• 比较操作符（==、!=、<、>、<=、>=）：比较操作符比算术操作符的优先级要高。如果两个操作数的类型不同，则 JavaScript 会进行隐式类型转换，以使它们类型相同，并尝试进行比较。
• 算术操作符（+、-、、/、%）：算术操作符的优先级要低于比较操作符。(+)执行"字符串拼接"原则，（-、、/、%）则转为数字，进行数学计算。如果一个操作数是布尔值、null 或 undefined，另一个操作数是数字，则进行隐式类型转换为数字，如果另一个操作数是字符串，则执行"字符串拼接"原则。
• 逻辑操作符（&&、||）：逻辑操作符的优先级比算术操作符低。如果操作数是布尔值，则进行布尔逻辑运算。如果操作数是非布尔值，则进行隐式类型转换为布尔值。
• 三元运算符（?:）：三元运算符的优先级最低。如果第一个操作数为 true，则返回第二个操作数；否则返回第三个操作数。如果操作数类型不同，则进行隐式类型转换以使它们类型相同。

需要注意的是，虽然隐式类型转换可以使代码更简洁和方便，但也可能会导致一些难以发现的错误。因此，在开发 JavaScript 应用程序时，应尽可能避免依赖于隐式类型转换，尽可能使用显式类型转换和严格比较操作符（如 === 和 !==）。

转换规则

值	转换为字符串	转换为数字	转换为布尔值	转换为对象
undefined	"undefined"	NaN	false	throw TypeError
null	"null"	0	false	throw TypeError
true	"true"	1		new Boolean("true")
false	"false"	0		new Boolean("false")
""(空字符串)		0	false	new String("")
"1.2"(非空,数字)		1.2	true	new String("1.2")
"1.2a"(非空,非数字)		NaN	true	new String("1.2a")
"aaa"		NaN	true	new String("aaa")
0	"0"		false	new Number(0)
-0	"0"		false	new Number(-0)
NaN	"NaN"		false	new Number(NaN)
Infinity	"Infinity"		true	new Number(Infinity)
-Infinity	"-Infinity"		true	new Number(-Infinity)
1(无穷大,非零)	"1"		true	new Number(1)
{}	'[object Object]'	NaN	true
[]	""	0	true
[9]	"9"	9	true
["a"]	"a"	NaN	true
function(){}	'function(){}'	NaN	true

场景

逻辑判断和逻辑运算，如需深入学习，JavaScript权威指南(犀牛书)第三章-3.8类型转换，请前往Gitee获取

特例

console.log({} == {}) // false 比较引用地址
console.log({} == !{}) // false  !{}->false->0  {}->"[object Object]"->NaN
console.log({} == true) // false
console.log([] == []) // false 比较引用地址
console.log([] == ![]) // true []->""->0  ![]->false->0
console.log([] == 0) // true    []->""->0
console.log(![] == 0) // true   ![]->false->0
console.log({} == []) // 报错   ({}, ==[])->报错
console.log(NaN == NaN) // false
console.log(undefined == null) // true
console.log(null == null) // true
console.log(undefined == undefined) // true
console.log('2' > '10') // true  //首先将操作符两边都转为字符编码再进行比较 '2'.charCodeAt() //50  '10'.charCodeAt() // 49  所以 '2'>'10' 会返回true

console.log({} + {}) // "[object Object][object Object]"
console.log([1,2,3] + []) // "1,2,3" + "" ->"1,2,3" 
console.log([] + {}) // "" + "[object Object]" -> "[object Object]"

// 非变量形式
console.log({} + []) // 0 {}被当做一个块，并非{}转NaN，相当于执行 ({},+[])，返回值为小括号最后面的表达式的返回值
console.log({q:1} + []) // 0

// 变量形式
var a = {q:1};
console.log(a + []) // "[object Object]"

本文由mdnice多平台发布