js精度丢失问题-看这篇文章就够了(通俗易懂)

前言

看这篇文章之前你需要了解的知识 ：
进制之间的转换
科学计数法中的E
浮点型的存储机制(单精度浮点数，双精度浮点数)

最通俗易懂的解释

比如一个数 1÷3=0.33333333...... 大家都知道3会一直无限循环，数学可以表示，但是计算机要存储，方便下次取出来再使用，但0.333333...... 这个数 无限循环，你让计算机怎么存储？计算机再大的内存它也存不下，对吧! 所以不能存储一个相对于数学来说的值，只能存储一个近似值，所以当计算机存储后再取出来用时就会出现精度问题。

一 你需要知道的进制知识

世界上有1 0种人：一种是懂得二进制的，另一种是不懂二进制的

二进制

• 基数为2
• 有2个数字，即0和1
• 满2进1

八进制

• 基数为8
• 由8个数字组成，分别是0、1、2、3、4、5、6、7
• 满8进1

十进制

• 我们日常生活中所用的都是十进制，也就是满10进1

十六进制

• 基数为16。
• 由16个数字符号组成，分别是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
• 满16进1

在古代中国当时使用的重量单位就是十六进制，16两为1斤，就有了所谓的“半斤八两”

举个例子

比如 十进制

1 2 3 4 5 6 7 8 9 10 11 ...

当要数10时，就要进1位，也就是十位数写1，个位数写0， 即满十进一

二进制

0 1 10 11 10 11 110 111 101 ...

当要数2的时候，就要进1位了，上一位写1，当前位变成0 即满二进一

进制之间怎么转换？

不会的话自行百度吧

放一个进制转换工具的连接

https:// c.runoob.com/front-end/ 58

二 科学计数法中的E

E是指数的意思，E代表的英文是exponent，E表示10的多少次方的意思

比如 7.823E5 = 782300 这里 E5 表示10的5次方，再比如 54.3E-2 = 0.543 这里 E-2 表示10的-2次方

再补充一点（针对负次方理解）

一个数的负几次方就是这个数的几次方的倒数

比如： 2的负1次方＝2的1次方分之一＝ 1/2

比如： 3的负2次方＝3的2次方分之一＝ 1/9

为什么要会科学记数法，后面会讲

三 浮点型的存储机制(单精度浮点数，双精度浮点数)

浮点型数据类型主要有：单精度 float 、双精度 double

单精度浮点数（float）

单精度浮点数在内存中占4个字节、有效数字8位、表示范围：-3.40E+38 ~ +3.40E+38

双精度浮点数（double）

双精度浮点数在内存中占8个字节、有效数字16位、表示范围：-1.79E+308 ~ +1.79E+308

浮点型常量 数有两种表示形式：

1. 十进制数形式：由数字和小数点组成,且必须有小数点,如 0.123 , 123.0
2. 科学计数法形式：如: 123e3 或 123E3 ,其中 e 或 E 之前必须有数字,且e或E后面的指数必须为 整数 （当然也包括负整数）

浮点型简单来说就是表示带有小数的数据，而恰恰小数点可以在相应的二进制的不同位置浮动，可能是这样就被定义成浮点型了 。~不得不佩服这文化程度，定义个数据名称都这么有深度~

但是！！！

JavaScript 存储小数和其它语言如 Java 和 Python 都不同， JavaScript 中所有数字包括整数和小数都只有一种类型 即 Number类型 它的实现遵循 IEEE 754 标准 ，IEEE 754 标准的内容都有什么，这个咱不用管，我们只需要记住以下一点：

javascript以64位双精度浮点数存储所有Number类型值 即计算机最多存储64位二进制数。

这样的存储结构优点是可以归一化处理整数和小数，节省存储空间

到这里还是不明白双精度浮点数啥意思是吧？没关系，接着看

对于一个整数，我们可以很方便的在十进制与二进制中转换，但是对于一个浮点数来说不是这么容易——因为 小数点的存在 。对于浮点数来说， 小数点的位置不是固定的 （小数点后面的数的个数不定），所以如何存储小数点是一个挑战。后来人们想出用科学计数法通常如这般： 1.01*2^4 来表示浮点数，这样的好处是： 小数点的位置固定下来了 。因为计算机只能用二进制(0或1)表示 ，二进制转换为科学记数法的公式如下：

