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 相关文章推荐
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
React组件中的this的具体使用
Feb 28 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
js实现坦克大战游戏
Feb 24 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
php5新改动之短标记启用方法
2008/09/11 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php intval函数用法总结
2019/04/14 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python抖音表白程序源代码
2019/04/07 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
初中优秀班集体申报材料
2014/05/01 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
年终晚会活动方案
2014/08/21 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
实习协议书
2015/01/27 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python