一、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中数值类型的本质的更多相关文章

  1. js中数值类型相加变成拼接字符串的问题

    如题,弱类型计算需要先进行转型,例: savNum=parseInt(savNum)+parseInt(num);或者使用 number()转型

  2. 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 ...

  3. JS中基本类型与包装类型的关系

    对于JS中一些类型的转化的东西,自己测试并得出的结论,有错误的地方请大大们留言. 不多废话,直接贴代码,测试请直接拷贝全部代码: <!DOCTYPE html> <html> ...

  4. 推断js中的类型:typeof / instanceof / constructor / prototype

    怎样推断js中的类型呢,先举几个样例: var a = "jason"; var b = 123; var c = true; var d = [1,2,3]; var e = n ...

  5. js中boolean类型的理解

    <html> <head> <script type="text/javascript"> var x="12"; aler ...

  6. js中属性类型:数据属性与访问器属性

    js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...

  7. JS中的类型识别

    JS为弱类型语言,所以类型识别对JS而言尤为重要,JS中常用的类型识别方法有4种:typeof.Object.prototype.toString.constructor和instanceof. (1 ...

  8. MSSQL中 数值类型转换为千分号的解决方案

    转自:http://www.maomao365.com/?p=4797 前言:最近需要将报表中关于数值部分的数据,采用千分号的形式展现给用户,下面将讲解如何制作1 将数值类型转换为 money类型2 ...

  9. js中date类型的格式转化为yyyy-MM-dd HH:mm:ss的String类型

    在vue中或其他框架中可以在Date的原型链中添加Format的方法,如ruoyi可以写在main.js中更好,如果写在utils还需要去导入包. 正常的js直接放到utils.js就好 Date.p ...

随机推荐

  1. .NET 7 发布的最后一个预览版Preview 7, 下个月发布RC

    微软在2022年8月9日 发布了.NET 7 Preview 7[1],这是它在11月10日 RTM 之前进入发布候选阶段之前的最后预览版. 预览版 7 已在 Visual Studio 17.4 预 ...

  2. 如何开发一款基于 Vite+Vue3 的在线表格系统(上)

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  3. JavaScript 异步编程(一):认识异步编程

    前言 "异步"的大规模流行是在 Web 2.0浪潮中,它伴随着 AJAX 席卷了 Web.前端充斥了各种 AJAX 和事件,这些都是典型的异步应用场景.现在的 Web 应用已经不再 ...

  4. 给网站添加pjax无刷新,换页音乐不中断

    自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番 最后发现网上实现pjax功能基本上是两种方 ...

  5. [CF1525D] Armchairs (DP / 模拟费用流)

    题面简述 一条线上等距地分布着 n n n 老鼠和 m m m 洞( m ≥ n m\geq n m≥n),这连续 n + m n+m n+m 个位置上要么是老鼠要么是洞,一个老鼠进一个洞,代价是所有 ...

  6. C# 数组 深拷贝 和 数组传参

    前言 C#中引用类型无法使用const,因此传参的时候使用引用类型,一定要注意是否会改变其值.下面介绍几种 数组的 深拷贝方法. 前提 下面的测试代码有一些前提, sw为Stopwatch nForT ...

  7. SpringMvc请求流程源码解析

    目录 SpringMvc请求流程图 请求流程粗讲解 方法细讲 doDispatcher --> 核心 找到Handler#getHandler getHandler(request) mappi ...

  8. WinUI(WASDK)项目实践——优雅的开发上位机应用(新)

    摘要 这就是一个记录自己进行WinUI项目实践的博客,项目开源地址如下,觉得有帮助的可以去看看,因为项目都开源了,所以保姆级的讲解肯定不如直接看代码来的实在了. 电子脑壳项目地址 为什么叫新 因为之前 ...

  9. Windows平台摄像头或屏幕RTMP推送介绍:OBS VS SmartPublisher

    好多开发者问道,既然有了OBS,你们为什么还要开发SmartPublisher? 的确,在我们进行Windows平台RTMP推送模块开发之前,市面上为数不多的Windows平台RTMP推流工具当属OB ...

  10. KingbaseFlySync 无主键过滤器custompkey配置

      无主键过滤器custompkey配置 1.执行如下命令:repkeyclean -dbtype kingbase8 -host 192.168.11.15 -port 54321 -user sy ...