JS中数值类型的本质
一、JS中的数值类型
众所JS爱好友周知,JS中只有一个总的数值类型——number,它包含了整型、浮点型等数值类型。其中,浮点数的实现思想有点复杂,它把一个数拆成两部分来存储。第一部分是有效位数,也可以称作系数、分数或者尾数;第二部分被称为指数,表示小数点位应该插在系数的哪个位置。在JS中,浮点数由IEEE 754标准非完全实现。一个number包含1个符号位,11位指数为和53位有效位数。IEEE 754基于二进制运作,分为两个部分组成。第一部分包含两个子部分:符号位和有效位数。符号位在最高位中,该位为1表示该数是负数,为0则表示正数;有效位数在64位的最低几位中,通常表示一个范围内的小数。
0.5 <= 有效位数 < 1.0
按照这种表示法,有效位数的最高位理论上始终为1。因此,该位实际上并不需要被存放于number 当中,于是就多出了能用的1位,称作彩蛋位。
第二部分指数存在于符号位和有效位数之间那些位中。存放号后,可以用如下公式表示一个数值:
数值 = 符号位 * 系数 * (2 ** 指数)
下面来分析一下数值类型的本质。
二、JS中数值类型的本质
在了解JS中数值类型的本质之前,我们先来看一个问题:0.1 + 0.2 = ?。
我相信很多人都见过JS中这个经典的计算。是的,0.1 + 0.2 != 0.3,而是等于0.30000000000000004。这是为什么呢,下面我们就来剖析一下这种现象出现的本质原因。看一下代码:
function deconstruct(number) {
let sign = 1;
let coefficient = number;
let exponent = 0;
//将符号位从系数中提取出来
if (coefficient < 0) {
coefficient = -coefficient;
sign = -1;
}
if (Number.isFinite(number) && number !== 0) {
//-1128 就是 Number.MIN_VALUE的指数减去有效位数再减去彩蛋位的结果
exponent = -1128;
let reduction = coefficient;
//将系数不断除以 2,直到趋近于 0 为止
while (reduction !== 0) {
//将除的次数与-1128相加到exponent
exponent += 1;
reduction /= 2;
}
//当指数为 0 的时候,可以认为数值是一个整数
//如果指数不为0,则通过校正系数来使其为 0
reduction = exponent;
while (reduction > 0) {
coefficient /= 2;
reduction -= 1;
}
while (reduction < 0) {
coefficient *= 2;
reduction += 1;
}
}
return {
sign,
coefficient,
exponent,
number
};
}
现在,我们看看传入1的结果:

根据数值公式计算:1 * 9007199254740992 * (2 ** -53) = 1 。
这显然是没有问题的。
那么我们将0.1传入函数呢,会产生怎样的结果,接着来看。

根据数值公式计算:
1 * 7205759403792794 * 2 ** -56 = 0.1000000000000000055511151231257827021181583404541015625。
结果出人意料!JS无法精确的处理小数。这是由IEEE 754机制决定的。
因此,0.1 + 0.2 != 0.3很好解释了。
那么,我们怎么在业务中,使得0.1 + 0.2 = 0.3呢?下面给出解决办法:

