JavaScript避坑指南：类型转换

JavaScript本身为弱类型语言，我们在声明变量的时候不用声明变量的类型，在使用变量的时候也可以将其改成任意类型。

这种设计符合JS语言的诞生初衷，同时也降低了语言的学习成本，增加了语言的灵活性，但同时也带来一些坑。

一、强制类型转换

强制类型转换就是使用固定的方法强制把某种类型转换成另一种类型

1.强制转换成数字类型

parseInt

parseFloat

Number

变量前面添加+

parseFloat和parseInt的用法一样，不同的是parseFloat可以保留小数

parseInt('1')   // 1
parseInt('1得得得')   // 1
parseInt(true)    // NaN  如何检测不到数字，则会统一转换成NaN
parseInt('1.2d的.3')    // 1
parseFloat('1.2d的.3')    // 1.2

Number函数也是将变量转换成数字，与上面两个方法不同的是，Number只能转纯字符数字，如果字符串中只要是带有其他字符的，都会被转换成NaN

Number('1得得得')    // NaN

变量前面添加一个‘+’可以快速将变量转换为数字类型

let a = '123'
console.log(+a)    // 123
a = null
console.log(+a)    // 0

2.强制转换成字符串类型

String

toString

拼接字符串（非常好用）

toString()和String()都可以将变量转为字符串类型，但不同的是toString()无法转换null和undefined

var s = null;
s = s.toString()  // Uncaught TypeError: Cannot read properties of null (reading 'toString')
s = String(s);       
console.log(typeof(s));    // string

通过字符串拼接可以将非字符串转为字符串类型，案例演示如下：

var a = 10, b = true, c = undefined, d = null, e = '你好';
console.log(a + '');    // '10'
console.log(b + '');    // 'true'
console.log(c + '');    // 'undefined'
console.log(d + '');    // 'null' 
console.log(a + '10');  // '1010'
console.log(e + a);     // '你好10'

3.强制转换成布尔值类型

因为布尔值非真即假，大多数转换结果都是真，只有少部分特殊的数据转换成假，所以布尔值转换，只需要记住哪些转换成假值就行了

• undefined
• null
• -0
• +0
• NaN
• ‘’（空字符串）

Boolean(undefined)   // false
Boolean(null)   // false
Boolean(0)   // false
Boolean(NaN)   // false
Boolean('')   // false

除了上面的六种类型以及false本身，其他数据都会被转换成true

二、自动类型转换

自动类型转换就是JavaScript程序在运行的过程中，根据上下文的环境，自动将类型转换成统一类型进行运算。

+加法运算

-减法运算

==

1.减法运算

减法运算会默认先把减号的两边转换成数字类型，然后再进行计算，比如：

console.log('10'-9)   // 1

如果减号两边有至少一边无法转换成数字呢？那结果会是NaN

console.log('2的'-1)   // NaN
// 注意：null和false和''都会被转换成0进行计算，而undefined不会被转换成数字
console.log(3-null)   // 3
console.log(3-false)   // 3
console.log(3-undefined)   // NaN

2.加法运算

加法运算两边都是数字类型，才会进行数字计算，但只要有一边能够转换成字符，就会优先进行字符串拼接，比如：

console.log(3+2)  // 5
console.log(3+'2')  // '32'

false和null在加法运算中会转换成数字0，undefined则会被转换成NaN，这点和减法运算是一样的

console.log(3+false)  // 3
console.log(3+undefined)  // NaN
console.log('3'+undefined)  // '3undefined'

上面都是一些基本类型之间的类型转换，引用类型在实际开发中很少会被用来转换成基本类型（出现这种情况往往就是代码写错了），下面罗列了一些常见的容易混淆的类型转换对照表：

原始值	转为数值类型	转为字符串类型	转为 Boolean 类型
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
“”	0	“”	false
“20”	20	“20”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“twenty”]	NaN	“twenty”	true
function(){}	NaN	“function(){}”	true
{}	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false