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 这两个特殊值之间转换处理也需了解,掌握好类型转换可以应用在真实开发中。
如有错误,请予指正,十分感谢,欢迎交流讨论。
(完)
网友评论