以下为场景实测与原理分析,需要重写函数请直接滚动至页尾!!!

语法 - Number.prototype.toFixed( )

// toFixed()方法 使用定点表示法来格式化一个数值。
numObj.toFixed(digits)
参数 描述
digits 小数点后数字的个数;介于 0 到 20 (包括)之间,实现环境可能支持更大范围。如果忽略该参数,则默认为 0。

MDN给出的实例

function financial(x) {
return Number.parseFloat(x).toFixed(2);
} console.log(financial(123.456));
// expected output: "123.46" console.log(financial(0.004));
// expected output: "0.00" console.log(financial('1.23e+5'));
// expected output: "123000.00"

然而事实浏览器反馈给我们的结果并非如此。

找到原因

经阅读 .toFixed()为什么精度损失js中toFixed精度问题的原因及解决办法 两篇文章得到了相对可靠的解释:

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

实际场景(多浏览器实测)

  1. Chrome

   

   可以发现在chorme下没有完全去遵循这个规律,看来Chrome有自己的算法,测试1.305 ~ 1.395十个用例,得:在Chrome浏览器中toFixed()的后一位 >6时进位,否则舍去。

   2.IE 版本11

   

   IE同样没有采纳银行家舍入法,但所有实例都通过了四舍五入的测试。

   3.EDGE

   

   4.FireFox

   

   5.Opera

   

   6.PC Weixin内置浏览器

   

   7.QQ浏览器

   

   在QQ浏览器的智能、极速、IE三个内核模式切换,得到的都是同上大部分的结果。

结论

除了IE11浏览器外,大部分主流浏览器num.toFixed(2)采用了:

num的百分位小数 > 6 ? ( 千分位小数 > 4 ? 进位 : 舍去 ) : 无差别舍去

IE11浏览器则是全部通过四舍五入思维,我无法保证上述文章提到的银行家舍入法一定是误判,但目前精度丢失的规律已经明了。

重写toFixed()

解决方法也非常简单,重写Number.prototype.toFixed()方法(补零无效):

Number.prototype.toFixed = function (s) {
changenum = (parseInt(this * Math.pow( 10, s ) + 0.5) / Math.pow( 10, s )).toString()
return changenum;
}

理念是将小数点左移s(参数)个单位,加上0.5后取整完成四舍五入,如 1.236.toFixed(2) 小数点左移两个单位 -> 123.6 + 0.5 = 124.1 取整 -> 124,最后再将小数点右移s个单位后将Float类型格式化为String类型后return即可。

该方法存在一个问题,即假设参数大于浮点数长度,1.23.toFixed(3) 运算过程 -> 1230 -> 1230.5 -> 1230 -> 1.23,此处的 + 0.5 完全是无效的,且理想结果应补零至千分位得到 1.230 ,优化该方法(可用最终版):

/***************************************************************************
* Number.prototype.toFixed() -> rewrite *
***************************************************************************/
Number.prototype.toFixed = function (s) {
changenum = (parseInt(this * Math.pow( 10, s ) + 0.5) / Math.pow( 10, s )).toString()
index = changenum.indexOf(".")
if(index < 0 && s > 0){
changenum = changenum+"."
for(i = 0; i < s; i++){
changenum = changenum + "0"
}
} else {
index = changenum.length - index;
for(i = 0; i < (s - index) + 1; i++){
changenum = changenum + "0"
}
}
return changenum;
}

进阶 - Number.prototype消失的 “ 0 ”

在所有浏览器下,String("0.050").toFixed(2) = 0.1

原本保留至百分位的小数只保留到了十分位,并非是toFixed( )舍弃了最后的 “ 0 ”,而幕后黑手是Number.prototype,所有toFixed、toString这样的对象方法都成了它的背锅侠。

这个坑留到以后再填

