在 JavaScript 中,对数值进行四舍五入操作的场景有以下几种:

  • 向上取整:ceil
  • 向下取整:floor
  • 四舍五入:round
  • 固定精度:toFixed
  • 固定长度:toPrecision
  • 取整:parseInt、位运算

本文将对这 6 个 API 进行简单的讲解和总结。

1、向上取整: ceil

ceil 是`天花板`的意思,表示在一个数值之上,且距离该数最近的整数。ceil 是 Math 对象的静态方法,需要传递一个参数,其调用方法如下:

Math.ceil(12.34); //13
Math.ceil(12.68); //13

2、向下取整: floor

floor 是`地板`的意思,表示在一个数值之下,且距离该数最近的整数。floor 是 Math 对象的静态方法,需要传递一个参数,其调用方法如下:

Math.floor(12.34); // 12
Math.floor(12.68); // 12

3、四舍五入: round

round 的作用是对一个浮点数进行四舍五入,并保留整数位。round 也是 Math 对象的静态方法,也需要传递一个参数,其调用方法如下:

Math.round(12.34); // 12
Math.round(12.54); // 13

4、固定精度: toFixed

toFixed 和上面三个方法不同,它是 Number 原型上实现的一个方法,其作用是对一个浮点数进行四舍五入并保留固定小数位。 toFixed 需要传递一个参数,其调用方式如下:

100.456001.toFixed(2); // 100.46
100.456001.toFixed(3); // 100.456

5、固定长度: toPrecision

toPrecison 也是 Number 原型上实现的一个处理浮点数的方法,和 toFixed 不同的是,它是对一个浮点数进行四舍五入并保留固定长度的有效数字,包括整数部分。

99.456001.toPrecision(5);  // 99.456
100.456001.toPrecision(5); // 100.46

6、取整: parseInt

parseInt 是 全局对象 window上的一个方法,其作用是对一个可转换的数值取整,分为以下两种情况:

1. 将字符串数值转化为 Number 整数,对字符串的每一个字符进行转化,直到遇到不可转化的字符(包括小数点)停止。

2. 对浮点类型数值取整,忽略小数部分,不做四舍五入处理

// 字符串数值
parseInt('100') ; // 100
parseInt('100axt'); // 100
parseInt('100xh20'); // 100
parseInt('100.78'); // 123
// Number 类型
parseInt(100.12) ; // 100
parseInt(100.78); // 100

7、取整: 位运算

  • | 0   : 和 0 进行 按位或 操作,原值不变
  • ~~   : 两次 按位非 操作得到的也是原值
  • >> 0 : 右移 0 位
  • << 0 : 左移 0 位
  • >>> 0: 无符号右移 0 位

这些位运算符在实现取整操作时,会表现出一些共同的特征:

  • 对于 Number 类型来说,直接应用位操作, 和 parseInt 得到的结果几乎一样;
  • 对于其他类型,内部会先通过 Number() 将其转换为一个数值,然后再应用位操作。
  • 对特殊 NaN 和 Infinity 值应用位操作时,这两个值都会被当成 0 来处理 。

对于 Number 类型,直接应用位运算。

~~ 100.12;  //  100
100.78 | 0; // 100
100.45 >> 0; // 100
100.50 << 0; // 100
100.96 >>> 0; // 100

对于其他类型,先使用 Number() 转换为数值类型,再进行位运算。

~~ '100.12'  // 100, Number('100.12') == 100.12
'100.50' >> 0; // 100,Number('100.50') == 100.50
'100.96' << 0; // 100,Number('100.96') == 100.96
~~ 'abc' // 0 , Number('abc') == NaN
'12abc' >> 0; // 0, Number('12abc') == NaN
undefined | 0 ; // 0, Number(undefined) == NaN
~~null; // 0 , Number(null) == 0
true >> 0; // 1 , Number(true) == 1
false >> 0; //0 , Number(false) == 0
[] << 0; // 0 , Number([]) == 0
~~NaN; // 0
Infinity >>> 0; // 0

位运算作用于最基本的层次上,即按内存中表示数值的位来操作数值。

位运算能取整的原因是:

ECMAScript 中的数值以64位双精度浮点数存储,但位运算只能作用于整数,因此要先将 64 位的浮点数转换成 32 位的整数,然后再进行位运算,最后再将计算结果转换成64位浮点数存储。

原创发布 @ 一像素  2018.06

JavaScript 对数据处理的5个API的更多相关文章

  1. JavaScript中对数组和数组API的认识

    JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...

  2. javascript 内置对象及常见API

    javascript 内置对象及常见API 2012-09-02 15:17 571人阅读 评论(0) 收藏 举报 javascript正则表达式文档浏览器urlstring Javascript内置 ...

  3. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  4. 盘点JavaScript里好用的原生API

    转自:https://segmentfault.com/a/1190000002753931 解析字符串对象 我们都知道,JavaScript对象可以序列化为JSON,JSON也可以解析成对象,但是问 ...

  5. JavaScript文件加载器LABjs API详解

    在<高性能JavaScript>一书中提到了LABjs这个用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,顾名思义 ...

  6. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  7. [Javascript] Intro to the Web Audio API

    An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...

  8. JavaScript:我总结的数组API

    栈/队列 数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片) ...

  9. JavaScript JSON 数据处理

    在JavaScript 也自带了 JSON 格式的处理 <!doctype html> <html> <script> var test_json_str = { ...

随机推荐

  1. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  2. python+uwsgi导致redis无法长链接引起性能下降问题记录

    今天在部署python代码到预生产环境时,web站老是出现redis链接未初始化,无法连接到服务的提示,比对了一下开发环境与测试环境代码,完全一致,然后就是查看各种日志,排查了半天也没有查明是什么原因 ...

  3. nginx源码分析之网络初始化

    nginx作为一个高性能的HTTP服务器,网络的处理是其核心,了解网络的初始化有助于加深对nginx网络处理的了解,本文主要通过nginx的源代码来分析其网络初始化. 从配置文件中读取初始化信息 与网 ...

  4. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. Java 为值传递而不是引用传递

    ——reference Java is Pass by Value and Not Pass by Reference 其实这个问题是一个非常初级的问题,相关的概念初学者早已掌握,但是时间长了还是容易 ...

  6. 强强联合,Testin云测&云层天咨众测学院开课了!

    Testin&云层天咨众测学院开课了! 共享经济时代,测试如何赶上大潮,利用碎片时间给女票或者自己赚点化妆品钱?   2016年12月13日,Testin联手云层天咨带领大家一起推开众测的大门 ...

  7. 微信小程序IDE(微信web开发者工具)安装、破解手册

    1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...

  8. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  9. zookeeper(单机/集群)安装与配置

    一.安装与单机配置 1.下载: wget http://archive.apache.org/dist/zookeeper/stable/zookeeper-3.4.6.tar.gz 如果网站下载不了 ...

  10. 枚举:enum

    枚举 所谓枚举就是指定好取值范围,所有内容只能从指定范围取得. 例如,想定义一个color类,他只能有RED,GREEN,BLUE三种植. 使用简单类完成颜色固定取值问题. 1,就是说,一个类只能完成 ...