X=a*2^{e}

a 为浮点数的二进制表示，0或1
e 为小数点移动的位数

举例：27.0表示成二进制为：11011.0 用科学计数法表示为

1.10110*2^4

那么如何存储 1.10110*2^4 这个数呢？

对于double型数据(双精度浮点数)，其长度是8个字节(大小)，

右边52位用来表示小数点后面的数字

中间11位表示e(exponent)小数点移动的位数

左边一位用来表示正负 如图所示：

图解：

• 1位用来表示符号位
• 11位用来表示指数
• 52位表示小数部分

符号位： 1表示正数，0表示负数

比如：-0.896是负数，符号位为0； 0.123是正数，符号位为

指数位： 因为e可以为正，可以为负数。比如 1.10110*2^4 这个e为正数，如果是0.101那么用指数表示就是 1.01*2^-1 ，那么e为-1。同时要求先把 e+指数偏移量，得到的结果再化成二进制，就是我们的指数位

小数部分(也称为阶数)： 二进制下转换为科学记数法后小数点后面的数字。如 1.1011^4 的小数位为1011，它的总位数应为52位， 位数不够就用0补齐 因此也可以这样理解小数点的偏移量最大为52位,取点符号位和指数 那么这个52位就表示最大整数位为52位 即JS 中能精准表示的最大整数是 Math.pow(2, 53) 十进制即 9007199254740992

指数偏移量： 指数偏移量公式：

X=2^{k-1}

k为指数位个数（如上图所示双精度浮点数的指数位为11，套用公式即 X=2^{11-1} =1023）
所以 双精度浮点数的指数偏移量都为1023

计算机存储二进制即为： 符号位 + 指数位 + 小数部分 (阶数)

举例：

27.5 转换为二进制11011.1

11011.1转换为科学记数法 1.10111*2^4

符号位 为1(正数)

指数位 为4+指数偏移量1023 即1027 因为它是十进制的需要转换为二进制即 10000000011

小数部分 为10111，补够52位即： 1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

指数偏移量 为 2^{11-1} =1023

所以27.5存储为计算机的二进制标准形式为

符号位 + 指数位 + 小数部分 (阶数)

0+10000000011+011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

即：

0100 0000 0011 1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

正好64位

注意区分：十进制转换为 二进制数只保留52位有效数字(科学记数法)，而 计算机存储双精度浮点数为64位

再捋一下

计算机存储一个27.5的数字

• 首先把这个数字转换为二进制 11011.1
• 再把二进制转换为科学记数法 1.10111*2^4
• 又因js存储数字用的是双精度浮点数【最多存储64位】 即 符号位【1】+指数位【4+1023(固定偏移量)=> 10000000011】+小数部分【10111(52位不够用0补齐)】
• 即 0100 0000 0011 1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

那小数点前面的整数位不用存储吗？

不用 因为转化为二进制之后首位数都是1 ,计算机会自动处理

Ok~现在咱们回到正题，重点来了！！！

看一些JS数字精度丢失的一些典型问题

// 加法 =====================
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001
// 减法 =====================
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
// 乘法 =====================
19.9 * 100 = 1989.9999999999998
0.8 * 3 = 2.4000000000000004
35.41 * 100 = 3540.9999999999995
// 除法 =====================
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

为什么0.1 +0.2===0.30000000000000004 ？

我们来推导一下0.1

0.1>>>二进制>>>科学记数法>>实际存储时的形式[64位] 符号位+(指数位+指数偏移量)+小数部分) 即：

0.1>>>0.0001100110011001100110011001100110011001100110011001101>>> 1.100110011001100110011001100110011001100110011001101 * 2^(-4)>>>

0011111110111001100110011001100110011001100110011001100110011010

同理，0.2

0.2>>二进制>>>科学记数法>>实际存储时的形式[64位](符号位+指数位+小数部分) 即

0.2>>>0.001100110011001100110011001100110011001100110011001101>>>1.100110011001100110011001100110011001100110011001101 * 2^(-3)>>>0011111111001001100110011001100110011001100110011001100110011010

可以看出来在转换为二进制时

0.1 >>> 0.0001 1001 1001 1001...（1001无限循环）

0.2 >>> 0.0011 0011 0011 0011...（0011无限循环）

