JavaScript 中的强制类型转换

JavaScript 作为一个动态编程语言,其中的数据类型会随着程序运行而动态改变。对于很多人来说,强制类型转换很容易造成程序出错,而要记住所有的转换方式又是一件不那么容易的事情。比如下面这张 JavaScript 真值表

JavaScript 中的强制类型转换_第1张图片

类型转换发生在静态类型语言的编译阶段,而强制类型转换则发生在动态类型语言运行时。

JavaScript 提供了一系列强制类型转换的方法

var str = String(10);  // "10"
var num = Number('10');  // 10
var bool = Boolean('1');  // true

还有下面这种强制类型转换,就不那么明显了

var a = 10 + '';  // "10"

接下来介绍的就是第二种强制类型转换,只有了解这些转换的规则,就能够避免很多强制类型转换的“坑”。

首先,我们先来了解下 == 和 === 的区别,== 和 === 都是等性操作符,而 == 表示相等,而 === 表示完全相等。== 会强制转换两个值的类型来比较,而 === 不会。

接下来我们来看一组比较特殊的数值,undefined 和 null,它们的名字既是类型也是值。

undefined == null;  // true
undefined === null;  // false

可以看到 undefined 和 null 在 == 下面会返回 true,那是因为 == 只会比较值,而不会比较其中的类型。

在 === 中,也会有特殊情况,比如 0 和 NaN。

NaN === NaN;  // false
+0 === -0;  // true

在 ES6 中,提供了 Object.is 方法来更好的处理两个值相等的情况

Object.is(NaN, NaN);  // true
Object.is(+0, -0);  // false

除了上面的值以外,还有字符串、数字、布尔型之间的相等转换规则:

  1. 字符串与数字比较,会转换字符串为数字
  2. 布尔型与其他类型比较,会转换成数字
  3. 数字与字符串与对象比较,都会转换成对象

在下面的强制转换中,根据 ToBoolean 规则,它会进行布尔值的强制类型转换,所以 ![] 变成了 false,而 [] == false,所以就会返回 true。

[] == ![]  // true

之后再来看一个栗子

[] + {};  // "[Object Object]"
{} + []  // 0

第一行代码中,{} 会被当成一个值([object, Object])来处理,而 [] 会转换为 “”。而第二行代码中,{} 被当做一个空的代码块,而 [] 被强制转换为了 0,所以才会出现上面这样的情况。

在平常的习惯中,我们应该尽可能的使用 === 而不是 ==。同时,可以选择使用 typeof 或者 ts 来避免强制类型转换的错误。

感谢阅读!

你可能感兴趣的:(JavaScript)