网上方法很多,标题党一下,勿拍 ^_^!实际开发过程中经常遇到数字取整问题,所以这篇文章收集了一些方法,以备查询。

常用的直接取整方法

直接取整就是舍去小数部分。

1、parseInt()

parseInt() 函数解析一个字符串参数,并返回一个指定基数的整数 (数学系统的基础)。这个估计是直接取整最常用的方法了。

示例:

  1. parseInt("2015nov"), //2015
  2. parseInt(""), //NaN
  3. parseInt("0xA"), //10(十六进制)
  4. parseInt(20.15), //20
  5. parseInt(-20.15), //-20
  6. parseInt("070"); //56(八进制数)

更多关于 parseInt() 函数可以查看 MDN 文档

2、Math.trunc()

Math.trunc() 方法会将数字的小数部分去掉,只保留整数部分。

  1. Math.trunc(13.37) // 13
  2. Math.trunc(42.84) // 42
  3. Math.trunc(0.123) // 0
  4. Math.trunc(-0.123) // -0
  5. Math.trunc("-1.123") // -1
  6. Math.trunc(NaN) // NaN
  7. Math.trunc("foo") // NaN
  8. Math.trunc() // NaN

特别要注意的是:Internet Explorer 不支持这个方法,不过写个Polyfill也很简单:

  1. Math.trunc = Math.trunc || function(x) {
  2. if (isNaN(x)) {
  3. return NaN;
  4. }
  5. if (x > 0) {
  6. return Math.floor(x);
  7. }
  8. return Math.ceil(x);
  9. };

数学的事情还是用数学方法来处理比较好。

快速的取整方法

除了上面这2个办法,我们可以使用按位运算符来实现数字取整。 所有的按位运算都以带符号的32位整数进行。 使用它们将可以将 float 转换为整数。 但是也存在一些问题,我们可以安全取整的数字范围为 ±2^31−1 即:2147483647,远远小于 Number.MAX_VALUE(1.7976931348623157e + 308)。 下面是一些例子:

1、~~number

双波浪线 ~~ 操作符也被称为“双按位非”操作符。你通常可以使用它作为代替 Math.trunc() 的更快的方法。

  1. console.log(~~47.11) // -> 47
  2. console.log(~~1.9999) // -> 1
  3. console.log(~~3) // -> 3
  4. console.log(~~[]) // -> 0
  5. console.log(~~NaN) // -> 0
  6. console.log(~~null) // -> 0

失败时返回0,这可能在解决 Math.trunc() 转换错误返回 NaN 时是一个很好的替代。

但是当数字范围超出 ±2^31−1 即:2147483647 时,异常就出现了:

  1. // 异常情况
  2. console.log(~~2147493647.123) // -> -21

2、number|0

| (按位或) 对每一对比特位执行或(OR)操作。

  1. console.log(20.15|0); // -> 20
  2. console.log((-20.15)|0); // -> -20
  3. console.log(3000000000.15|0); //

3、number^0

^ (按位异或),对每一对比特位执行异或(XOR)操作。

  1. console.log(20.15^0); // -> 20
  2. console.log((-20.15)^0); // -> -20
  3. console.log(3000000000.15^0); // -> -1294967296

4、number<<0

<< (左移) 操作符会将第一个操作数向左移动指定的位数。向左被移出的位被丢弃,右侧用 0 补充。

  1. console.log(20.15 < < 0); // -> 20
  2. console.log((-20.15) < < 0); //-20
  3. console.log(3000000000.15 << 0); // -> -1294967296

上面这些按位运算符方法执行很快,当你执行数百万这样的操作非常适用,速度明显优于其他方法。但是代码的可读性比较差。还有一个特别要注意的地方,处理比较大的数字时(当数字范围超出 ±2^31−1 即:2147483647),会有一些异常情况。使用的时候明确的检查输入数值的范围。

舍入舍去取整

舍入舍去取整也非常常见,JavaScript 的 Math 对象中有明确的方法支持:

1、四舍五入 Math.round(number)

Math.round() 是 Math 对象中的一个方法,将数值四舍五入为最接近的整数。

  1. console.log(Math.round(20.1)); // -> 20
  2. console.log(Math.round(20.5)); // -> 21
  3. console.log(Math.round(20.9)); // -> 21
  4. console.log(Math.round(-20.1)); // -> -20
  5. console.log(Math.round(-20.5)); // -> -20 注意这里是-20而不是-21
  6. console.log(Math.round(-20.9)); // -> -21

2、向下取整 Math.floor(number)

Math.floor()这个方法取向下最接近的整数。

  1. console.log(Math.floor(20.1)); // -> 20
  2. console.log(Math.floor(20.5)); // -> 20
  3. console.log(Math.floor(20.9)); // -> 20
  4. console.log(Math.floor(-20.1)); // -> -21
  5. console.log(Math.floor(-20.5)); // -> -21
  6. console.log(Math.floor(-20.9)); // -> -21

3、向上取整 Math.ceil(number)

Math.ceil()这个方法取向上最接近的整数。

  1. console.log(Math.ceil(20.1)); // -> 21
  2. console.log(Math.ceil(20.5)); // -> 21
  3. console.log(Math.ceil(20.9)); // -> 21
  4. console.log(Math.ceil(-20.1)); // -> -20
  5. console.log(Math.ceil(-20.5)); // -> -20
  6. console.log(Math.ceil(-20.9)); // -> -20

