你想知道的JavaScript类型转换

117 阅读4分钟

「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战

前一段时间,我的部门同事问了我一个问题 —— '2' == true 吗?我当时立马就知道这是关于隐式转换的。奈何啊,当前不太重视隐式转换这方面,只是一知半解,导致我没法准确知道答案,随机一蒙,运气不好给梦错了。因此,我下定决心要搞明白JavaScript的类型转换。

== 和 === 的比较

  1. 相同点 == 和 === 运算符都是用于比较两个值是否相等。两个运算符都允许任意类型的数据进行比较,如果两边数据类型相等就返回 true,否则就返回 false。

  2. 不同点 == 是进行弱比较,不同数据类型的比较会优先进行数据类型转换,===是严格比较,先进行数据类型比较,如果数据类型相同,然后再进行弱比较。

隐式转换

数字与字符串之间的比较

开始之前,我们先看一下下面的几种情况

    1 == '2' // false

    -1 == '1' // false

    '-0' == 0 // true

在给出结论之前,我们先进行大胆的猜测一下,字符串与数字进行比较,无非就是几种情况:

  • 先转换为数字,再进行比较

  • 先转换为字符串,再进行比较

  • 先转换为布尔值,再进行比较

我们先看 1 == '2',结果为false,说明第三种猜想是错的;因为数字1和字符串2转换为boolen值都是true;接下来我们再看 '-0' == 0,结果为true,所以我们得出结论:数字与字符串进行比较的时候,会先将字符串转换为数字,然后再使用转换后的值进行比较

字符串与布尔值之间的比较

同样开始之前,我们先看一下下面的几种情况

    1 == true // true
    
    '2' == true // false
    
    '-1' == true // false

我们同样大胆的进行猜测一下,字符串与布尔值之间的比较,无非有这几种情况:

  • 先转换为布尔值,再进行比较

  • 先转换为字符串,再进行比较

  • 先转换为数字,再进行比较

首先,我们来看 1 == true,结果为 true,说明第一种猜想是错的,而且必然不是转换为字符串进行比较,因为我们通过 ture.toString() 方法得知,true转换为字符串为 'true',因此我们得出结论:字符串与布尔值之间的比较,会将布尔值先转换为数字,然后再按照字符串与数字进行比较的方式进行比较

数字与布尔值之间的比较

同样,基于以上结论,我们可以顺带得出一个结论,那就是数字与布尔值之间的比较,会将布尔值转换为数字进行比较

到了这里,我们就可以对我同事提出的问题作出解答了,'2' == true,首先会将true转换为1,这时就是 '2' == 1,这时又会将'2'转换为2,2 == 1,所以答案是 false。

基本类型与引用类型的比较

因为情况比较复杂,我就不进行一一分析了,这里我就直接给出结论:引用类型与字符串或者数字类型之间的比较,引用类型会先通过toString方法转换为原始值,然后在进行比较

特殊情况

对于 null 和 undefined 来说,这两兄弟比较特殊,除了他们之间相等,跟其它的任何数据类型都不想等。换句话说,null == null、undefined == undefined 和 null == undefined 之外,nul 和 undefined和任何值都不想等。

显示转换

  1. Number 和 toString 方法

Number方法会将其它类型的数据转换为数字类型

  • Number(value)

  • Number.parseInt(vlaue)

  • Number.parseFloat(value)

toString 方法会将其它类型的数据转换为字符串类型

  1. +运算符和其它算术运算符(- * /)
  • 字符串和任何数据类型相加,采用字符串拼接的方式,最终结果为字符串

  • 数字与除字符串以外的基本数据类型相加,将其它数据类型先转换为数字类型,然后执行加法

  • 数字与引用类型相加,将引用类型先转换为字符串,然后进行字符串拼接的方式

  • 其它运算符,都是将数据类型转换为字符串类型

参考表

在最后, 提供一张数据类型转换的图表,希望对大家有所帮助。

image.png