zoukankan      html  css  js  c++  java
  • 你可能不知道的 JavaScript 中数字取整

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

    常用的直接取整方法

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

    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
  • 相关阅读:
    MySQL数据库“局部”乱码
    怎么用js设置a标签点击链接改变当前颜色
    原生JS获取url汇总
    原生JS获取地址了参数
    js如何切割字符串
    MySQL用户管理及SQL语句详解
    《计算机网络》谢希仁(第7版) 第四章 c语言http://c.biancheng.net/cpp/html/3137.html
    《计算机网络》谢希仁(第7版) 第三章
    《计算机网络》谢希仁(第7版) 第二章
    《计算机网络》谢希仁(第7版) 第一章
  • 原文地址:https://www.cnblogs.com/curationFE/p/js_float_integer.html
Copyright © 2011-2022 走看看