写作不易,如有帮助请点赞、收藏+关注,更多技术资料获取请点击
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多平台发布
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net