javaScript-数据类型的转换

[dark9wesley]

将值从一种类型转换为另一种类型就是所谓的类型转换。

ES6前，JS共有6种数据类型，分别是：

• String
• Number
• Boolean
• Undefined
• Null
• Object

基本数据类型之间的转换

基本数据类型转Boolean

在JS中，可以通过Boolean函数来将其他类型转换为Boolean，目前有6种值会被转换为false，分别是：

1. Boolean() 不传参数，返回false
2. false
3. 空字符串
4. 0
5. undefined
6. null

其余都会被转换为true

基本类型转Number

在JS中，可以通过Number函数来将其他类型转换为Number，如果无法转换为Number，则返回NaN（Not a Number）。

根据规范，如果Number函数不传参，就会返回+0。如果传了参数，就会调用内部的ToNumber方法。

ToNumber方法对不同的类型有以下几种表现：

参数类型	结果
Undefined	NaN
Null	0
Boolean	true为1，false为0
Number	返回与之前相等的值
String	看下面

对于String类型，Number方法会尽力将它转换为一个整数或浮点数，并忽略所有前置的0，但如果它其中包含非数字，就会被转换为NaN。

由于Number方法比较严格，所以对于字符串还可以使用parseInt和parseFloat来进行转换。

parseInt只解析整数，parseFloat则可以解析整数和浮点数，都会跳过任意数量的前导空格，尽可能转换更多数值字符，但如果第一个非空格字符是非数字，将返回NaN。

基本类型转String

在JS中，可以通过String函数来将其他类型转换为String。

根据规范，如果String函数不传参，就会返回空字符串。如果传了参数，就会调用内部的ToString方法。

ToString方法对不同的类型有以下几种表现：

参数类型	结果
Undefined	'undefined'
Null	'null'
Boolean	true返回 "true"。false返回"false"
String	返回与之前相等的值
Number	返回字符串形式的数值

对象类型转基本类型

对象类型转Boolean

所有的引用类型都会被转换为true

对象类型转Number和string(重点)

对象类型转Number和String都是通过待转换对象本身的两个方法来完成，分别是toString和valueOf。

toString

toString方法返回调用它的对象的字符串表示。

源toString方法位于Object.prototype上，这个方法会根据调用它的对象内部的[class]属性，返回由 "[object " 和 class 和 "]" 三个部分组成的字符串。

举个例子；

console.log(Object.prototype.toString.call({})) // "[object Object]"
console.log(({}).toString === Object.prototype.toString) // true

可以看出当调用对象的toString方法时，其实调用的就是Object.prototype上的toString方法。

但JS中的很多类都根据自身的特性，改写了toString方法，主要有以下表现：

类	表现
Array中的toString	将数组中的每个元素都转为字符串，并在元素间添加逗号，合并为一个字符串后返回。
function中的toString	返回函数体字符串
RegExp中的toString	返回一个表示正则表达式直接量的字符串
Date中的toString	返回一个可读的日期和时间字符串

举个例子：

console.log(({}).toString()) // [object Object]

console.log([].toString()) // ""
console.log([0].toString()) // "0"
console.log([1, 2, 3].toString()) // "1,2,3"
console.log((function(){var a = 1;}).toString()) // "function (){var a = 1;}"
console.log((/\d+/g).toString()) // "/\d+/g"
console.log((new Date(2010, 0, 1)).toString()) // "Fri Jan 01 2010 00:00:00 GMT+0800 (CST)"

valueOf

valueOf返回调用它的对象本身。

Array、function、RegExp简单继承了这个默认的方法，会返回它们自己本身。

但Date是个例外，当Date调用valueOf方法时，会返回日期的事件戳形式。

举个例子：

var date = new Date(2017, 4, 21);
console.log(date.valueOf()) // 1495296000000

对象类型转Number具体过程(重点)

1. 如果对象具有valueOf方法，且返回一个原始值，则将这个原始值转换为数字并返回。
2. 否则调用toString方法，如果返回了一个原始值，就将这个值转换为数字并返回。
3. 否则报错

举个例子：

console.log(Number({})) // NaN
console.log(Number({a : 1})) // NaN

console.log(Number([])) // 0
console.log(Number([0])) // 0
console.log(Number([1, 2, 3])) // NaN
console.log(Number(function(){var a = 1;})) // NaN
console.log(Number(/\d+/g)) // NaN
console.log(Number(new Date(2010, 0, 1))) // 1262275200000
console.log(Number(new Error('a'))) // NaN

对象类型转String具体过程(重点)

1. 如果对象具有toString方法，且返回一个原始值。则将这个值转换为字符串并返回。
2. 否则调用valueOf方法，如果返回了一个原始值，就将这个值转换为字符串并返回。
3. 否则报错

举个例子：

console.log(String({})) // "[object Object]"

console.log(String([])) // ""
console.log(String([0])) // "0"
console.log(String([1, 2, 3])) // "1,2,3"
console.log(String(function(){var a = 1;})) // "function(){var a = 1;}"
console.log(String(/\d+/g)) // "/\d+/g"
console.log(String(new Date(2010, 0, 1))) // "Fri Jan 01 2010 00:00:00 GMT+0800 (中国标准时间)"
console.log(String(new Error('a'))) // "Error: a"

隐式类型转换

一元操作符 +

当 + 运算符作为一元操作符的时候，其实就相当于调用了Number方法来进行转换。

举个例子：

console.log(+'1'); // 1
console.log(+[]);  // 0
console.log(+['1']); // 1
console.log(+['1', '2', '3']); // NaN
console.log(+{}); // NaN
console.log(+ new Date()) //1621838673336

二元操作符 +

当执行 + 运算的时候, 根据规范，遵循以下几个规则：

1. 如果任一方为对象，则先将该对象转换为基本类型

除了Date对象会遵循对象转String过程，其余都遵循对象转Number过程。

1. 只要有任一方为字符串，就会将双方转换为字符串，并执行拼串操作。
2. 如果没有一方为字符串，就会将双方转换为数值，并返回运算结果。

举个例子：

console.log(null + 1); //1
console.log([] + []); // ""空字符串
console.log({} + []); // "[object Object]"

==相等

"==" 用于比较两个值是否相等，当要比较的两个值类型不一样的时候，就会发生类型的转换。

"==" 遵循以下规则：

1. 类型相同时，完全相等返回true，否则返回false。

注意：NaN与NaN会返回false，+0与-0返回true，对象的引用地址相同则返回true。

2. 类型不相同时，会将非number类型转换为number类型，再进行比较，完全相等返回true，否则返回false。

举个例子：

console.log('1' == 1); //true 
console.log(true == '2') //false
console.log(42 == ['42']) //true
console.log(false == undefined) //false
console.log(false == []) //true
console.log([] == ![]) //true

以上的例子都符合第二条规则，类型不同，就会都先转换为number类型，再进行比较。

参考

JavaScript深入之头疼的类型转换(上)
JavaScript深入之头疼的类型转换(下)