就像一些无理数不能有限表示，如 圆周率 3.1415926...，1.3333... 等， 在转换为二进制的科学记数法的形式时只保留64位有效的数字，此时只能模仿十进制进行四舍五入了，但是二进制只有 0 和 1 两个，于是变为 0 舍 1 入。在这一步出现了错误，那么一步错步步错，那么在计算机存储小数时也就理所应当的出现了误差。这即是计算机中部分浮点数运算时出现误差，这就是丢失精度的根本原因

将0.1和0.2的二进制形式按实际展开，末尾补零相加，结果如下

0.00011001100110011001100110011001100110011001100110011010

+0.00110011001100110011001100110011001100110011001100110100

=0.01001100110011001100110011001100110011001100110011001110

0.1+0.2 >> 0.0100 1100 1100 1100...（1100无限循环）

则0.1 + 0.2的结果的二进制数科学记数法表示为为1.001100110011001100110011001100110011001100110011010 * 2^(-2), 省略尾数最后的0，即 1.00110011001100110011001100110011001100110011001101 * 2^(-2)， 因此(0.1+0.2)实际存储时的形式是 0011111111010011001100110011001100110011001100110011001100110100
因计算机存储位数的限制而截断的二进制数字，再转换为十进制，就成了0.30000000000000004

推导完成

总结：计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式，然后计算机以自己的规则{符号位+(指数位+指数偏移量的二进制)+小数部分}存储二进制的科学记数法,因为存储时有位数限制（64位），并且某些十进制的浮点数在转换为二进制数时会出现无限循环，会造成二进制的舍入操作(0舍1入)，当再转换为十进制时就造成了计算误差。

精度丢失的场景分析

为什么 x=0.1 能得到 0.1？

存储二进制时小数点的偏移量最大为52位，最多可表示的十进制为9007199254740992，对应科学计数尾数是 9.007199254740992，这也是 JS 最多能表示的精度。它的长度是 16，所以可以使用 toPrecision(16) 来做精度运算，js自动做了这一部分处理，超过的精度会自动做凑整处理。于是就有：

0.10000000000000000555.toPrecision(16) //0.1000000000000000 去掉末尾的零后正好为0.1

但你看到的 `0.1` 实际上并不是 `0.1`。不信你可用更高的精度试试：

0.1.toPrecision(21)=0.100000000000000005551

大数危机

9999999999999999 == 10000000000000001===true ?

16位和17位数竟然相等

大整数的精度丢失和浮点数本质上是一样的，前面已经说了，存储二进制时小数点的偏移量最大为52位，计算机存储的为二进制，而能存储的二进制为62位，超出就会有舍入操作，因此 JS 中能精准表示的最大整数是 Math.pow(2, 53)，十进制即9007199254740992大于 9007199254740992 的可能会丢失精度

大数转换为二进制

9007199254740992 >> 10000000000000...000 精度未丢失
9007199254740992 + 1 >> 10000000000000...001 精度丢失
9007199254740992 + 2 >> 10000000000000...010 精度未丢失

以上，可以知道看似有穷的数字, 在计算机的二进制表示里却是无穷的，由于存储位数限制因此存在“舍去”，精度丢失就发生了，此时两个大数在计算机中的二进制正数好相等

因此 9999999999999999 == 10000000000000001===true

使用parseInt()时也会有这种问题 parseInt()把字符串转换为整数后存储机制和浮点数是一样的，当大于 9007199254740992 的可能会丢失精度

在淘宝早期的订单系统中把订单号当作数字处理，后来随意订单号暴增，已经超过了9007199254740992，最终的解法是把订单号改成字符串处理。 要想解决大数的问题你可以引用第三方库 bignumber.js，原理是把所有数字当作字符串，重新实现了计算逻辑 ，缺点是性能比原生的差很多。所以原生支持大数就很有必要了，现在 TC39 已经有一个 Stage 3 的提案 proposal bigint，大数问题有问彻底解决

tofixed()对于小数最后一位为5时进位不正确的问题

//firefox/chrome中toFixed 兼容性问题
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.33  错误
1.3335.toFixed(3) // 1.333 错误
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33333 错误
1.3333335.toFixed(6) // 1.333333 错误

可以看到，小数点位数为2，5时四舍五入是正确的，其它是错误。Firefox 和 Chrome的实现没有问题，根本原因还是计算机里浮点数精度丢失的问题

