toFixed踩坑记

每天上一当，当当不一样。前端菜鸡的踩坑日记！

tofixed（）是采用的一种四舍六入五成双的‘银行家算法’，并不是我们以为的那种四舍五入

银行家算法：

对于位数很多的近似数，当有效位数确定后，其后面多余的数字应该舍去，只保留有效数字最末一位，这种修约（舍入）规则是“四舍六入五成双”，也即“4舍6入5凑偶”这里“四”是指≤4 时舍去，"六"是指≥6时进上，"五"指的是根据5后面的数字来定，当5后有数时，舍5入1；当5后无有效数字时，需要分两种情况来讲：①5前为奇数，舍5入1；②5前为偶数，舍5不进。（0是偶数）

但实际在浏览器中发现又不是这个样子，秘制玄学

（谷歌浏览器）（搜狐浏览器）

已经在js中踩过很多坑，所以前端最好不做任何运算，因为计算机浮点数的问题，逢运算必有坑！！！！，都给后端算最省事，但这样无疑就会增加服务器压力，所以不涉及关键环节的运算和处理前端还是可以做的。

所以要不就是在项目开始初期就引入第三方运算库，所有的加减乘除都使用第三方解决，这样最稳妥，简单暴力见效快！！

如果已经使用了，那就好好看接下来的分享吧

Vue项目

先创建一个js文件，用来存放写好的方法进行导出

export default {install() {Number.prototype.toFixed = function (n) {if (n > 20 || n < 0) {throw new RangeError('toFixed() digits argument must be between 0 and 20');}const number = this;if (isNaN(number) || number >= Math.pow(10, 21)) {return number.toString();}if (typeof (n) == 'undefined' || n == 0) {return (Math.round(number)).toString();}let result = number.toString();const arr = result.split('.');// 整数的情况if (arr.length < 2) {result += '.';for (let i = 0; i < n; i += 1) {result += '0';}return result;}const integer = arr[0];const decimal = arr[1];if (decimal.length == n) {return result;}if (decimal.length < n) {for (let i = 0; i < n - decimal.length; i += 1) {result += '0';}return result;}result = integer + '.' + decimal.substr(0, n);const last = decimal.substr(n, 1);// 四舍五入，转换为整数再处理，避免浮点数精度的损失  正数+1 负数-1if (parseInt(last, 10) >= 5) {const x = Math.pow(10, n);result = (Math.round((parseFloat(result) * x)) + (parseFloat(result) > 0 ? 1 : -1)) / x;result = result.toFixed(n);}return result;};}
}

然后在入口的js文件，也就是main.js中进行引入

import tofixed from './utils/tofixed';
Vue.use(tofixed);

然后你就会发现呕吼，问题解决了！

Layui项目

在layui这里真是卡了好久，为什么呢，因为layui没有main.js ! ! ! 所以不能像vue一样来一套丝滑的小连招。

然后我就开始尝试在app.js里挂载，不出意外的果然不行。

然后又尝试在index.html中引入的方式，发现这种方式只有在刚进入项目的页面中能够生效，在各个功能页面中，tofixed方法又变回了原来的。

好吧，到这里游戏就卡关了，可恶，难道只能一个个页面去单独引入吗？

虽然只有八十个文件，并不是很多，但咱们本着能省就省的办法，肯定不会这样干啊。

然后就开始各种查找方法，都知道当你越想找东西的时候越是找不到，找了好久没找到任何有效的办法。

但是遇到问题不要慌，来跟棒棒糖接着想，这时一个大神给了我思路，我们的目的是什么？

当然是在一个地方写了这个方法之后所有的页面都能用啊，那什么样的页面能实现这个效果呢。于是我就开始尝试在index这个文件中直接加入这个方法，果果果然然然，又失败了，碰一鼻子灰的我又去找大神，大神说要不试试在每个页面都会引的js文件里写，项目里每个页面都会用到的只有jQ和layui这两个js文件，死马当活马医，怼，然后我就在layui的源文件里加入了重写之后的Number.prototype.toFixed代码，当我用颤抖的手打开网页调试的时候，呕吼！生效了！直接获取这个方法得到的也是重写之后的新代码。OK问题完美解决，效果完美实现！

学艺不精，总是踩坑。看似平静的js，实则波涛汹涌，处处是雷。真好，又是知识满满的一天！

toFixed踩坑记相关推荐

python从入门到实践django看不懂_Python编程：从入门到实践踩坑记 Django
<>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是浏览器显示服务器异常. 个人采用的开发环境是 ...
东八区转为0时区_踩坑记 | Flink 天级别窗口中存在的时区问题
❝ 本系列每篇文章都是从一些实际的 case 出发,分析一些生产环境中经常会遇到的问题,抛砖引玉,以帮助小伙伴们解决一些实际问题.本文介绍 Flink 时间以及时区问题,分析了在天级别的窗口时会遇到的 ...
Spring @Transactional踩坑记
@Transactional踩坑记总述 Spring在1.2引入@Transactional注解, 该注解的引入使得我们可以简单地通过在方法或者类上添加@Transactional注解,实现事务 ...
服务器重新部署踩坑记
服务器重新部署踩坑记 Intro 之前的服务器是 Ubuntu 18.04 ,上周周末想升级一下服务器系统,从 18.04 升级到 20.04,结果升级升挂了... 后来 SSH 始终连不上,索性删除 ...
IdentityServer 部署踩坑记
IdentityServer 部署踩坑记 Intro 周末终于部署了 IdentityServer 以及 IdentityServerAdmin 项目,踩了几个坑,在此记录分享一下. 部署架构项目是 ...
windows container 踩坑记
windows container 踩坑记 Intro 我们有一些服务是 dotnet framework 的,不能直接跑在 docker linux container 下面,最近一直在折腾把它部署 ...
Spark踩坑记——数据库（Hbase+Mysql）转
转自:http://www.cnblogs.com/xlturing/p/spark.html 前言在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库 ...
android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
go nil json.marshal 完是null_字节跳动踩坑记#3：Go服务灵异panic
这个坑比较新鲜,刚填完,还冒着冷气. - 1 - 在字节跳动,我们服务的所有 log 都通过统一的日志库采集到流式日志服务.落地 ES 集群,配上字节云超(sang)级(xin)强(bing)大(ku ...

toFixed踩坑记

toFixed踩坑记相关推荐

最新文章

热门文章