Number.toFixed()用于保留小数点具体位数进行四舍五入,参数默认为0,则不保留小数。Number.toPrecision()用于保留并四舍五入到指定的数字位数,默认全部保留,参数为0,则保留1位有效数字。注意,以上两个函数均返回string类型的值,所以在这里需要将其显示转换为number类型。
JS中数值类型的本质的更多相关文章
- js中数值类型相加变成拼接字符串的问题
如题,弱类型计算需要先进行转型,例: savNum=parseInt(savNum)+parseInt(num);或者使用 number()转型
- JS中Float类型加减乘除 修复 JQ 操作 radio、checkbox 、select LINQ to SQL:Where、Select/Distinct LINQ to SQL Count/Sum/Min/Max/Avg Join
JS中Float类型加减乘除 修复 MXS&Vincene ─╄OvЁ &0000027─╄OvЁ MXS&Vincene MXS&Vincene ─╄Ov ...
- JS中基本类型与包装类型的关系
对于JS中一些类型的转化的东西,自己测试并得出的结论,有错误的地方请大大们留言. 不多废话,直接贴代码,测试请直接拷贝全部代码: <!DOCTYPE html> <html> ...
- 推断js中的类型:typeof / instanceof / constructor / prototype
怎样推断js中的类型呢,先举几个样例: var a = "jason"; var b = 123; var c = true; var d = [1,2,3]; var e = n ...
- js中boolean类型的理解
<html> <head> <script type="text/javascript"> var x="12"; aler ...
- js中属性类型:数据属性与访问器属性
js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...
- JS中的类型识别
JS为弱类型语言,所以类型识别对JS而言尤为重要,JS中常用的类型识别方法有4种:typeof.Object.prototype.toString.constructor和instanceof. (1 ...
- MSSQL中 数值类型转换为千分号的解决方案
转自:http://www.maomao365.com/?p=4797 前言:最近需要将报表中关于数值部分的数据,采用千分号的形式展现给用户,下面将讲解如何制作1 将数值类型转换为 money类型2 ...
- js中date类型的格式转化为yyyy-MM-dd HH:mm:ss的String类型
在vue中或其他框架中可以在Date的原型链中添加Format的方法,如ruoyi可以写在main.js中更好,如果写在utils还需要去导入包. 正常的js直接放到utils.js就好 Date.p ...
随机推荐
- [NOI2021] 密码箱 (平衡树,连分数,Stern-Brocot 树,矩阵)
题面 记忆犹新 题解 f f f 函数值给得非常明显,一看就给人一种熟悉感--这不是连分数吗? 众所周知,连分数有个递推公式,即 p i = a i p i − 1 + p i − 2 q i = a ...
- [多校 NOIP 联合模拟 20201130 T4] ZZH 的旅行(斜率优化dp,启发式合并,平衡树)
题面 题目背景 因为出题人天天被 ZZH(Zou ZHen) 吊打,所以这场比赛的题目中出现了 ZZH . 简要题面 数据范围 题解 (笔者写两个log的平衡树和启发式合并卡过的,不足为奇) 首先,很 ...
- CF593D Happy Tree Party(不用树剖)
题面 题解 我们发现,对于除法有效的xi最小为2,yi最多除log次就会变成0,所以我们可以每次找路径上下一个>=2的xi,暴力除,当发现y=0时就停止 于是我们维护每个点向上走一直走到根最近的 ...
- k8s命令补全方法
正常安装了k8s后,使用kubect 工具后接的命令不能直接tab补全 命令补全方法: yum -y install bash-completionsource /usr/share/bash-com ...
- 第四十四篇:Git分支(关键知识点)
好家伙, GIT分支 分支就像是平行宇宙,两个平行宇宙自己平行,不相干扰,平安无事, 某一天它想不开,合并了.然后就变成了我写这篇博客的动机了. 1.关于Git分支中常用的指令 列出所有分支 git ...
- 如何将原生微信小程序页面改成原生VUE框架的H5页面
项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...
- KingbaseES V8R6集群部署案例之---Windows环境配置主备流复制(同一主机)
案例说明: 目前KingbaseES V8R6的Windows版本不支持数据库sys_rman的物理备份,可以考虑通过建立主备流复制实现数据库的异机物理备份.本案例详细介绍了,在Windows环境下建 ...
- spark 解决 java.util.Date is not a valid external type for schema of Date
出错伪代码如下: //出错的点在这里 import java.util.Date ... val t_rdd = t_frame.rdd.map(row => { val photo_url = ...
- 微软出品自动化神器Playwright,不用写一行代码(Playwright+Java)系列(一) 之 环境搭建及脚本录制
一.前言 半年前,偶然在视频号刷到某机构正在直播讲解Playwright框架的使用,就看了一会,感觉还不错,便被种草,就想着自己有时间也可以自己学一下,这一想着就半年多过去了. 读到这,你可能就去百度 ...
- 解决element-ui中组件【el-upload】一次性上传多张图片的问题
element-ui 中的组件 el-upload默认的行为是一张图片请求一次,在项目需求中,通常是多张图片要求只向后台请求一次,下面的做法就是为了实现这样的需求 前端 <el-upload r ...