如：1.005.toFixed(2) 返回的是 1.00 而不是 1.01。

原因： 1.005 实际对应的数字是 1.00499999999999989，在四舍五入时全部被舍去

1.005.toPrecision(21) //1.00499999999999989342

修复方式1

/*
 * 修复firefox/chrome中toFixed兼容性问题
 * firefox/chrome中，对于小数最后一位为5时进位不正确，
 * 修复方式即判断最后一位为5的，改成6，再调用toFixed
   number {原始数字}
   precision {位数}
function toFixed(number, precision) {
    var str = number + ''
    var len = str.length
    var last = str.substring(len - 1, len)
    if (last == '5') {
        last = '6'
        str = str.substring(0, len - 1) + last
        return (str - 0).toFixed(precision)
    } else {
        return number.toFixed(precision)
console.log(toFixed(1.333335, 5))

修复方式2

//先扩大再缩小法 
function toFixed(num, s) {
    var times = Math.pow(10, s)
    // 0.5 为了舍入
    var des = num * times + 0.5
    // 去除小数
    des = parseInt(des, 10) / times
    return des + ''
console.log(toFixed(1.333332, 5))

ES6在Number对象上新增了一个极小的常量——Number.EPSILON

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"

引入一个这么小的量，目的在于为浮点数计算设置一个误差范围，如果误差能够小于Number.EPSILON，我们就可以认为结果是可靠的。

误差检查函数（出自《ES6标准入门》-阮一峰）

function withinErrorMargin (left, right) {
    return Math.abs(left - right) < Number.EPSILON
withinErrorMargin(0.1+0.2, 0.3)

数据展示类

当你拿到 1.4000000000000001 这样的数据要展示时，建议使用 toPrecision 凑整并 parseFloat 转成数字后再显示，如下：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4  // true

封装成方法就是:

function strip(num, precision = 12) {
  return +parseFloat(num.toPrecision(precision));

为什么选择 12 做为默认精度？

这是一个经验的选择，一般选12就能解决掉大部分0001和0009问题，而且大部分情况下也够用了，如果你需要更精确可以调高。

即对于运算类操作，如 +-*/，就不能使用 toPrecision 了。正确的做法是把小数转成整数后再运算。【先扩大再缩小】

回到浮点数的计算问题！

我们可以把需要计算的数字升级（乘以10的n次幂）成计算机能够精确识别的整数，等计算完成后再进行降级（除以10的n次幂），这是大部分语言处理精度问题常用方法 例如：

0.1 + 0.2 == 0.3 //false
(0.1*10 + 0.2*10)/10 == 0.3 //true
(0.1*100 + 0.2*100)/100 == 0.3 //true
35.41 * 100 == 3540.9999999999995 // true
// 即使扩大再缩小 还是会有丢失精度的问题
(35.41*100*100)/100==3541 //false  
// 解决方法 如果是乘法的话可以用Math.round()解决【可能不具有普适性】
 Math.round(35.41 * 100)===3541 //true

结论：不能单纯的用扩大缩小法来解决丢失精度的问题 。我们可以将浮点数toString后indexOf(".")，记录一下两个值小数点后面的位数的长度，做比较，取最大值(即为扩大多少倍数)，计算完成之后再缩小回来。

先举一个简单的例子

// 加法运算
function add(num1, num2) {
  const num1Digits = (num1.toString().split('.')[1] || '').length
  const num2Digits = (num2.toString().split('.')[1] || '').length
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits))
  return (num1 * baseNum + num2 * baseNum) / baseNum

以上方法能适用于大部分场景。遇到科学计数法如 2.3e+1时还需要特别处理一下。

因为当数字个数超过21位时数字会强制转为科学计数法形式显示。

上面例子只适用于加减法运算。 遇到乘除时就会有问题。乘除是有另一种转换规则，不过本质上还是扩大缩小法，只不过逻辑变了。

以下是处理加减乘除的完整的代码如下：

