Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法


Posted in Javascript onAugust 22, 2017

前言

在公司项目中涉及到一个有大量浮点数价格计算的模块,从而引发了我一系列的思考:

计算机二进制环境下浮点数的计算精度缺失问题;

console.log(.1+.2);
0.30000000000000004

为了解决上述问题,使用了toFixed方法却出现了浮点数小数位以5结尾的四舍五入错误问题;

var num = 0.045;
console.log(num.toFixed(2));
0.04

以此为起点,引发了我关于toFixed的一系列探索,终于找到了一些有用的信息,toFixed使用的计算规则是:

银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。

简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。

正文

下面我们就来证实这个所谓的银行家舍入法,证实分为三种情况,分别以4、5、6为舍入位对toFixed的证实(以chrome为例):

以4为舍入位:

var num = 0.004;
console.log(num.toFixed(2));
0.00
var num = 0.014;
console.log(num.toFixed(2));
0.01
var num = 0.094;
console.log(num.toFixed(2));
0.09

在4结尾这种情况下toFixed表现的还算不错,并没有错误的问题。

以6为舍入位:

var num = 0.006;
console.log(num.toFixed(2));
0.01
var num = 0.016;
console.log(num.toFixed(2));
0.02
var num = 0.096;
console.log(num.toFixed(2));
0.10

以6结尾这种情况下toFixed表现的也不错,并没有错误的问题。

以5为舍入位:

5后非零:

var num = 0.0051;
console.log(num.toFixed(2));
0.01
var num = 0.0052;
console.log(num.toFixed(2));
0.01
var num = 0.0059;
console.log(num.toFixed(2));
0.01

根据规则,五后非零就进一,我们证实并没有任何的问题。

以5为舍入位:

5后为零: 由于这种情况比较特殊,是toFixed方法出现计算错误的情况,所以我进行了大量的证实,且分别在常见的主流浏览器下进行了测试:

以如下测试用例为例:

var num = 0.005;
console.log(num.toFixed(2));
var num = 0.015;
console.log(num.toFixed(2));
var num = 0.025;
console.log(num.toFixed(2));
var num = 0.035;
console.log(num.toFixed(2));
var num = 0.045;
console.log(num.toFixed(2));
var num = 0.055;
console.log(num.toFixed(2));
var num = 0.065;
console.log(num.toFixed(2));
var num = 0.075;
console.log(num.toFixed(2));
var num = 0.085;
console.log(num.toFixed(2));
var num = 0.095;
console.log(num.toFixed(2));

chrome、firefox、safari、opera的结果如下:

0.01
0.01
0.03
0.04
0.04
0.06
0.07
0.07
0.09
0.10

ie11结果如下:

0.01
0.02
0.03
0.04
0.05
0.06
0.07
0.08
0.09
0.10

可以看出Ie11下正常,其余浏览器下均出现错误。虽然并不完全符合银行家舍入法的规则,我认为是由于二进制下浮点数的坑导致了不完全符合该规则。

总而言之:不论引入toFixed解决浮点数计算精度缺失的问题也好,它有没有使用银行家舍入法也罢,都是为了解决精度的问题,但是又离不开二进制浮点数的环境,但至少他帮助我们找到了问题所在,从而让我们有解决方法。

解决方法

下面我提供一种通过重写toFixed的方法:

Number.prototype.toFixed = function(length)
    {
      var carry = 0; //存放进位标志
      var num,multiple; //num为原浮点数放大multiple倍后的数,multiple为10的length次方
      var str = this + ''; //将调用该方法的数字转为字符串
      var dot = str.indexOf("."); //找到小数点的位置
      if(str.substr(dot+length+1,1)>=5) carry=1; //找到要进行舍入的数的位置,手动判断是否大于等于5,满足条件进位标志置为1
      multiple = Math.pow(10,length); //设置浮点数要扩大的倍数
      num = Math.floor(this * multiple) + carry; //去掉舍入位后的所有数,然后加上我们的手动进位数
      var result = num/multiple + ''; //将进位后的整数再缩小为原浮点数
      /*
      * 处理进位后无小数
      */
      dot = result.indexOf(".");
      if(dot < 0){
        result += '.';
        dot = result.indexOf(".");
      }
      /*
      * 处理多次进位
      */
      var len = result.length - (dot+1);
      if(len < length){
        for(var i = 0; i < length - len; i++){
          result += 0;
        }
      }
      return result;
    }

该方法的大致思路是首先找到舍入位,判断该位置是否大于等于5,条件成立手动进一位,然后通过参数大小将原浮点数放大10的参数指数倍,然后再将包括舍入位后的位数利用floor全部去掉,根据我们之前的手动进位来确定是否进位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
layui分页效果实现代码
May 19 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
JS倒计时实例_天时分秒
Aug 22 #Javascript
老生常谈javascript的面向对象思想
Aug 22 #Javascript
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
基于node.js之调试器详解
Aug 22 #Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
UML设计模式笔试题
2014/06/07 面试题
电大自我鉴定
2013/10/27 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
学生手册评语
2014/05/05 职场文书
爱护花草树木的标语
2014/06/11 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
新教师个人总结
2015/02/06 职场文书
会议通知
2015/04/15 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书