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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
php生成文件
2007/01/15 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js数组操作常用方法
2014/05/08 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
垃圾桶标语
2014/06/24 职场文书
最新离婚协议书范本
2014/08/19 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
写给医院的感谢信
2015/01/22 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
党支部综合考察意见
2015/06/01 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书