parseInt() 函数的奇怪行为

更多文章详见公众号【前端css和js干货】

parseInt() 是一个内置的 JavaScript 函数,用于从数字字符串中解析整数。 例如,让我们从数字字符串 '100' 中解析整数:

const number = parseInt('100');

number; // 100

正如预期的那样,'100' 被解析为整数 100。
parseInt(numericalString, radix) 还接受第二个参数:数字字符串参数所在的基数。 radix 参数允许我们解析不同数字基数的整数,最常见的是 2、8、10 和 16。
让我们使用 parseInt() 来解析基数为 2 的数字字符串:

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

number; // 4

parseInt('100', 2) 将 '100' 解析为基数为 2 的整数:因此它返回值 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() 从浮点数的指数符号中提取整数。

附带说明一下,为了安全地提取浮点数的整数部分,推荐 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的浮点数会转换为以指数表示法的字符串(例如 5e-7 是 0.0000005 的指数表示法),而且只转换数字部分,这就是为什么在 parseInt() 中转换小浮点数会导致意外结果的原因。
附带挑战:你能解释一下为什么 parseInt(9999999999999999999999) 等于 1 吗?

作者:Dmitri Pavlutin 译者:前端css和js干货 来源:dmitripavlutin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容

  • 数组与字符串 这一周呢,我大概学习的就是数组与字符串,看着一些基本的内容和前面的也差不多,但是理解起来就有些复杂了...
    王超楠8期强化班阅读 112评论 0 0
  • Javascript使用 [if !supportLists]一、 [endif]JS的三种使用方式 [if !s...
    1fa38a6a3bcf阅读 434评论 0 0
  • 1.严格模式 ES5 引入,对某些不安全(ES3)的操作会抛出错误, 关键字"use strict" ------...
    大橙仔阅读 115评论 0 0
  • JavaScript简介 1.JavaScript用途 前端三层: 结构层 HTML(从语义的角度描述页面的结构...
    王裕杰阅读 478评论 1 0
  • java.lang.Object 类 所有 Java 类的最终祖先,编译系统默认继承 Object 类,Objec...
    acc8226阅读 429评论 0 0