JS013. 重写toFixed( )方法,toFixed()原理 - 四舍五入?银行家舍入法?No!六舍七允许四舍五入√!的更多相关文章

  1. 关于BigDecimal 和 double 类型保存金钱,以及精度问题,银行家舍入法

    1. BigDecimal 类型数据 的创建,构造函数 有 public BigDecimal(BigInteger intVal, long val, int scale, int prec); p ...

  2. 四舍五入VS银行家舍入法

    在学习python的时候,遇见了一个颠覆了我传统观念的四舍五入. 看下面,round()的结果和我们以前根深蒂固的四舍五入是不同的. >>> round(0.5) 0 >> ...

  3. tofixed方法 四舍五入

    tofixed方法 四舍五入 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的 ...

  4. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  5. js toFixed()方法的坑

    javascript中toFixed使用的是银行家舍入规则. 银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法. 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零 ...

  6. round函数——银行家舍入算法

    在处理四舍五入时,相信大部分人会使用math.round函数(不同的语言应该都有).有没有考虑过,这个函数是不是自己所需要的? po主碰到的问题是用来计算平均分.有个顶真的学生反映,明明是86.5,怎 ...

  7. Chrome/Firefox 中头toFixed方法四舍五入兼容性问题

    每个Number的toFixed()方法可把 Number 四舍五入为指定小数位数的数字.四舍五入顾名思义,4及以下舍去,5及以上加1. 四舍 1.31.toFixed(1) // 1.3 1.32. ...

  8. toFixed()与银行家舍入

    toFixed()与银行家舍入 一直在用toFixed()方法做浮点数的舍入取值,如果只是客户端展示数据是没有多大问题的,但是如果涉及到和后端互交,数据的精度可能会导致接口对接失败,当然了,涉及安全性 ...

  9. JS中toFixed()方法的问题及解决方案

    最近发现JS当中toFixed()方法存在一些问题,采用原生的Number对象的原型对象上的toFixed()方法时,规则并不是所谓的“四舍五入”或者是“四舍六入五成双”,所谓“四舍六入五成双”,在百 ...

随机推荐

  1. 学习笔记:数学-GCD与LCM-素数筛法

    筛法 埃筛 埃拉托斯特尼筛法的缩写,EraSieve (这个英文其实是为了方便做函数名不要再写shake了) 它的核心思想其实是当确认了一个数是质数以后,把它的所有倍数打上标记说这玩意不是质数.那现在 ...

  2. 遥远的国度 (树链剖分换根),洛谷P3979

    析:显然,若没有换根操作,则为树链剖分板子题,但是这道题我们考虑换根操作 考虑这样一个性质:在一棵树上,两点的距离路径是唯一的!! 也就是说,我们在修改路径上的点权时,不必考虑根在哪里,直接利用模板修 ...

  3. 白话JavaScript原型链和继承

    原型基础 每个函数都有一个prototype属性,指向函数的原型对象 每个对象都一个私有属性 __proto__, 默认指向其构造函数的prototype 在JS中所有函数都是Function构造出来 ...

  4. node溢出

    在做项目的过程中,项目越来越大,后面导致项目无法正常启动,查了原因是因为node 溢出了. 先看看溢出时报的错 解决办法:  increase-memory-limit插件 1.在package.js ...

  5. TCP 才不傻!

    大家好,我是小林. 之前收到个读者的问题,对于 TCP 三次握手和四次挥手的一些疑问: 第一次握手,如果客户端发送的SYN一直都传不到被服务器,那么客户端是一直重发SYN到永久吗?客户端停止重发SYN ...

  6. 有赞Android实习五面都挂了,复习半月再战,转拿腾讯offer!

    缘起 为了有赞的面试准备了半个月的样子,当时还投了美团.字节.滴滴.京东,目的只有一个,就是要进大厂,但是只有有赞扛过了一面,其他都是一面就挂了. 前三面都自我感觉良好,以为能稳拿offer的,没想到 ...

  7. dubbo学习实践(2)之Dubbo入门Demo

    开篇之前,先来了解下dubbo服务治理与技术架构,直接看图 dubbo技术架构图: 1. 新建dubbo项目,目录结构如下 代码说明: 1.代码分为Provider(服务提供方)与consumer(服 ...

  8. MySQL数据库优化(2)

    MySQL优化 大批量插入数据优化 1.将数据按照id有序排列 2.使用load关键字(100万条:有序20s,无序1分50秒) 3.插入之前,关闭唯一性校验(SET UNIQUE_CHECKS=0) ...

  9. 【vulapps】Sturcts2 S2-037RCE漏洞复现

    一.漏洞基本信息 S2-037官方公告 CVE编号:CVE-2016-4438漏洞名称:Struts(S2-037)远程代码执行漏洞发布日期:2016.615受影响的软件及系统:Apache stru ...

  10. sqli-labs lesson 54-65

    less 54 需要从数据库的CHALLENGES表中取出key值输入,输入对了才算通过,但是只能做10次尝试. 这里id被单引号包裹,注意闭合单引号即可,剩下的就可以参照less 1获取表中信息即可 ...