Javascript把数字从string变为number的5种方式

很多时候，我们的数字是字符串的形式的，如：'1', '3', ['2', '4']，它们可能是从输入框<input /> 中获取，可能是来自后端的接口。我们有义务把他们变成整型。下面介绍几种方案

1、parseInt

这是es3就有的语法了，用法：

parseInt('123'); // 123  => number

js版本发展到es6的时候，parseInt被移到Number中。当然了，原来的parseInt可以继续使用

Number.parseInt('123'); // 123  => number

加入数字中带有非数字的字符，那么第一个出现非法字符的地方将会被截断

Number.parseInt('1239y93p21'); // 1239  => number

2、parseFloat

和parseInt差不多，但parseFloat主要针对浮点数的转换

parseFloat('123');          // 123  => number
Number.parseFloat('123');   // 123  => number

Number.parseFloat('123.4'); // 123.4 => number

同样有截断非法字符的规则

Number.parseInt('1239.34y93p21');     // 1239.34  => number
Number.parseInt('12 39.34y93p21');    // 12  => number

3、Number

es6新出的接口，可以直接使用，并且对浮点数也是有效的

Number('123');     // 123  => number
Number('123.4');   // 123.4 => number

与parse*()不同，Number处理时，遇到非法字符，直接NaN了，注意：NaN的类型也是number。

Number('123b');     // NaN  => number
Number('123.4b');   // NaN  => number

4、乘法+减法

是的，直接乘以1就行了

'123' * 1;     // 123  => number
'123.4' * 1;   // 123.4 => number

‘123’ - 0；    // 1234 => number
'123.4' - 0;   // 123.4 => number

遇到非法字符，也是直接NaN了。

'123b' * 1; // NaN  => number

---

注意：加法是不能转换类型的呢，会被当成字符串拼接：

'123' + 0; // ’1230‘  => string

5、按位或

这就是二进制方面的处理了，但是只能处理整数。遇到浮点数时，小数部分被丢弃。遇到非法字符，直接被转换成0。因为按位或会将数字转换成带符号的32位整数，多余的位数会被直接丢弃；所以按位或支持的整数范围是[pow(-2, 31), pow(2, 31) - 1]

'123' | 0;           // 123  => number

'123.4' | 0;         // 123 => number
'123rd' | 0;         // 0 => number

a = Math.pow(2, 31) // 2147483648 <=> 10000000000000000000000000000000

a | 0               // -2147483648 => number
(a - 1) | 0         // 2147483647 => number

为什么整数转为负数了呢，因为带符号二进制中，最高位(第32)是1，代表负数

---

题外话

对于字符串数组的转换，可以利用Number的特性

['1', '2', '3'].map(Number)  // [1, 2, 3] => number[]

---

还有其他的吗？如果有补充欢迎留言。