JS字符串转为数值方法详解

  在JS中，支持字符串类型和整数等数值类型互转；以下我们研究一下数据类型转换。

1 parseInt:字符串转为整数

1.1 基本用法

最简单的是将字符串直接转为十进制，此时parseInt()只需要传入一个参数即可。如下：

parseInt('123') // 123

当此时第一个字符为空格或者第一个为数字，其他的字符不能识别时，会自动去除空格以及不能被识别的字符，如下：

parseInt('   20') // 20
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN，如下：

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

若字符串为带小数点的浮点数，或者直接为浮点数，则parseInt()只取整数部分进行转化，如下：

parseInt('1.99') // 1
parseInt(1.99)  // 1

如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。如果字符串以0开头，将其按照10进制解析。如下：

parseInt('0x10') // 16
parseInt('011') // 11

1.2 进制转换

  parseInt 方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt 的第二个参数为10，即默认是十进制转十进制。如下：

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

//转换指定进制数。
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。如下：

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

以上“5”对于二进制来说是无意义字符，故而第一个返回 ‘1’，第二个返回’NaN’。
还有一个有趣的现象，如果parseInt 的第一个参数不是字符串，会被先转为字符串。如下：

parseInt(0x11, 36) // 43
parseInt(0x11, 2) // 1

// 等同于
parseInt(String(0x11), 36)
parseInt(String(0x11), 2)

// 等同于
parseInt('17', 36)
parseInt('17', 2)

此时若第一个字符为0后面跟着有效字符，那么会被当做八进制数转化，要注意这个点。

2. parseFloat：字符串转为浮点数

parseFloat方法用于将一个字符串转为浮点数。

parseFloat('3.14') // 3.14

如果字符串符合科学计数法，则会进行相应的转换。如下：

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

与parseInt类似，如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分，如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。如下：

parseFloat('3.14more non-digit characters') // 3.14
parseFloat('FF2') // NaN
parseFloat('') // NaN

3. Number：数值转换

Number() 方法可以可识别的字符串直接转化为数值，当字符串内是整数则被转化为整数，是浮点数则被转化为浮点数，若出现不可识别的字符，则直接被转为NaN*。如下：

Number("0x55") // 85
Number("55") // 55
Number("55.5") // 55.5
Number("55a") // NaN

Number() 方法会将空字符串转为0，而parseFloat会将空字符串转为NaN。
这些特点使得Number函数的转换结果不同于parseFloat。如下：

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

4. 总结

  从以上我们可以看出，parseInt 、parseFloat 以及Number的返回值只有两种可能，要么是数值，要么是 NaN，而对于不能识别的情况会自动截取或者返回NaN，此三种方法一般可以看情况选用。