Wenzi

js中parseInt与Math.floor的区别

蚊子前端博客
发布于 2019/03/14 18:10
js中parseInt与Math.floor在使用的过程中,有哪些细致的区别呢?

网上有介绍parseInt与Math.floor区别的内容已经不少了,这里我还是想说下自己在使用过程中的区别

parseInt #

我们平时在使用parseInt时,主要是为了数据中的整数部分。但实际上,在官方的定义里,parseInt的第一个参数应当是string类型的。

parseInt(string, radix);

尤其是在ts中使用parseInt会更加明显,若直接传入一个数字类型的参数,则编辑器会提示此处应当传入一个字符串类型,这时就要求我们手动的转为字符串类型,比如使用num+''或者num.toString()。在不严格的情况下,js语言会自动进行隐式的类型转换。

而且,使用parseInt获取整数部分时,是直接将小数部分扔掉:

parseInt('12.3'); // 12
parseInt('6.9'); // 6
parseInt('4'); // 4
parseInt('-1.2'); // -1
parseInt('-1.9'); // -1

parseInt最大的一个功能是,可以将字符串类型的数字其他进制的数据转为十进制的数据。同时,parseInt也能让我们从数字和其他字母混合的字符串中提取出数字来,若以非数字类型开始的字符串,则无法转为数字,若以数字开头的字符串,则返回第一个非数字字符前所有的数字字符:

parseInt('11', 8); // 9, 8进制中的11即为10进制中的9
parseInt('123.456'); // 123
parseInt('a123'); // NaN
parseInt('123a456'); // 123

这种情况有一个使用的场景,比如有一个DOM元素上有style属性

<div class="wenzi" style="height: 200px;"></div>

我们在使用style获取高度时会带有单位,那么这里就可以用parseInt获取到纯数字(当然,我们还有其他方式来获取不带单位的数据,这里仅仅是举个例子):

let height = document.querySelector('.wenzi').style.height;
console.log( height ); // '200px'
console.log( parseInt(height) ); // 200

Math.floor #

Math.floor是专门用来操作数字的,该功能是获取小于等于参数的整数(向下取整),例如:

Math.floor(12.3); // 12
Math.floor(6.9); // 6
Math.floor(4); // 4
Math.floor(-1.2); // -2
Math.floor(-1.9); // -2

可以看到,在获取整数部分这个功能,与parseInt对比发现,对于非负数来说效果是一样的,但是对于负数来讲,floor会向更小数字的方向寻找。

若传入的参数不是数字类型的,返回的则是NaN

建议在获取非负数的整数部分时,使用Math.floor

总结 #

若是操作纯数字型的数据,建议使用Math下的方法,若字符串类型的数字再使用parseInt,更加语义化一些。

标签:parseIntfloor
阅读(2651)
Simple Empty
No data