关于JavaScript中parseInt()的一个怪异行为解决

目录
  • 1. parseInt() 中的一个怪异行为
  • 2.解决 parseInt() 该怪异行为
  • 3. 总结

parseInt() 是一个内置的 JavaScript 函数，它可以将数字字符串解析为整数。比如，我们将数字字符串 '100' 解析为整数：

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

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

parseInt(numericalString, radix) 也接受第二个参数：radix（基数），另一个参数是数字字符串 numericalString。radix 参数允许你解析来自不同数字基数的字符串为整数，基数通常有 2，8， 10 和 16。

我们使用基数为 2 的 parseInt() 来解析一个数字字符串：

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

parseInt('100', 2) 以基数 2 解析 '100' 为一个整数：所以它返回十进制数值 4。

上面就是对 parseInt() 方法的简单介绍。

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) 数值的显式转换和其它浮点数不同：它是指数符号exponential notation 字符串表现形式。

这是第二个线索 -- 很重要！

然后当指数符号字符串解析为整数，你就会得到整数 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−610^{-6}10−6 就会被写成指数符号的形式。parseInt() 从浮点数的指数符号中取出整数。

译者加 -- 注意，parseInt() 取字符串前面整数的部分，比如：parseInt('12Jimmy34') 则有返回结果 12

备注，安全地取出浮点数整数的部分，我推荐使用 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−610^{-6}10−6 的浮点数（比如 0.0000005 等同于 5∗10−75 * 10^{-7}5∗10−7）被转换为以指数符号表示形式（比如 5e-7 是 0.0000005 指数符号形式）。这就是为什么使用 parseInt() 作用于如此小的浮点数会出现非预期效果：仅解析指数表示形式的重要部分（比如 5e-7 中的 5）。

挑战：你可以解释为什么 parseInt(999999999999999999999) 会等于 1？

到此这篇关于JavaScript中parseInt()的一个怪异行为解决的文章就介绍到这了,更多相关js中parseInt()怪异行为内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

原文链接 Solving a Mystery Behavior of parseInt() in JavaScript -- 作者 Dmitri Pavlutin

赞 (0)