Fundebug提供JavaScript监控,支持所有主流前端框架,微信小程序监控,微信小游戏监控,后端Node.js监控。

您可能感兴趣的

  1. 详解1000+项目数据分析出来的10大JavaScript错误
  2. 10个用Console来Debug的高级技巧
  3. Fundebug支持区分Source Map版本
  4. Debug前端HTML/CSS

原文链接:http://www.css88.com/archives/8488

你可能不知道的 JavaScript 中数字取整的更多相关文章

  1. javaScript中小数取整,四种方法的比较

    1.parseInt:只取整数位例如:parseInt(3.7) 取整结果为:3parseInt(-1.1) 取整结果为:-1 2.Math.floor :向下去整,取大的整数例如:Math.floo ...

  2. 闭包----你所不知道的JavaScript系列(4)

    一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...

  3. js值----你所不知道的JavaScript系列(6)

    1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...

  4. js类型----你所不知道的JavaScript系列(5)

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型等. 1.内置类型 JavaScript 有七种内置类型: • 空值(null) • 未定义( ...

  5. let和const----你所不知道的JavaScript系列(2)

    let 众所周知,在ES6之前,声明变量的关键字就只有var.var 声明变量要么是全局的,要么是函数级的,而无法是块级的. var a=1; console.log(a); console.log( ...

  6. LHS 和 RHS----你所不知道的JavaScript系列(1)

      变量的赋值操作会执行两个动作, 首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后在运行时引擎会在作用域中查找该变量, 如果能够找到就会对它赋值.----<你所不知道的Ja ...

  7. Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识

    摘要: 详解原型污染. 原文:Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识 作者:Lucas HC Fundebug经授权转载,版权归原作者所有. 可能有信息敏感的同学已 ...

  8. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(三)数字取整,数组求和

    一.前言 简短的sleep函数,获取时间戳:https://www.mwcxs.top/page/746.html 数字格式化 1234567890 --> 1,234,567,890:argr ...

  9. javascript 解决默认取整的坑(目前已知的最佳解决方案)

    javascript 解决默认取整的坑(目前已知的最佳解决方案) 复现该问题 js在数字操作时总会取更高精度的结果,例如1234/10结果就是123.4,但是在c或者java中整数除以10的结果还是整 ...

随机推荐

  1. 对C语言中递归算法的分析

    C通过运行时堆栈支持递归函数的实现.递归函数就是直接或间接调用自身的函数.     许多教科书都把计算机阶乘和菲波那契数列用来说明递归,非常不幸我们可爱的著名的老潭老师的<C语言程序设计> ...

  2. 一个 redis 异常访问引发 oom 的案例分析

    「推断的前提是以事实为依据.」 这两天碰到一个线上系统的偶尔出现突然堆内存暴涨,这倒不是个什么疑难杂症, 只是过程中有些思路觉得可以借鉴参考,故总结下并写下来. 现象 内存情况可以看看下面这张监控图. ...

  3. 2015年北京的第一场雪-关于android学习的思考(84)

    今天是2015年11月6日,今天北京下了大雪,我听着民谣,发现丢火车的摇滚也还不错,我身体的一部分毛发也发生了变异,由黑色变成红色,一切来的太突然了......不知不觉学习android开发2年多了, ...

  4. Java集合之TreeSet

    TreeSet是一个有序的集合,它的作用是提供有序的Set集合.它继承了AbstractSet抽象类,实现了NavigableSet<E>,Cloneable,Serializable接口 ...

  5. struts ajax多级下拉菜单

    先看项目截图: 看看要加入的jar包 除了struts核心的那个几个之外,我们还需要这两个 OK先看struts.xml <?xml version="1.0" encodi ...

  6. 虚拟机linux挂载光盘显示:mount: you must specify the filesystem type

    虚拟机内 linux 挂载光盘显示:mount: you must specify the filesystem type 今天在虚拟机上挂载镜像文件时提示: 初步断定原因有2: 1.在卸载光盘时使用 ...

  7. SharePoint 读取选项字段所有Choise

    对象模型SPFieldChoice SPSite site = SPContext.Current.Site; SPWeb web = site.OpenWeb(SubWebUrl); SPList ...

  8. ruby用来发送互联网邮件

    其实只要你任性的可以,用telnet也是可以发邮件的哦.不过本猫没那么任性,还是用KISS原则来发邮件吧.本篇博文只介绍了如何发邮件,但没涉及收邮件的事,以后如有机会会单独开一篇博文介绍. ruby通 ...

  9. python标准库之MultiProcessing库的研究 (1)

    MultiProcessing模块是一个优秀的类似多线程MultiThreading模块处理并发的包之前接触过一点这个库,但是并没有深入研究,这次闲着无聊就研究了一下,算是解惑吧.今天先研究下appl ...

  10. 听晴明老师从头讲React Native 百度云下载 百度网盘

    适用人群 能使用至少一门主流编程语言:有基本的面向对象的概念:最好有一些web相关的知识和概念. 课程概述 新颖.实用.详尽的ReactNative零基础课程,由国内权威的ReactNative中文网 ...