简单了解 JS 中的类型转换

JS 中的变量有多种类型值，包括 null 、undefined、number、string、boolean、symbol 等基本类型和 object 对象类型。这些类型值之间的转换十分复杂，往往伴随着隐式强制类型转换，理解它们各自之间的转换规则有助于我们在日常开发中避坑，写出更好的代码。

undefined 和 null

使用 == 比较两个值时如果值的类型不同会自动进行类型转换，相对应的 === 则会严格比较类型和值。也许你看过下面的代码

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

在 JS 中，undefined 和 null 都会被认为是 falsey 假值，因此使用宽松相等运算符 == 的结果是 true，但如果是严格相等运算符 === 那就是 false 了。

转换为 number

从其他类型转换为 number 类型有三种方法，分别是Number(x)，+x 和 x - '0'。其中使用 Number 函数直接转换属于显式转换，另外两种是隐式转换。我们可以在 Chrome 的控制台验证各个类型转换的结果

+null  // 0
+undefined // NaN
+'4'  // 4
+'string'  // NaN
+false  // 0
+true  // 1
+Symbol('symbol') // Uncaught TypeError: Cannot convert a Symbol value to a number
+{ say: 'hello' }  // NaN
+[]  // 0
+[1]  // 1
+[1, 2]  // NaN

你可以多试试其他引用类型，总结一下就是：null 转换数字的结果是 0，undefined
、字符串、对象被认为是非数字，结果为 NaN ；布尔值 true 转为 1，false 转为 0；对于数组，比较特殊，空数组是 0，只有一个元素并且能够被转为数字类型的值，就转换，否则都是 NaN 。

转换为字符串

从其它类型转换为字符串也有三种方式

• String(s)
• s + ''
• 除了 null 和 undefined 外，有构造函数的可以调用 toString()

同样地，我们在控制台输入表达式来验证下

var s1 = Boolean(0);
var s2 = Boolean(1);
var s3 = new Date();
var s4 = "12345";
var s5 = 12345;
var s6 = null;
var s7 = undefined;
var s8 = Symbol('hello')
var s9 = [1, 2]
var s10 = []
var obj = {a: 6}

String(s1)  // false
String(s2)  // true
String(s3)  // Sun Apr 19 2020 15:52:42 GMT+0800 (中国标准时间)
String(s4)  // 12345
String(s5)  // 12345,
String(s6)  // null
String(s7)  // undefined
String(s8)  // Symbol(hello)
String(s9)  // 1, 2
String(s10)  // ''
String(obj) // [object Object]

可以看到，数字转换为字符串一般是变成加引号的字符串格式，而对于 Boolean 构造函数来说，则是根据构造的值进行转换；null 和 undefined 转换为字符串带了引号；而 object 对象类型则是显示 [object Object]，对于个别对象类型如日期，则是转换为时间格式，而如果是空数组，则为空字符串，否则为数组元素的字符串形式。

转换为布尔值

如果要把基本类型都转布尔值的话，结果又会如何呢？先来看看通过哪些方式可以转换为 bool 值：

• Boolean() 函数
• if (表达式)之类的隐式转换

同样在 Chrome 的控制台自己输入查看下效果：

Boolean(null)  // false
Boolean(undefined)  // false
Boolean(false)  // false
Boolean(true)  // true
Boolean(0)  // false
Boolean(11)  // true
Boolean(-0)  // false
Boolean(NaN)  // false
Boolean('string')  // true
Boolean('')  // fasle
Boolean({}) // true
Boolean([]) // true
Boolean(Symbol('hello')) // true
Boolean(new Object())  // true

结果是，对于转布尔值，除了 null，undefined，+0，-0，NaN，''，false 转换为 false，其它所有值都转换为 true，包括引用类型。

对象的转换规则

上述这些转换中涉及到对象，而对象在转换类型的时候有它自己的一套规则，一般是下面这几个步骤：

• 如果重写了内部 [[ToPrimitive]] 函数，则优先调用，否则
• 调用 valueOf()，如果转换结果是原始类型值，则返回
• 调用 toString() ，如果转换为原始类型值，则返回
• 如果以上都不行，则报错

总结

JavaScript 的类型转换知识点很多，各种类型之间的互相转换要熟悉，有一些坑要特别注意，比如布尔类型的隐式类型转换，经常应用在日常开发的 if 语句中，对于 null 和 undefined 这两个特殊值之间转换处理也需了解，掌握好类型转换可以应用在真实开发中。

如有错误，请予指正，十分感谢，欢迎交流讨论。

（完）