/**
* floatObj 包含加减乘除四个方法，能确保浮点数运算不丢失精度
* 精度丢失问题（或称舍入误差，其根本原因是二进制和实现位数限制有些数无法有限表示
* 以下是十进制小数对应的二进制表示
*      0.1 >> 0.0001 1001 1001 1001…（1001无限循环）
*      0.2 >> 0.0011 0011 0011 0011…（0011无限循环）
* 计算机里每种数据类型的存储是一个有限宽度，比如 JavaScript
  使用 64 位存储数字类型，因此超出的会舍去。舍去的部分就是精度丢失的部分。
* ** method **
*  add / subtract / multiply /divide
* ** explame **
*  0.1 + 0.2 == 0.30000000000000004 （多了 0.00000000000004）
*  0.2 + 0.4 == 0.6000000000000001  （多了 0.0000000000001）
*  19.9 * 100 == 1989.9999999999998 （少了 0.0000000000002）
* floatObj.add(0.1, 0.2) === 0.3
* floatObj.multiply(19.9, 100) === 1990
        var floatObj = function () {
             * 判断obj是否为一个整数 整数取整后还是等于自己。利用这个特性来判断是否是整数
            function isInteger(obj) {
                // 或者使用 Number.isInteger()
                return Math.floor(obj) === obj
             * 将一个浮点数转成整数，返回整数和倍数。如 3.14 >> 314，倍数是 100
             * @param floatNum {number} 小数
             * @return {object}
             *   {times:100, num: 314}
            function toInteger(floatNum) {
                // 初始化数字与精度 times精度倍数  num转化后的整数
                var ret = { times: 1, num: 0 }
                var isNegative = floatNum < 0  //是否是小数
                if (isInteger(floatNum)) {  // 是否是整数
                    ret.num = floatNum
                    return ret  //是整数直接返回
                var strfi = floatNum + ''  // 转换为字符串
                var dotPos = strfi.indexOf('.')
                var len = strfi.substr(dotPos + 1).length // 拿到小数点之后的位数
                var times = Math.pow(10, len)  // 精度倍数
                /* 为什么加0.5?
                    前面讲过乘法也会出现精度问题
                    假设传入0.16344556此时倍数为100000000
                    Math.abs(0.16344556) * 100000000=0.16344556*10000000=1634455.5999999999 
                    少了0.0000000001
                    加上0.5 0.16344556*10000000+0.5=1634456.0999999999 parseInt之后乘法的精度问题得以矫正
                var intNum = parseInt(Math.abs(floatNum) * times + 0.5, 10)
                debugger
                ret.times = times
                if (isNegative) {
                    intNum = -intNum
                ret.num = intNum
                return ret
             * 核心方法，实现加减乘除运算，确保不丢失精度
             * 思路：把小数放大为整数（乘），进行算术运算，再缩小为小数（除）
             * @param a {number} 运算数1
             * @param b {number} 运算数2
            function operation(a, b, op) {
                var o1 = toInteger(a)
                var o2 = toInteger(b)
                var n1 = o1.num  // 3.25+3.153
                var n2 = o2.num
                var t1 = o1.times
                var t2 = o2.times
                var max = t1 > t2 ? t1 : t2
                var result = null
                switch (op) {
                    // 加减需要根据倍数关系来处理
                    case 'add':
                        if (t1 === t2) { // 两个小数倍数相同
                            result = n1 + n2
                        } else if (t1 > t2) {
                            // o1 小数位 大于 o2
                            result = n1 + n2 * (t1 / t2)
                        } else {  // o1小数位小于 o2
                            result = n1 * (t2 / t1) + n2
                        return result / max
                    case 'subtract':
                        if (t1 === t2) {
                            result = n1 - n2
                        } else if (t1 > t2) {
                            result = n1 - n2 * (t1 / t2)
                        } else {
                            result = n1 * (t2 / t1) - n2
                        return result / max
                    case 'multiply':
                        // 325*3153/(100*1000) 扩大100倍 ==>缩小100倍
                        result = (n1 * n2) / (t1 * t2)
                        return result
                    case 'divide':
                        // (325/3153)*(1000/100)  缩小100倍 ==>扩大100倍
                        result = (n1 / n2) * (t2 / t1)
                        return result
            // 加减乘除的四个接口
            function add(a, b) {
                return operation(a, b, 'add')
            function subtract(a, b) {
                return operation(a, b, 'subtract')
            function multiply(a, b) {
                return operation(a, b, 'multiply')
            function divide(a, b) {
                return operation(a, b, 'divide')
            return {
                add: add,
                subtract: subtract,