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[]

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

阅读 6.7k

全栈那些事
授人以鱼不如授人以渔

极客

3.2k 声望
1.2k 粉丝
0 条评论

极客

3.2k 声望
1.2k 粉丝
文章目录
宣传栏