前言

首先，在 JavaScript 中，基础类型有：Number、Boolean、String、null、undefined、Synbol、bigInt。

但在 JavaScript 中类型转换只有如下三种情况：

  1. 转换为 string；
  2. 转换为 number；
  3. 转换为 boolean。

下面我将依次介绍这几种情况的数据类型转换。


转为字符串

toString()

  1. number 转 string
1
2
3
var num = 10
var str = num.toString()
console.log(str, typeof str)    // 10 string
  1. boolean 转 string
1
2
3
4
5
6
var a1 = true
var a2 = false
var b1 = a1.toString()
var b2 = a2.toString()
console.log(b1, typeof b1)    // true string
console.log(b2, typeof b2)    // false string
  1. null / undefined 转 string
1
2
3
4
5
var a1 = null
var a2 = undefined
var n = a1.toString()
var u = a2.toString()
console.log(n, u)    // 报错，Cannot read property 'toString' of null
  1. object 转 string
1
2
3
4
5
6
7
8
9
var obj = {
  name: 'LqZww',
  age: 20
}
var arr = [1, 2, 3]
var s1 = obj.toString()
var s2 = arr.toString()
console.log(s1, typeof s1)    // [object Object] string
console.log(s2, typeof s2)    // 1,2,3 string

使用“ ‘’ ”和“ + ”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(1 + '')    // 1

console.log(true + '')    // true

var obj = {
  name: 'LqZww',
  age: 20
}
console.log(obj + '')    // [object Object]

console.log([1, 2, 3] + '')    // 1,2,3

console.log(null + '')    // null

console.log(undefined + '')    // undefined

我们可以看出：“ + ” 如果发现左边或右边任意一边有字符串，就会尝试把另外的一边也变为字符串。


String()

String() 全局对象是一个用于字符串或一个字符序列的构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.log(String(10))    // 10

console.log(String({
  name: 'LqZww',
  age: 20
}))    // [object Object]

console.log(String([1, 2, 3]))    // 1,2,3

console.log(String(true))    // true

console.log(String(false))    // false

console.log(String(null))    // null

console.log(String(undefined))    // undefined

注意

  • 使用 toString() 方法不会影响到原变量，它会将转换的结果返回；
  • 数值类型调用 toString() 方法时，可以带一个参数，将输出对应进制的值；
  • null、undefined 没有 toString() 方法。如果需要转换，应该使用 String()；
  • 对于 number、boolean 类型，String() 方法相当于调用了 toString() 方法。

转为数字

Number()

  1. string 转 number

  • 如果是纯数字的字符串，则直接转换为数字。

    1
    2
    3
    var a = '1234'
    var b = Number(a)
    console.log(b, typeof b)    // 1234 "number"

  • 如果字符串为空或者是空格字符串，则转换为 0。

    1
    2
    3
    4
    5
    6
    var a1 = ''
    var a2 = '      '
    var b1 = Number(a1)
    var b2 = Number(a2)
    console.log(b1, typeof b1)    // 0 "number"
    console.log(b2, typeof b2)    // 0 "number"

  • 如果字符串中有非数字的内容，转为 NaN。

    1
    2
    3
    var a = '1234LqZww'
    var b = Number(a)
    console.log(b, typeof b)    // NaN "number"
  1. boolean 转 number
1
2
3
4
5
6
var a1 = true
var a2 = false
var b1 = Number(a1)
var b2 = Number(a2)
console.log(b1, typeof b1)    // 1 "number"
console.log(b2, typeof b2)    // 0 "number"
  1. null / undefined 转 number
1
2
3
4
5
6
var a1 = null
var a2 = undefined
var b1 = Number(a1)
var b2 = Number(a2)
console.log(b1, typeof b1)    // 0 "number"
console.log(b2, typeof b2)    // NaN "number"

parseInt()

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是 2~36 之间的整数，表示被解析字符串的基数。

  • 有两个参数，第一个参数是要转换的字符串，第二个参数是要转换的进制；
  • 从第一位有效数字开始，直到遇到无效数字；
  • 如果第一位不是有效数字，则直接返回 NaN。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(parseInt('10LqZww'))    // 10

console.log(parseInt('20lq44'))    // 20

console.log(parseInt('qaz20'))    // NaN

console.log(parseInt(''))    // NaN

console.log(parseInt('011', 10))    // 11

console.log(parseInt('011', 8))    // 9

console.log(parseInt(false))    // NaN

console.log(parseInt(true))    // NaN

parseFloat()

parseFloat() 函数解析一个参数（必要时先转换为字符串）并返回一个浮点数。

  • 不支持第二个参数，只能解析十进制数；
  • 从第一位有效数字开始，直到遇到无效数字；
  • 如果第一位不是有效数字，则直接返回 NaN；
  • 如果解析的内容只有整数，则只解析成整数。
1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(parseFloat('12'))    // 12

console.log(parseFloat('1.234'))    // 1.234

console.log(parseFloat('1.234xx'))    // 1.234

console.log(parseFloat('1.2.3xx'))    // 1.2

console.log(parseFloat('qaz111'))    // NaN

console.log(parseFloat(false))    // NaN

console.log(parseFloat(true))    // NaN

使用’ ‘ - 0

1
2
3
4
5
6
7
8
9
console.log('1.23' - 0)    // 1.23

console.log('1.23rem' - 0)    // NaN

console.log('qaz123' - 0)    // NaN

console.log(true - 0)    // 1

console.log(false - 0)    // 0

使用 + ‘ ‘

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(+'1.23')    // 1.23

console.log(+'-1.23')    // -1.23

console.log(+'.1')    // 0.1

console.log(+'12rem')    // NaN

console.log(+'re12m')    // NaN

console.log(+false)    // 0

console.log(+true)    // 1

转为布尔值

Boolean()

1
2
3
4
5
6
7
8
9
10
console.log(Boolean(1))    // true
console.log(Boolean('   '))    // true
console.log(Boolean('qqq'))    // true
console.log(Boolean({}))    // true

console.log(Boolean(0))    // false
console.log(Boolean(''))    // false
console.log(Boolean(null))    // false
console.log(Boolean(undefined))    // false
console.log(Boolean(NaN))    // false

!!

1
2
3
4
5
6
7
8
9
10
11
12
console.log(!!true)    // true
console.log(!!1)    // true
console.log(!!'  ')    // true
console.log(!!{})    // true
console.log(!![])    // true
console.log(!! function() {})    // true

console.log(!!null)    // false
console.log(!!undefined)    // false
console.log(!!NaN)    // false
console.log(!!0)    // false
console.log(!!'')    // false

注意

  • 在所有值中只有七个值转为 boolean 是 false：0、-0、NaN、‘’（空字符串）、null、undefined、false。
  • 所有的对象都为 true。

结语

最后我们再来看看下面这个表格：

原始值 目标 结果
number 字符串 1 -> ‘1’
boolean、symbol、函数 字符串 ‘true’
数组 字符串 [1, 2, 3] -> ‘1, 2, 3’
对象 字符串 ‘[object Object]’
string 数字 ‘1’ -> 1
null 数字 0
symbol 数字 报错
数组 数字 空数组为0；存在元素且为数字转数字；其他情况NaN
除数组的引用类型 数字 NaN
number 布尔值 除了NaN、0、-0都为true
string 布尔值 除了空字符串都为true
null、undefined 布尔值 false
引用类型 布尔值 true