JavaScript 字符串转数字的方法总结

2018-05-11

字数统计: 1.1k字 | 阅读时长≈ 4分

在 Javascript 中有很多方法可以将字符串转换成数字，下面是我能想到的以及在网上找到的一些方法：

parseInt(num); // 默认方式 (没有基数)
parseInt(num, 10); // parseInt 使用基数 (十进制)
parseFloat(num) // 浮点型
Number(num); // Number 构造函数
~~num // 按位取反
num / 1 // 被 1 除
num * 1 // 被 1 乘
num - 0 // 减 0
+num // 一元操作 "+"

但我们该使用哪种方式？在什么时候用？为什么用这种方法呢？这就要对比每一种方法的异同，以及每种方法各自存在的不足。

JsPerf.com 上的有一个测试工具可以很方便的测试上述方法的性能。

parseInt

虽然大多数浏览器都对 ParseInt 做过优化，但是 parseInt 会引起以下几种错误：

1 2	`parseInt('08') // 缺点1、在一些老的浏览器（IE8 及以下版本）里会返回 0 parseInt('44.jpg') // 缺点2、在现代浏览器和老浏览器里都返回 44`

parseInt：如果你不想让它从字符里面推断数值，就不要用 parseInt。

parseInt(string, radix)

定义了基数之后可以避免上述 parseInt 的缺点一，但仍有缺点二。

所以如果不想让它从字符里面推断数值，也不要用 parseInt(string, radix)。

PareseFloat

PareseFloat 在不处理 16 进制数字的时候，都发挥的很好，但在处理 16 进制数字字符串时则会出错，看例子：

parseInt(-0xFF) // returns -255
parseInt("-0xFF") // returns -255

parseFloat(0xFF) // returns 255
parseFloat("0xFF") // returns 0
parseFloat(-0xFF) // returns -255
parseFloat("-0xFF") // returns -0

注：一个负 16 进制数字符串是比较特殊的例子，当你在应用中解析它的时候，可能会导致意想不到的错误。永远记得在应用中检查 NaN 值，以避免出现意外。

另外，当数字中含有字符时它会产生跟 parseInt 一样的错误：

1	`parseFloat('44.jpg') // 在现代浏览器和老浏览器里都返回 44`

**parseFloat:** 处理 16 进制数字的时候需要注意；如果你不想让它从字符里面推断数值，就不要使用它。

~（按位取反）

我们只能使用它将字符串转换为整型，而不能转为浮点型数字。它比较好的一面是，当碰到非数字字符的时候，它会返回 0，看示例：

~~1.23 // returns 1
~~"1.23" // returns 1
~~"23" // returns 23
~~"Hello world" // returns 0

按位取反的原理：它 “翻转“ 了每一个二进制位, 也被称为 A1 补数。你可以使用它，但是也要意识到它只能处理成整数。所以，除非你确定数值的范围在带符号 32 位整型之内（因为在规范里称为 ToInt32），否则就不要使用它。

~（按位取反）：使用的时候确保不存在非数字字符，只可用做整型转换

Number 函数

当它解析的时候，会试图从你给的字符中找出数字，看示例：

Number("023") // returns 23
Number(023) // returns 19

Number("0xFF") // returns 255
Number(0xFF) // returns 255

注：023 实际上是一个八进制数，不管你做什么，它都会返回 19；对于 16 进制数来说，有没有引号都是一样的。

**Number 函数：**是 JsPerf 测试结果里操作性能较差的方法之一，建议不要轻易使用。

一元操作（加、减、乘、除）

"1.23" * 1 // returns 1.23
"0xFF" - 0 // returns 255
"0xFF.jpg" / 1 // returns NaN
+"023" // returns 23

不像其它方式，一元操作会在处理非数字时，抛出一个 NaN （不是一个 number）值。这也是我最喜欢的一种方式，因为一个字符不应该被考虑为 0 或者从它有多少位来猜测。大多数时候我会使用 + 操作，因为它是最不容易引起混乱的操作。不过一元操作并不是性能最好的一种方式，尽管在 JsPerf 测试结果里 -0 操作性能不错。

字符串转数字最好的方式

将待转换的字符串通过一元操作或者*带有基数的 parseInt *来解析成数字。parseFloat 具有性能上的优势，但是它会在相较于返回 NaN 更为合适的情况下返回一些数字。

本文作者： Alvin
本文链接： https://alvinyw.github.io/2018/05/9/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！