JS中toFixed(2)精度问题的原因以及解决办法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数，则表示为：toFixed(Num)；但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则，银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。具体规则如下：简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
经测试发现，在chorme下面，并没有完全遵守这个规则，尤其是5的后面没有数字的时候，不是这么判断的，如下：
var b = 1.335 b.toFixed(2) "1.33" var b = 1.345 b.toFixed(2) "1.34" var b = 1.355 b.toFixed(2) "1.35" var b = 1.365 b.toFixed(2) "1.36" var b = 1.375 b.toFixed(2) "1.38" var b = 1.385 b.toFixed(2) "1.39"
可以发现在chorme下没有完全去遵循这个规律，或许它有自己的算法，但是毕竟它没有遵循通用的银行家算法，所以tofixed这个方法在涉及到金钱计算的业务中还是少用.
总而言之：不论引入toFixed解决浮点数计算精度缺失的问题也好，它有没有使用银行家舍入法也罢，都是为了解决精度的问题，但是又离不开二进制浮点数的环境，但至少他帮助我们找到了问题所在，从而让我们有解决方法。
一开始的办法是把要四舍五入的后一位单独拎出来单独判断。
解决方法：
通过重写toFixed方法：
Number.prototype.toFixed = function (n) {
let result = number.toString();
const arr = result.split('.');
const integer = arr[0];
const decimal = arr[1];
result = integer + '.' + decimal.substr(0, n);
const last = decimal.substr(n, 1);// 四舍五入，转换为整数再处理，避免浮点数精度的损失
if (parseInt(last, 10) >= 5) {
const x = Math.pow(10, n);
result = ((parseFloat(result) * x) + 1) / x;
result = result.toFixed(n);
}
return result;
}然后又发现计算机二进制编码导致的精度问题，详见上一篇博客。
自己debugger，发现页面中的js进了死循环。很明显问题出在toFixed中回调了toFixed，结果没有走出来，继续debugger，又有了惊人的发现。以下是控制台测试：
console.log(2.115 * 100) // 211.50000000000003 console.log(2.0115 * 1000) // 2011.4999999999998
既然你一直进入循环，我就手动把你拉出来。
result = (Math.round((parseFloat(result)) * x) + 1) / x;
最终完整的重写toFixed的方法
// toFixed兼容方法
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);
// 四舍五入，转换为整数再处理，避免浮点数精度的损失
if (parseInt(last, 10) >= 5) {
const x = Math.pow(10, n);
result = (Math.round((parseFloat(result) * x)) + 1) / x;
result = result.toFixed(n);
}
return result;
}总结
到此这篇关于JS中toFixed(2)精度问题的原因以及解决办法的文章就介绍到这了,更多相关js toFixed(2)精度问题解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
滑动门JS并封装成类2008-03-03
这篇文章主要介绍了WEEX环境搭建与入门详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在 JavaScript 中如何判断两个值相等，这个问题看起来非常简单，但并非如此，在 JavaScript 中存在 4 种不同的相等逻辑，如果你不知道他们的区别，或者认为判断相等非常简单，本文就来为大家详细讲讲2022-07-07
这篇文章主要介绍了js实现磁性吸附的示例，帮助大家更好的制作js特效，美化自己的网页，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家详细介绍了js实现转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
JavaScript数组常用方法find、findIndex、filter、map、flatMap及some详解
在JavaScript中数组是一种非常常见且功能强大的数据结构,这篇文章主要介绍了JavaScript数组常用方法find、findIndex、filter、map、flatMap及some的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-07-07
点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框，关于这一点，下面有个具体的实现2014-01-01
这篇文章主要介绍了JavaScript使用Replace进行字符串替换的方法,涉及Replace进行一次替换与全部替换的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
XHTML-Strict 内允许出现的标签...2006-12-12
最新评论