一、常见类型转换方法
1. parseInt()
简介
parseInt() 方法可以根据给定的进制数把一个字符串解析成整数。
parseInt()在转换字符串时：
- 它会忽略字符串前面的空格，直到找到第一个非空格字符。
- 如果第一个非空格字符不是数字字符或符号，就会返回NaN。
- 如果第一个非空格字符是数字字符，它会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。
在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：
- 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
- 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。故永远都要明确给出radix参数的值。
- 如果字符串 string 以其它任何值开头，则基数是10 (十进制)。
既有 全局方法paresInt(),也有ES6的 Number.paresInt().
语法
parseInt(string[, radix])
Params：
-
string:
被解析的值。如果不是一个字符串，则将其转换为字符串。字符串开头的空白符将会被忽略。 -
radix:
一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。总是指定该参数可以保证结果可预测。当忽略该参数时，不同的实现环境可能产生不同的结果。
返回值：
返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN
示例:
parseInt('1234blue',10);//1234
parseInt('',10);//NaN
parseInt('0xA',16);//10
parseInt(22.5, 10);//22
parseInt('10',2);//2
parseInt('10',8);//8
parseInt('10',10);//10
parseInt('10',16);//16
2. parseFloat()
简介
parseFloat() 函数解析一个字符串参数并返回一个浮点数。
pareFloat()在解析字符串时：
- 与paresInt()类似，parseFloat()也是从第一个字符开始解析，一直遇到第一个无效的浮点数字符为止。
- 如果在解析过程中遇到了除了正负号(+或-),数字(0-9),小数点,或者科学记数法中的指数(e或E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数。
- 字符串中的第一个小数点是有效的，第二个小数点就是无效的了。
- 如果字符串包含的是一个可解析为整数的数，即没有小数点或小数点后面为0,则会得到整数。
与parseInt()的区别：
| 对比的方面 | parseFloat() | parseInt() |
|---|---|---|
| 前导0 | 终都会忽略前导的0 | 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制); 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制） |
| 参数个数 | 只有一个参数， 只解析十进制值 | 两个参数，第二个参数是介于2和36之间的整数，表示进制基数 |
既有 全局方法paresFloat(),也有ES6的 Number.parseFloat().
语法
parseFloat(string)
Params:
- string:需要被解析成为浮点数的字符串.
示例
parseFloat('3.14')//3.14
parseFloat('314e-2')//3.14
parseFloat('0.0314e+2')//3.14
parseFloat('3.14xxxaa')//3.14
parseFloat('0xA')//0
parseFloat('0908.5')//908.5
parseFloat('22.34.2')//22.34
3.Number()
简介
Number()可以用于任何数据类型。以上parseInt()和parseFloat()则专门用于字符串。
Number()的转换规则：
| 被转换值 | 转换规则 |
|---|---|
| Boolean | true转换为1，false转换为0 |
| Number | 简单的传入和传出 |
| null | 返回为0 |
| undefined | 返回NaN |
| String | |
| 如果字符串中只包含数字 | 转换为十进制数，前导0会被忽略 |
| 如果字符串中包含有效的浮点格式 | 转换为对应浮点数值，前导0会被忽略 |
| 如果字符串中包含有效的十六进制格式，如‘0xf' | 转换为相同大小的十进制值 |
| 如果字符串为空，即为'' | 返回0，与parseInt,pareFloat将''转换为NaN不同 |
| 如果字符串中包含除上述以外的字符 | 返回NaN |
| 对象 | 调用对象的ValueOf()方法，然后依照上述规则转换；如果valueOf得到NaN,则调用对象的toString()方法，然后依照上述规则转换 |
语法
Number(value)
示例
Number(false)//0
Number(12)//12
Number(null)//0
Number(undefined)//NaN
Number('')//0
Number('0011')//11
Number('1.22.2')//NaN
Number('1.22')//1.22
Number('0xff')//255
Number('Hello')//NaN
Number({a:0,b:1})//NaN
Number('100%')//NaN
注意：
parseInt('10px');//10
Number('10px');//NaN
parseInt('');//NaN
Number('');//0
4. 一元正号(+)
一元正号运算符（unary plus operator）位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。
尽管一元负号也能转换非数值类型，但是 一元正号是转换其他对象到数值的最快方法,也是最推荐的做法，因为 它不会对数值执行任何多余操作。
| 原值 | 一元正号转换结果 |
|---|---|
| 字符串 | 整数、浮点数 |
| true | 1 |
| false | 0 |
| null | 0 |
+3 // 3
+"3" // 3
+true // 1
+false // 0
+null // 0
5. Number.prototype.toString()
简介
返回指定 Number 对象的字符串表示形式。
Number 对象覆盖了 Object 对象上的 toString() 方法，它不是继承的 Object.prototype.toString()。
- 如果被转换的是负数，则会保留负号
- 进行数字到字符串的转换时，建议用小括号将要转换的目标括起来，防止出错。
语法
num.toString([radix])
参数:
- num:待转换的Number
- radix: 指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。如果radix不在 2到36之间,将会抛出错误 RangeError。
示例
(17).toString()//"17"
(11.22).toString()//"11.22"
(254).toString(16)//"fe"
(-10).toString(2)//"-1010"
(-0xff).toString(2)//"-11111111"
二、一些情景带来的自动类型转换
1. 条件中的值自动转换为布尔值
发生场景
有时候，一些变量作为条件语句的判断条件，该变量就会被自动转换为布尔值。
例如:
val ? doA(): doB()
if(val) {
doA()
}
自动转换规则
| 值类型 | 转换的布尔值 |
|---|---|
| undefined | false |
| null | false |
| Boolean | false就是false ,true就是true |
| Number | 0、+0、-0、NaN是false，其他为true |
| String | ''为false,其他为true |
| Object | true |
示例
function testTrue(value) {
value ? console.log('true'): console.log('false');
}
testTrue(false)//false
testTrue(new Boolean(false))//true
testTrue(null)//false
testTrue(undefined)//false
testTrue('')//false
testTrue('lalala')//true
testTrue(NaN)//false
testTrue(new Number(0))//true
testTrue({a:false})//true
2. 相等操作符==带来的自动类型转换
发生场景
使用==时，不同类型的值也可以看作相等。
转换规则
x,y表示等号两边的两个值的类型。
| 类型(x) | 类型(y) | 结果 |
|---|---|---|
| null | undefined | true |
| number | string | 把y转化为number,再与x进行比较 |
| boolean | 任何类型 | 把x转换为number,再与x进行比较 |
| string或number | object | 把y转换为原始值，再与x进行比较 |
| object | object | 如果它们指向同一个对象，则返回true;否则返回false |
把其他类型的值转换为number，规则如下:
| 值类型 | 结果 |
|---|---|
| undefined | NaN |
| null | +0 |
| bool | 如果是true，结果为1；如果是false，结果为0 |
| string | 解析为数字。如果字符串中包含字母，就返回NaN；如果是由数字字符组成，就返回数字。 |
| object | Number(将值转换为原始值) |
将对象转换为原始值，规则如下：
如果对象的valueOf()方法返回原始值，则返回原始值；如果对象的toString()方法返回原始值，则返回原始值；其他情况返回一个错误
Tips:Object.prototype.valueOf()
valueOf()方法返回指定对象的原始值
JavaScript调用valueOf方法将对象转换为原始值。很少需要自己调用valueOf方法；当遇到要预期的原始值的对象时，JavaScript会自动调用它,比如==比较的时候有一侧是Object。
JavaScript的许多内置对象都重写了该函数，以实现更适合自身的功能需要。因此，不同类型对象的valueOf()方法的返回值和返回值类型均可能不同。
不同类型对象的valueOf()方法的返回值:
| 对象 | 返回值 |
|---|---|
| Array | 数组对象本身 |
| Boolean | 布尔值 |
| Date | 从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。 |
| Function | 函数本身 |
| Number | 数字值 |
| Object | 对象本身 |
| String | 字符串值 |
| Math和Error | 没有valueOf方法 |
语法
obj.valueOf()
Tips:Object.prototype.toString()
toString() 方法返回一个表示该对象的字符串。
每个对象都有一个toString()方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中type是对象的类型。
语法
obj.toString()
用例：使用toString()检测对象类型:
Object.prototype.toString.call(new Array())//"[object Array]"
Object.prototype.toString.call([1,2,3])//"[object Array]"
Object.prototype.toString.call(new Date())//"[object Date]"
Object.prototype.toString.call(new String('hhh'))//"[object String]"
Object.prototype.toString.call(Math)//"[object Math]"
Object.prototype.toString.call(undefined)//"[object Undefined]"
Object.prototype.toString.call(null)//"[object Null]"
示例
[] == ![] //true
/* 转换步骤
* 右侧[]为object，自动转换为true，取反后变成false
* 根据"转换规则"表格的第三条，boolean和其他类型值比较时要把boolean值先转换为Number, 右侧的false转换为0
* 根据"转换规则"表格的第四条，object和number或string比较时要转换为原始值，即[].toString()，得到''。这时即是比较''==0
* 根据"转换规则"表格的第二条，number和string类型比较要先把string类型化为number, Number('')得到0。这时即是比较 0==0
× 得到结果true
*/
3. 四则运算符带来的类型转换
转换规则
- 加法运算: 一方是字符串，另一方也会被转换为字符串类型。加法运算会触发3种类型转换
- 将值转换为原始值
- 将值转换为数字
- 将值转化为字符串
- 其他运算：只要其中一方是数字，另一方也会被转换为数字
示例
1 + '1' //'11'
2 * '2' //4
[1,2] + [3,4] //'1,23,4'
/* 转换步骤
* [1,2].toString() -> '1,2'
* [3,4].toString() -> '3,4'
* '1,2' + '3,4' -> '1,23,4'
*/
'a' + +'b' //'aNaN'
/* 转换步骤
* +'b' -> 'NaN'
* 'a' + 'NaN' -> 'aNaN'
*/
参考资料
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
《JavaScript高级程序设计》3.4.5 4.
《你不知道的JavaScript》1.3.3,1.3.4