Skip to content
大纲

JavaScript 数值转换

有 3 个函数可以将非数值转换为数值:Number()、parseInt() 和 parseFloat()。

Number() 是转型函数, 可用于任何数据类型。后两个主要用于将字符串转换为数值。对于同样的参数, 这 3 个函数执行的操作也不同。

Number()

Number() 函数基于如下规则执行转换:

  • 布尔值, true 转换为 1, false 转换为 0
  • 数值, 直接返回
  • null, 返回 0
  • undefined, 返回 NaN
  • 字符串, 应用以下规则
    • 如果是空字符串, 则返回 0
    • 如果字符串包含数值字符, 包括数值字符前面带加、减号的情况, 则转换为一个十进制数值。因此, Number('1')返回 1, Number('123')返回 123, Number('011')返回 11(忽略前面的零)
    • 如果字符串包含有效的浮点值格式如"1.1", 则会转换为相应的浮点值(同样, 忽略前面的零)
    • 如果字符串包含有效的十六进制格式如"0xf", 则会转换为与该十六进制值对应的十进制整数值
    • 如果字符串包含除上述情况之外的其他字符, 则返回 NaN
  • 对象, 调用 valueOf()方法, 并按照上述规则转换返回的值。如果转换结果是 NaN, 则调用 toString()方法, 再按照转换字符串的规则转换

注意

一元加操作符与 Number() 函数遵循相同的转换规则。

下面是几个具体的例子:

js
Number('') // 0
Number(null) // 0
Number(undefined) // NaN
Number('123hello') // NaN

parseInt()

parseInt() 通常用于将字符串转换为整数数值, 且与 Number() 转换规则有着很大的不同。

  • 如果是空字符串, 则返回 NaN
  • 字符串最前面的空格会被忽略, 从第一个非空格字符开始转换
  • 如果第一个字符不是数值字符、加号或减号, 返回 NaN
  • 如果第一个字符是数值字符、加号或减号, 则继续依次检测每个字符, 直到字符串末尾, 或碰到非数值字符。比如, "1234blue"会被转换为 1234, 因为"blue"会被完全忽略。类似地, "22.5"会被转换为 22, 因为小数点不是有效的整数字符
  • 如果字符串以"0x"开头, 就会被解释为十六进制整数。如果字符串以"0"开头, 且紧跟着数值字符, 在非严格模式下会被某些实现解释为八进制整数

下面是几个具体的例子:

js
parseInt('1234blue') // 1234
parseInt('') // NaN
parseInt('0xA') // 10, 解释为十六进制整数
parseInt(22.5) // 22
parseInt('70') // 70, 解释为十进制值
parseInt('0xf') // 15, 解释为十六进制整数

不同的数值格式很容易混淆, 因此 parseInt()也接收第二个参数, 用于指定底数(进制数)。

最佳实践

为避免出错, 建议始终给 parseInt 传入第二个参数

js
parseInt('10', 2) // 2, 按二进制解析
parseInt('10', 8) // 8, 按八进制解析
parseInt('10', 10) // 10, 按十进制解析
parseInt('10', 16) // 16, 按十六进制解析

parseFloat()

parseFloat 与 parseInt() 类似, 通常用于将字符串转换为浮点数值。

同样, 它也是解析到字符串末尾或者解析到一个无效的浮点数值字符为止。这意味着第一次出现的小数点是有效的, 但第二次出现的小数点就无效了, 此时字符串的剩余字符都会被忽略。因此, "22.34.5"将转换成 22.34。

如果字符串表示整数(没有小数点或者小数点后面只有一个零), 则 parseFloat()返回整数。

最后, parseFloat()只解析十进制值, 因此不能指定底数。下面是几个具体的例子:

js
parseFloat('1234blue') // 1234, 按整数解析
parseFloat('0xA') // 0
parseFloat('22.5') // 22.5
parseFloat('22.34.5') // 22.34
parseFloat('0908.5') // 908.5
parseFloat('3.125e7') // 31250000

Mochi's personal blog.