JavaScript中的类型转换

  |   分类   |   热度 ℃

JavaScript中的JavaScript中的七种数据类型，而JavaScript是一种动态类型语言，在调用一个变量前我们无法固定变量的数据类型，在条件判断、数值计算的时候必然会出现变量的隐式转换的问题，这将使我们的代码出现各种隐藏的bug，理解清楚各个类型间的转换方式，会使我们写出来的代码更加健壮。

Numer

显式转换

JavaScript提供了以下两种方式将其他类型转化为Number

  1. Number工厂
    1
    2
    3
    4
    5
    6
    7
    Number('0b10') // 2
    Number('0o91') // NaN
    Number(true) // 1
    Number(null) // 0
    Number({}) // NaN
    Number(['0b10']) // 2
    Number(Symbol()) // TypeError: Cannot convert a Symbol value to a number

Number工厂可以将除Symbol外的其他数据类型显式的转换为Number

  • 合法的字符串会转换为字面值、否则会转换为NaN
  • true=>1 false=>0
  • undefined=>0 null=>0
  • 普通对象或函数转换为NaN
  • 多元素数组转换为NaN，单元素数组则等同于将元素转换为Number
  1. 转换函数
    JavaScript提供parseInt与parseFloat函数可以将字符串有效位之前的数字转换为数字，如果没有有效位或者不是字符串将返回NaN
1
2
3
4
5
6
7
parseInt("1234blue") // 1234
parseInt("0xA") // 10
parseInt("22.5") // 22
parseInt("blue123") // NaN
parseFloat("22.34.5") // 22.34
parseFloat("0908") // 908
parseFloat("blue") // NaN

其中parseInt还支持指定进制

1
2
3
4
parseInt("AF", 16) // 175
parseInt("10", 2) // 2
parseInt("10", 8) // 8
parseInt("10", 10) // 10

隐式转换

1
2
3
4
5
6
7
8
9
~'10' // -11
~'0b10' // -3
~'0x10' // -17
~'010' // -11
~'0o10' // -9
false | true // 1
undefined ^ null // 0
{} & {} // 0
~Symbol() // TypeError: Cannot convert a Symbol value to a number

在进行位运算时，除了Symbol以外所有的数据类型都会转换为整数类型

  • 布尔值true => 1 false => 0
  • 字符串遵循数字表示法转换，当为浮点数时会转换为整数，当字符串不符合数字规范时则会转换为0
  • undefined和null会转换为0
  • 对象比较特殊，普通对象和函数对象都会转换为0，数组对象当在只有一个元素时会转换这个元素，而有多个元素时也会转换为0
1
2
3
4
5
6
7
8
9
'10' - 0 // 10
'0b10' - 0 // 2
+'0x10' // 16
+'010' // 10
false - 0 // 0
undefined - 0 // NaN
({}) - 0 // NaN
+{} // NaN
+Symbol() // TypeError: Cannot convert a Symbol value to a number

JavaScript中还存在着减0和取正转换为Number的奇技淫巧，不过结果可能和我们想的不太一样。

在以隐式转换的情况下，很容易出现意想不到的情况发生，这将会带来极大的隐患，如果没有十足的把握不建议大家使用这种方法做类型转换。

Boolean

显式转换

我们可以通过Boolean工厂将其他数据类型显式的转换为Boolean值

1
2
3
4
5
6
7
8
// 只有这7种情况为false，其余情况全都为true
Boolean(undefined) // false
Boolean(null) // false
Boolean(false) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean("") // false
Boolean('') // false

隐式转换

Boolean隐式转换与显示转换的结果是相同的，当我们清晰的知道转换结果时，可以直接使用隐式转换。

  1. 当在JavaScript需要一个布尔值时，就会将其他值隐式的转换为布尔值

    1
    2
    3
    4
    5
    6
    if (1) {
      console.log(1) // 1
    }
    while (1) {
      console.log(1) // 1 死循环
    }

  2. 当进行取反运算时，会触发隐式转换

    1
    !0 // true

我们可以通过使用两个取反符号来简洁的转换为布尔值

1
!!0 // false

String

String工厂

我们可以使用String工厂将其他数据类型转换为字符串

1
2
3
4
5
6
7
8
String(123) // '123'
String({}) // '[object Object]'
String([]) // ''
String([1,2,3]) // '1,2,3'
String(function(){return}) // 'function (){return}'
String(undefined) // 'undefined'
String(null) // 'undefined'
String(Symbol(1)) // 'Symbol(1)'

除了对象以外都可以使用此方式转换为我们期待的形式，如果需要将对象转换为字符串的形式，我们可以使用JSON.stringify转换为一个Json字符串

1
JSON.stringify({a:1,b:2}) // '{"a":1,"b":2}'

toString方法

除null和undefined以外我们可以调用对象的toString方法来转换为字符串

1
2
3
4
(1).toString() // 1
({}).toString() // '[object Object]'
Symbol().toString() // 'Symbol()'
(function(){return}).toString() // 'function (){return}'

+运算符

简单的使用+运算符可以使我们方便的转换为字符串

1
2
3
1 + '' // '1'
({}) + '' // [object Object]'
Symbol() + '' // 'Symbol()'

模板字符串

模板字符串中可以添加变量的特性，使我们也可以通过其转换字符串

1
`${123}` // 123

Object

我们只有一种需求需要转换为Object，那就是将Json字符串转换为Object，只需要使用JSON.parse函数即可

1
JSON.parse('{"a":1}') // { a: 1 }

其他

我们并不会有其他类型转换为null、undefined、Symbol的需求，所以也没有相关的转换方法。


本文链接：JavaScript中的类型转换
版权声明：本文章采用CC BY-NC-SA 3.0 CN许可协议进行许可。转载请注明出处！