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

 更新时间:2017年08月22日 09:18:15   作者:Scott  
这篇文章主要介绍了Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法,非常具有实用价值,需要的朋友可以参考下

前言

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

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

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字体颜色控件的开发 JS实现字体控制

    javascript字体颜色控件的开发 JS实现字体控制

    小编给大家带来一个用javascript编写的能控制字体大小个颜色等基本信息的控件写法,喜欢的尝试编写一下。
    2017-11-11
  • JavaScript中“过于”犀利地for/in循环使用示例

    JavaScript中“过于”犀利地for/in循环使用示例

    Java中的增强for循环很是好用,但是JavaScript中为我们提供的for/in循环已然不是这么简单了,下面有个简单的示例,大家不妨参考下
    2013-10-10
  • xml和web特殊字符

    xml和web特殊字符

    在html和xml文件中,往往会因为以下特殊字符而导致文件解析出错,一般通过以下函数来处理。
    2009-04-04
  • JS如何在字符串指定位置插入字符串

    JS如何在字符串指定位置插入字符串

    文章介绍了JavaScript中如何在字符串的指定位置插入字符串,主要通过`slice`方法来实现,`slice`方法可以根据起始和结束索引来提取字符串的一部分,文章还补充说明了如何在字符串的指定位置插入字符串,以及提供了相关代码示例
    2025-01-01
  • 浅谈javascript的原型继承

    浅谈javascript的原型继承

    javascript的继承在很多框架中都有运用,尤其是原型式继承。首先要理解一个概念,什么是原型式继承?所谓的原型式继承,就是在函数内部先创建一个临时性的构造函数,然后将传入的对象做这个构造函数的原型,最后返回这个临时类型的新实例
    2012-07-07
  • 微信小程序功能之全屏滚动效果的实现代码

    微信小程序功能之全屏滚动效果的实现代码

    最近小编做项目遇到这样的需求,要求实现一个全屏滚动的效果,在网上找了实例代码,但是不是很完美,小编又结合自己的知识给大家补充下,对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧
    2018-11-11
  • js使用栈来实现10进制转8进制与取除数及余数

    js使用栈来实现10进制转8进制与取除数及余数

    这篇文章主要介绍了js使用栈来实现10进制转8进制、js取除数、余数,需要的朋友可以参考下
    2014-06-06
  • 微信小程序异步处理详解

    微信小程序异步处理详解

    这篇文章主要为大家详细介绍了微信小程序异步处理的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 聊聊JavaScript中.?、??、??=的用法以及含义

    聊聊JavaScript中.?、??、??=的用法以及含义

    今天项目中突然遇到了不太明白的写法,下面这篇文章主要给大家介绍了关于JavaScript中.?、??、??=的用法以及含义的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 基于Echarts 3.19 制作常用的图形(非静态)

    基于Echarts 3.19 制作常用的图形(非静态)

    这篇文章主要介绍了基于Echarts 3.19 制作常用的图形(非静态)的相关资料,需要的朋友可以参考下
    2016-05-05

最新评论