搞定 parseInt() 的怪异行为

你的名字 2023-01-20 12:52 6阅读 0赞

> 作者：Joe Seifi  
> 译者：前端小智  
> 作者：Dmitri Pavlutin

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

`parseInt()`是内置的 JS 函数，用于解析数字字符串中的整数。 例如，解析数字字符串`'100'`：

const number = parseInt('100');
    number; // 100

如预期的那样，`'100'`被解析为整数 `100`。

`parseInt(numericalString, radix)`还接受第二个参数：从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。**请注意，10 不是默认值**，最常见的是 2、8、10 和 16。

例如我们使用 `parseInt` 以二进制方式解析数字字符串：

const number = parseInt('100', 2);
    number; // 4

100 对应的二进制数是 4，所以返回 4。

### 1. parseInt() 的怪异行为 ###

`parseInt(numericalString)`始终将其第一个参数转换为字符串（如果不是字符串），然后将该数字字符串解析为整数值。

这就是为什么你可以（**但不应该**）使用`parseInt()`提取浮点数的整数部分的原因：

parseInt(0.5);      // => 0
    parseInt(0.05);     // => 0
    parseInt(0.005);    // => 0
    parseInt(0.0005);   // => 0
    parseInt(0.00005);  // => 0
    parseInt(0.000005); // => 0

提取浮点数的整数部分，如`0.5`、`0.05`等，结果为`0`, 这和预期的一样。

那提取`0.0000005`的整数部分怎么样？

parseInt(0.0000005); // => 5

`parseInt()` 将浮点数 `0.0000005` 解析为 `5`。为什么 `parseInt(0.0000005)` 有这样一个怪异的行为？

### 2.解决`parseInt()`怪异行为 ###

我们再看一看 `parseInt(numericalString)` 的第一个参数：如果它不是字符串，则将其转换为字符串，然后解析，并返回解析后的整数。

这可能是第一个线索。

然后，我们尝试将浮点数手动转换为字符串表示形式：

String(0.5);      // => '0.5'
    String(0.05);     // => '0.05'
    String(0.005);    // => '0.005'
    String(0.0005);   // => '0.0005' 
    String(0.00005);  // => '0.00005'
    String(0.000005); // => '0.000005'
    
    String(0.0000005); // => '5e-7'

显式转换为`string(0.0000005)`字符串的行为与其他浮点数不同:它的表示方式是用指数的形式。

这是第二个重要的线索！

当指数符号被解析为整数时，我们会得到数字5

parseInt(0.0000005); // => 5
    // same as
    parseInt(5e-7);      // => 5
    // same as
    parseInt('5e-7');    // => 5

`parseInt('5e-7')`考虑第一个数字`'5'`，但跳过`'e-7'`。

谜团已揭开！ 因为 `parseInt()` 始终将其第一个参数转换为字符串，所以小于`10负6次方`的浮点数将以指数表示。 然后 `parseInt()` 从 float 的指数表示法中提取整数。

另外，为了安全地提取浮点数的整数部分，建议使用 `Math.floor()` 函数：

Math.floor(0.5);      // => 0
    Math.floor(0.05);     // => 0
    Math.floor(0.005);    // => 0
    Math.floor(0.0005);   // => 0
    Math.floor(0.00005);  // => 0
    Math.floor(0.000005); // => 0
    
    Math.floor(0.0000005); // => 0

### 3.总结 ###

`parseInt()` 是将数字字符串解析为整数的函数。

尝试使用`parseInt()`提取浮点数的整数部分时必须小心。

小于10的-6次方 (例如0.0000005，也就是5\*10-7)的浮点数转换成字符串时被写成指数表示法(例如5e-7是0.0000005的指数表示法)。这就是为什么在 `parseInt()` 中使用这么小的浮点数会导致意想不到的结果:只有指数表记的重要部分(例如 `5e-7` 中的 `5`)会被解析。

那么现在大家可以试着解释为什么 `parseInt(999999999999999999999)`等于1？

完，我是刷碗智，去保健了，下期见

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/parseint-mystery-javascript/

### 交流 ###

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi