一、背景


最近做 dashborad 图表时,涉及计算小数且四舍五入精确到 N 位。后发现 js 算出来的结果跟我预想的不一样,看来这里面并不简单……

二、JS 与 精度


1、精度处理

首先明确两点:

  • 1、小数才会涉及精度的概念
  • 2、小数的(存储和)运算涉及 JS 的精度处理

在现实中,我们运算小数,不会出现任何问题。但是 JS (编程语言)里,却不是这样。

2、精度丢失

例如,在 JS 里执行:

0.1 + 0.2
0.30000000000000004 0.3 - 0.1
0.19999999999999998 0.1 * 0.1
0.010000000000000002 0.3 / 0.1
2.9999999999999996

可以看出,JS 运算小数的结果,并不是我们预想的那样。这就是精度丢失的问题。

(1)问:精度丢失会引发什么问题?

答:

  • 1、让判断等于(===)的逻辑出错。比如让 0.1 + 0.2 === 0.3false
  • 2、让本来可以预想到的结果精度变的特别大,小数点后位数特别长。比如若要前端显示,会特别难看。
(2)问:为什么会出现精度丢失?

答:这跟浮点数在计算机内部(用二进制存储)的表示方法有关。

JS 采用 IEEE 754 标准的 64 位双精度浮点数表示法,这个标准是20世纪80年代以来最广泛使用的浮点数运算标准,为许多CPU与浮点运算器所采用,也被很多语言如 java、python 采用。

这个标准,会让大部分的十进制小数都不能用二进制浮点数来精确表示(比如转成二进制就会变成无限小数)。所以一般情况下,你输入的十进制小数仅由实际存储在计算机中的近似的二进制浮点数表示

然而,许多语言在处理的时候,在一定误差范围内(通常极小)会将结果修正为正确的目标数字,而不是像 JS 一样将存在误差的真实结果转换成最接近的小数输出。

具体原理可以看《浮点数的二进制表示 —— 阮一峰》,这里不赘述了。

(3)问:怎么避免精度丢失?

方法一:中途变成整数来计算

比如我们要计算 0.1 + 0.2,就先把数字全部乘以 10 使之变成整数,再相加,最后把结果除以 10。

因为整数是不会出现精度丢失的问题。(况且整数根本就没有精度)

其实很多第三方的库,原理也是用的这个。

方法二:使用第三方库

  • Math.js
  • decimal.js
  • big.js
  • bignumber.js

方法三:使用 toFixed() 函数(推荐)

console.log(parseFloat((0.3 + 0.1).toFixed(1))) // 0.4

注意:toFixed() 最好跟 parseFloat() 搭配使用。因为 toFixed 返回的是字符串

问:toFixed() 为什么要返回字符串,而不是小数?【重点】

答:因为 JavaScript 的数据类型,关于数字的只有 number 类型(不像 C 语言 or 数据库等还分 int、float、double),而对于 number 类型来说, 会忽略前置0和小数点后的后置0(比如 001 是 1; 1.1000 是 1.1)。

在下面还会继续介绍 toFixed() 的关于舍入的特性。

三、JS 与 近似计算方法


在上面提到的:

  • 精度计算
  • 精度丢失

都会有可能让精度发生变化(即小数点后位数变化)。如果我们需要统一精度,那就需要用到近似(计算)方法

1、四舍五入

(1)规则

四舍五入是最常见的近似计算方法,具体规则顾名思义,不赘述了。

(2)Math.round()

给定数字的值四舍五入到最接近的整数

Math.Round(2.4) // 2
Math.Round(2.5) // 3
(3)_.round() —— lodash

给定数字的值四舍五入到最接近的(可以是小数)。

lodash 的这个方法,我看了源码,底层也是调用的 Math.round(),只是加了一些额外功能,比如第二个参数,可以指定四舍五入的精度。

const _ = require('lodash');
_.round(1.04, 1) //1
_.round(1.05, 1) //1.1
(4)四舍五入真的公平吗?【重点】

因为自己很小的时候就在学校学到了四舍五入,一直想当然的认为四舍五入是公平的,等到现在细想的时候,才发现,真的不公平

例如,想象一个场景,你的余额宝,每天会自动结算利息,但是可能(按照利息规则)算出来的值的小数有很多位,假设支付宝只支持到角,那么支付宝系统帮你记账的时候,肯定会给你近似计算,如果他用的是四舍五入的方法:

const _ = require('lodash');
console.log(_.round(1.01, 1)) //1 (我亏了0.01)
console.log(_.round(1.02, 1)) //1 (我亏了0.02)
console.log(_.round(1.03, 1)) //1 (我亏了0.03)
console.log(_.round(1.04, 1)) //1 (我亏了0.04)
console.log(_.round(1.05, 1)) //1.1 (我赚了了0.05)
console.log(_.round(1.06, 1)) //1.1 (我赚了0.04)
console.log(_.round(1.07, 1)) //1.1 (我赚了0.03)
console.log(_.round(1.08, 1)) //1.1 (我赚了0.02)
console.log(_.round(1.09, 1)) //1.1 (我赚了0.01)

首先,1 块钱整和 2 块钱整可以不用考虑,其次,如果假设 1.01 到 1.09 这 9 个数出现的概率一致。那么最后支付宝肯定要亏本,因为 1.05 划分到 1.1 是不公平的。

也可以画一个数轴来体现:

那么如何做到更公平的近似计算呢?可以用下面介绍的银行家舍入。

2、银行家舍入

国际通行的是 银行家舍入(Banker's rounding)算法 。

是 IEEE 规定的舍入标准。因此所有符合 IEEE 标准的语言都应该是采用这一规则的。

(1)规则

银行家舍入又称四舍六入五取偶(又称四舍六入五留双)法。

所以规则就是:四舍六入五考虑,五后非空就进一,五后为空看奇偶,五前为偶应舍去,五前为奇要进一

关键就是“五后为空看奇偶”,因为如果是舍入位是5,无论是舍还是入都不公平,那就交给它前一位的奇偶性来判断,因为奇偶性分布概率是公平的。

当然只能说银行家舍入算法比四舍五入算法更科学,而不能说它就是绝对正确,而四舍五入就是错误的,因为这些结果都是基于统计数据产生的,前提就是这些数据摇符合随机性分布的要求。

(2)使用

目前 JS 上原生不支持,如果想使用:

3、toFixed

toFixed() 部分符合银行家舍入的规则。

(1)四舍六入

符合

(2)五后非空就进一

符合

(3)五后为空看奇偶,五前为偶应舍去,五前为奇要进一

部分符合

//                           //toFixed结果  //银行家舍入结果
console.log(1.05.toFixed(1)) //1.1(+0.05) 1.0(-0.05)
console.log(1.15.toFixed(1)) //1.1(-0.05) 1.2(+0.05)
console.log(1.25.toFixed(1)) //1.3(+0.05) 1.2(-0.05)
console.log(1.35.toFixed(1)) //1.4(+0.05) 1.4(+0.05)
console.log(1.45.toFixed(1)) //1.4(-0.05) 1.4(-0.05)
console.log(1.55.toFixed(1)) //1.6(+0.05) 1.6(+0.05)
console.log(1.65.toFixed(1)) //1.6(-0.05) 1.6(-0.05)
console.log(1.75.toFixed(1)) //1.8(+0.05) 1.8(+0.05)
console.log(1.85.toFixed(1)) //1.9(+0.05) 1.8(-0.05)
console.log(1.95.toFixed(1)) //1.9(-0.05) 2.0(+0.05)
// //总计(+0.1) //总计(0)

可以看出 toFixed 肯定是不遵守四舍五入的,但是也跟银行家舍入算法有出入。(具体为什么是这样的计算方法,鄙人并不是弄清楚,待写)

4、其他 近似计算 函数

  • Math.ceil():向上舍入(取整)
  • Math.floor():向下舍入(取整)
  • 等等……

关于 JavaScript 的 精度丢失 与 近似舍入的更多相关文章

  1. JavaScript数字精度丢失问题总结

    本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 0.1 + 0.2 != ...

  2. JavaScript数字精度丢失的一些问题

    本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 1 0.1 + 0.2 ! ...

  3. [转载]JavaScript 中小数和大整数的精度丢失

    标题: JavaScript 中小数和大整数的精度丢失作者: Demon链接: http://demon.tw/copy-paste/javascript-precision.html版权: 本博客的 ...

  4. 关于JavaScript中计算精度丢失的问题

    摘要: 由于计算机是用二进制来存储和处理数字,不能精确表示浮点数,而JavaScript中没有相应的封装类来处理浮点数运算,直接计算会导致运算精度丢失. 为了避免产生精度差异,把需要计算的数字升级(乘 ...

  5. JavaScript数字计算精度丢失的问题和解决方案

    一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加:0.1 + 0.2 != 0.3 // true,下图是firebug的控制台截图: 看看java的计算结果:是不是让你很不能接受 再来 ...

  6. 关于Java中用Double型运算时精度丢失的问题

    注:转自 https://blog.csdn.net/bleach_kids/article/details/49129943 在使用Java,double 进行运算时,经常出现精度丢失的问题,总是在 ...

  7. JavaScript 中精度问题以及解决方案

    JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示.其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E ...

  8. JavaScript数字精度上代码。

    /**不能超过 9007199254740992 * floatObj 包含加减乘除四个方法,能确保浮点数运算不丢失精度 * * 我们知道计算机编程语言里浮点数计算会存在精度丢失问题(或称舍入误差), ...

  9. float类型进行计算精度丢失的问题

    今天一个案子,用户反映数量差异明明是 2.0-1.8,显示的结果却为0.20000005,就自己写了段方法测试了一下:package test1;public class Test2 {/*** @p ...

随机推荐

  1. 搭建Flutter开发环境需要注意的几个小Tips

    目录 下载SDK 安装 Android Stdio + SDK + tool SDK + 创建模拟器 + 插件(flutter和dart) Xcode + cocoapods VSCode + Flu ...

  2. [LeetCode] 面试题59 - II. 队列的最大值

    题目: 分析: 本题要求三个方法的时间复杂度都是O(1),对于push_back和pop_front都是好实现的 但是对于max_value,正常情况下要进行遍历才能获得最大值,那么如何才能在O(1) ...

  3. js中的this和arguments.callee

    this和 arguments.callee this 全局作用域下,this指向Window 其他情况下,谁调用this就指向谁 console.log(this) //对调用就指向谁系列 func ...

  4. git add的各种情况分类

    ·  git add -A  提交所有变化 ·  git add -u  提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) ·  git add .  提交新文件( ...

  5. 看过无数Java GC文章,这5个问题你也未必知道!

    看过无数Java GC文章,这6个问题你也未必知道! 读者朋友们可能已经看过太多关于Java垃圾回收相关的文章,如果没有,墙裂安利大家看下面这篇: 看完这篇垃圾回收,和面试官扯皮没问题了 本文不再重复 ...

  6. go bufio 、os 包

    程序使用短变量声明创建bufio.Scanner类型的变量input. input := bufio.NewScanner(os.Stdin) 该变量从程序的标准输入中读取内容.每次调用input.S ...

  7. numpy——>数组拼接np.concatenate

    语法:np.concatenate((a1, a2, ...), axis=0) 1.默认是 axis = 0,也就是说对0轴(行方向)的数组对象,进行其垂直方向(axis=1)的拼接(即数据整行整行 ...

  8. JAVAEE学习day06,面向对象

    1.面向对象与面向过程思想 什么时面向过程: 面向过程的每一个步骤和过程,把每一个步骤和过程完成,然后又这些功能相互调用,完成需求 强调的时过程,所有的事情都需要自己完成 什么时面向过程: 面向对象思 ...

  9. 学习 CSS 之用 CSS 3D 实现炫酷效果

    一.前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...

  10. Ext.grid 分页

    1. 定义变量,存储,每页显示多少条数据 var itemsPage = 25; 2.grid数据源 //列表源 var oStore = Ext.create('Ext.data.Store', { ...