相关推荐

  • 解析JS参数parseInt('012', 16)和parseInt(012, 16)是否相等

    目录 引言 一.parseInt()的使用说明 1.1 解析数字和字母的混合字符串 1.2 用于浮点数的取整: 1.3 将其他的进制转化为十进制 1.4 parseInt中的隐式转化 二.经典面试题 引言 parseInt('012', 16)和parseInt(012, 16)相等吗? ["10", "10", "10", "10", "10"].map(parseInt)的结果是什么? 先来一起复习一下

  • Js中parseInt的使用及注意事项

    目录 start 回顾一下map 学习一下 parseInt 总结: 总结 start 先看一个题目['1','2','3'].map(parseInt) 乍一看,我写下答案:[1,2,3] 控制台运行:['1',NaN,NaN] 为什么?map函数我很熟悉了,那么问题出在哪里?大概率出在 parseInt上了 回顾一下map map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成.总共就两个参数,一个是回调函数,一个是指定对应的this. 1.第一个参

  • JS面试题解['1', '7', '11'].map(parseInt) 输出

    JS面试题解['1', '7', '11'].map(parseInt) 输出

    目录 输出结果 map函数有问题? 会不会是传入的 parseInt 出现问题 ? 输出结果 ['1', '7', '11'].map(parseInt) // 结果输出 -> [1, NaN, 3] 为什么输出会有 NaN ? 为什么把 11 转成整数会是 3 ? 想把数组里的字符串数字转换成整数,于是使用 map函数来对数组的每一项作用,作用的函数是 parseInt函数,所以预期的结果应该是[1,7,11] ,然而最终浏览器的 JavaScript 引擎给出的答案是 [1, NaN, 3]

  • JavaScript parseInt0.0000005打印5原理解析

    目录 前言 1.什么时候使用parseInt? 2.关于parseInt的一些事情 语法 例子 3. parseInt 是如何转换数字的? 3.1 第一步?将数字转换为字符串 3.2 第二步,做舍入操作 4. 如何安全获取浮点数的整数部分? 5. 举一反三 前言 最近,我在开发项目时遇到了一个奇怪的问题,parseInt (0.0000005) === 5.通常,输出 0 才是正确的,但为什么是 5?让我们一起探讨这个问题. 1.什么时候使用parseInt? 首先,您通常什么时候使用parse

  • JavaScript parseInt()与Number()区别案例详解

    学习目标: parseInt().Number()这两个函数用到最多的地方就是把一个字符串转换成数据类型,那么他们都有哪些区别? 学习内容: parseInt()函数将给定的字符串以指定的基数解析为整数. parseInt(string,radix) 第二个参数表示使用的进制,我们一般使用10进制,也可能会有到8或者16进制.为了避免对"0"和"0x"开头的字符串解析错误,各种javascript编程规范都规定必须要明确给出第二个参数的值,如parseInt(&qu

  • 浅谈JavaScript中的parseInt()的妙用

    起因 写这篇博客的起因是今天在刷leetcode的每日一题,是一道字符串转换整数 (atoi)的题,感兴趣的话可以点击题目名称去看一下具体描述.在我多次debug终于成功提交之后,去评论区看了一下大佬们的解题思路,看完之后不禁感叹javascript中原来parseInt( )已经这么优秀了啊.这告诉我了一个道理,我们自认为再熟悉不过的api,可能我们并没有真正意义上的掌握." 我的解答 /** * @param {string} str * @return {number} */ var my

  • 关于JavaScript中parseInt()的一个怪异行为解决

    目录 1. parseInt() 中的一个怪异行为 2.解决 parseInt() 该怪异行为 3. 总结 parseInt() 是一个内置的 JavaScript 函数,它可以将数字字符串解析为整数.比如,我们将数字字符串 '100' 解析为整数: const number = parseInt('100'); number; // 100 如预期那样,'100' 被解析为整数 100. parseInt(numericalString, radix) 也接受第二个参数:radix(基数),另

  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

  • javascript中parseInt()函数的定义和用法分析

    本文实例讲述了javascript中parseInt()函数的定义和用法.分享给大家供大家参考.具体分析如下: 此函数可以解析一个字符串,并返回一个整数. 语法结构: 复制代码 代码如下: parseInt(string, type) 参数列表: 参数 描述 string 必需.要被解析的字符串. type 可选.表示要解析的数字的基数,通俗的说就是数字的进制,比如二进制.八进制或者十六进制.该值介于2 ~ 36之间. 详细说明: 一.指定type参数: 指定type参数后,函数就会按照指定的t

  • JavaScript中如何判断一个值的类型

    我们知道在js中有一个运算符可以帮助我们判断一个值的类型,它就是typeof运算符. console.log(typeof 123); //number console.log(typeof '123'); //string console.log(typeof true); //boolean console.log(typeof undefined); //undefined console.log(typeof null); //object console.log(typeof []);

  • JavaScript中offsetWidth的bug及解决方法

    JavaScript中offsetWidth的bug及解决方法

    offsetWidth表示对象的可见宽度. 比如: #div1 { width: 100px; height: 200px; background: red; } 结果:100 #div1 { width: 100px; height: 200px; background: red; border: 2px solid black; } 结果:104 (100 + 2 + 2) #div1 { width: 100px; height: 200px; background: red; borde

  • Javascript中parseInt的正确使用方式

    Javascript中parseInt的正确使用方式

    定义和用法 parseInt() 函数可解析一个字符串,并返回一个整数. 语法 parseInt(string, radix) parseInt(string, radix) 当参数radix的值为 0,或没有设置该参数时,parseInt()会根据 string来判断数字的基数. 返回值 返回解析后的数字. 提示和注释 注释:只有字符串中的第一个数字会被返回. 注释:开头和结尾的空格是允许的. 提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN. 实例

  • 实例讲解JavaScript中的this指向错误解决方法

    看如下对象定义: 'use strict' var jane = { name : 'Jane', display : function(){ retrun 'Person named ' + this.name; } }; 这样能正常调用 jane.display(); 下面的调用会出错: var func = jane.display; func() TypeError: Cannot read property 'name' of undefined 因为,this指向已经改变,正确的方式

  • JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

    今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时都是正常的,但是在"08","09"就会返回0 (这种现象出现在ie内核的浏览器中,如360浏览器就会出现这种错误)(谷歌,火狐不受影响) . 查阅资料得知着这种现象原因: 大神的解释: 01--07自然没有问题,但是09,08都是不合格的八进制形式,所以被按照0处理了

  • 关于javascript中的parseInt使用技巧

    要对表单中填写的日期格式进行客户端验证,于是在网上找了段代码,其中用到parseInt对年月日做判断,其中有类似这样的语句: ...... else if(parseInt(month)<1 || parseInt(month) >12) ...... 可是对于当前本来正确的日期,这里怎么也通不过.后来一查才明白,parseInt实际上有两个参数,第一个是要转换的值,第二个是指定的进制.如果不指定第二个参数,那么它只能正确地转换01到07(即把它们转换成1到7),从08开始,它就会按照&quo

  • 实例讲解JavaScript中instanceof运算符的用法

    instanceof 运算符简介 在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object".ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题.instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型.与 typeof 方法不同的是,instanceof 方法要求开发者明确地确

随机推荐