js金额计算解决精度问题

問題描述
在項目有大量浮点数价格计算的情況下,Javascript中toFixed()方法計算金額會出現精度缺失問題

具體如下

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

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

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

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

三 javascript的toFixed()方法的四舍五入原理:

toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法),"四舍六入五成双"含义:对于位数很多的近似数,当有效位数确定后,其后面多余的数字应该舍去,只保留有效数字最末一位,这种修约(舍入)规则是“四舍六入五成双”,也即“4舍6入5凑偶”这里“四”是指≤4 时舍去,"六"是指≥6时进上,"五"指的是根据5后面的数字来定,当5后有数时,舍5入1;当5后无有效数字时,需要分两种情况来讲:①5前为奇数,舍5入1;②5前为偶数,舍5不进。(0是偶数)

四 toFixed()與Math.round()的區別

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则。
toFixed()使用的计算规则是:
银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。具体规则如下:
简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。


round() 方法可把一个数字舍入为最接近的整数。例如:Math.round(x),则是将x取其最接近的整数。其取舍的方法使用的是四舍五入中的方法,符合数学中取舍的规则。对于小数的处理没有那么便捷,但是可以根据不同的要求,进行自定义的处理。

例如:对于X进行保留两位小数的处理,则可以使用Math.round(X * 100) / 100.进行处理。

定义和用法

round() 方法可把一个数字舍入为最接近的整数。

语法
Math.round(x)
参数 描述
x 必需。必须是数字。
返回值
与 x 最接近的整数。

说明
对于 0.5,该方法将进行上舍入。

例如,3.5 将舍入为 4,而 -3.5 将舍入为 -3。
实例
把不同的数舍入为最接近的整数:
<script type="text/javascript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</script>
输出:
1
1
0
-4
-5

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

以4为舍入位:

1
2
3
4
5
6
7
8
9
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为舍入位:
1
2
3
4
5
6
7
8
9
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后非零:
1
2
3
4
5
6
7
8
9
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方法出现计算错误的情况,所以我进行了大量的证实,且分别在常见的主流浏览器下进行了测试:
以如下测试用例为例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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解决浮点数计算精度缺失的问题也好,它有没有使用银行家舍入法也罢,都是为了解决精度的问题,但是又离不开二进制浮点数的环境,但至少他帮助我们找到了问题所在,从而让我们有解决方法。

五 解决方法

<1>第一种方法

下面提供一种通过重写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全部去掉,根据我们之前的手动进位来确定是否进位。

<2>第二种方法

使用Math.round()方法,保留两位小数,不够位数,补0 (目前工作中使用此方法)
tofixed问题:
(119-116)0.005 = 0.015,按照业务要求四舍五入保留小数点后2位,结果应该是0.02
直接使用的toFixed方法计算的手续费:
  计算方式:value = (((howMuch-allow_sum)
interest*100)/100).toFixed(2);
  计算结果:0.01
  原因:toFixed它是一个四舍六入五成双的诡异的方法,"四舍六入五成双"含义:对于位数很多的近似数,当有效位数确定后,其后面多余的数字应该舍去,只保留有效数字最末一位,这种修约(舍入)规则是“四舍六入五成双”,也即“4舍6入5凑偶”这里“四”是指≤4 时舍去,"六"是指≥6时进上,"五"指的是根据5后面的数字来定,当5后有数时,舍5入1;当5后无有效数字时,需要分两种情况来讲:①5前为奇数,舍5入1;②5前为偶数,舍5不进。(0是偶数)

鉴于上面问题,换了一种方法[Math.round()],这种方法避免了上面的问题:
  计算方式:value = Math.round((howMuch-allow_sum)interest100)/100;
  计算结果:0.02
  虽然避免了上面的问题,在特定的情况下有引发了新的问题,比如:
  计算方式:value = Math.round((howMuch-allow_sum)interest100)/100;
  计算结果:计算出来的是(119-100)*0.005 = 0.095,四舍五入就变成了0.1了,而业务需求是小数点后面两位,也就是0.10

解决方法
/**
 * 四舍五入保留2位小数(不够位数,则用0替补)
 * @param num
 * @returns {string|boolean}
 */
export function keepTwoDecimalFull(num) {
    let result = parseFloat(num)
    if (isNaN(result)) {
        alert('传递参数错误,请检查')
        return false
    }
    result = Math.round(num * 100) / 100
    let s_x = result.toString()
    let pos_decimal = s_x.indexOf('.')
    if (pos_decimal < 0) {
        pos_decimal = s_x.length
        s_x += '.'
    }
    while (s_x.length <= pos_decimal + 2) {
        s_x += '0'
    }
    return s_x
}

<3>第三种方法 也是工作中使用

/**
 * 金额处理:保留几位小数,不四舍五入(关于金额数值的处理用这个方法,以防金额计算出错)
 * @param num   金额
 * @param decimal   保留位数
 * @returns {string}
 */
const moneyFormatDecimal = (num, decimal) => {
  num = num.toString()
  let index = num.indexOf('.')
  if (index !== -1) {
    num = num.substring(0, decimal + index + 1)
  } else {
    num = num.substring(0)
  }
  return parseFloat(num).toFixed(decimal)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容