视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2020-11-27 22:31:59 责编:小采
文档

前言

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

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

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全部去掉,根据我们之前的手动进位来确定是否进位。

下载本文
显示全文
专题