JS中toFixed(2)精度问题的原因以及解决办法

 更新时间:2024年04月29日 11:51:54   作者:喝一杯维C  
最近发现JS当中toFixed()方法存在一些问题,所以这里给大家总结下,这篇文章主要给大家介绍了关于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)精度问题解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javscript删除数组中指定元素并返回新数组

    Javscript删除数组中指定元素并返回新数组

    把数组中某个值删除,并返回新数组,需要遍历旧数组找到要删除的元素,下面有个不错的示例,大家可以参考下
    2014-03-03
  • 如何利用echarts画雷达图和折柱混合

    如何利用echarts画雷达图和折柱混合

    最近使用echarts做的一个H5的成绩数据报告,里面使用了雷达图已经折线图和柱状图,下面这篇文章主要给大家介绍了关于如何利用echarts画雷达图和折柱混合的相关资料,需要的朋友可以参考下
    2022-04-04
  • 创建与框架无关的JavaScript插件

    创建与框架无关的JavaScript插件

    这篇文章主要介绍了创建与框架无关的JavaScript插件,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-12-12
  • uniapp中vuex的应用使用步骤

    uniapp中vuex的应用使用步骤

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于uniapp中vuex的应用使用,需要的朋友可以参考下
    2022-08-08
  • 详细聊聊JavaScript是如何影响DOM树构建的

    详细聊聊JavaScript是如何影响DOM树构建的

    DOM (Document Object Model) 的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,这篇文章主要给大家介绍了关于JavaScript是如何影响DOM树构建的相关资料,需要的朋友可以参考下
    2021-08-08
  • js获取div高度的代码

    js获取div高度的代码

    不错的获取div高度的代码,主要是方便测试一些信息,用到了javascript的offsetHeight属性
    2008-08-08
  • 老生常谈JavaScript 函数表达式

    老生常谈JavaScript 函数表达式

    下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版...
    2007-11-11
  • JavaScript为事件句柄绑定监听函数实例详解

    JavaScript为事件句柄绑定监听函数实例详解

    这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下
    2015-12-12
  • js中如何对嵌套数组进行filter过滤

    js中如何对嵌套数组进行filter过滤

    这篇文章主要介绍了js中如何对嵌套数组进行filter过滤问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论