JS里的数据类型转换

发布 : 2019-05-09 分类 : JavaScript 浏览 :

首先我们知道JavaScript里的数据类型有:

number、boolean、string、null、undefined、symbol、object

1、转string

1.1 使用toString()

1.1.1 number

1
2
3
var a = 1
var b = a.toString()
console.log(b, typeof b) //1 string

1.1.2 boolean

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.1.3 null、undefined

1
2
3
4
5
6
var a1 = null
var a2 = undefined
var b1 = a1.toString()
var b2 = a2.toString()
console.log(b1, typeof b1) //报错
console.log(b2, typeof b2) //报错

1.1.4 object

1
2
3
4
5
6
var a = {
name: 'zww',
age: 19
}
var b = a.toString()
console.log(b, typeof b) //[object Object] string

上面代码中,虽然不会报错,但是结果不是我们所要的!

1.2 使用“ ‘’ ”和“ + ”

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

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

var obj = {
name: 'zww'
}
console.log(obj + '') //"[object Object]"

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

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

在上面的代码中,“+”如果发现左边或右边任意一边有字符串,就会尝试把另外的一边也变为字符串。

1.3 使用String()

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

console.log(String({
name: 'zww'
})) //"[object Object]"

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

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

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

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

1.4 注意

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

2、转boolean

2.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

2.2 使用!!

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

2.3 注意

  • 在所有值中只有六个值转为boolean是false:0、NaN、‘’(空字符串)、null、undefined、false。
  • 所有对象都为true。

3、转number

3.1 使用Number()

3.1.1 string

  1. 如果是纯数字的字符串,则直接转换为数字

    1
    2
    3
    4
    var a = '1234'
    var b = Number(a)
    console.log(b) //1234
    console.log(typeof b) //number
  2. 如果字符串为空,或者是空格字符串,则转换为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"
  3. 如果字符串中有非数字的内容,转为NaN

    1
    2
    3
    4
    var a = '1997zww'
    var b = Number(a)
    console.log(b) //NaN
    console.log(typeof b) //number

3.1.2 boolean

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"

3.1.3 null、undefined

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"

3.2 使用parseInt()

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

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

console.log(parseInt('zww20')) //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

3.3 使用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('zww111')) //NaN

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

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

3.4 使用’ ‘ - 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('zww123' - 0) //NaN

console.log(true - 0) //1

console.log(false - 0) //0

3.5 使用 + ‘ ‘

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
本文作者 : LqZww
原文链接 : http://yoursite.com/2019/05/09/js-li-de-shu-ju-lei-xing-zhuan-huan/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
支付宝扫一扫, 向我赞赏

支付宝扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

留下足迹