JS超出精度数字问题的解决方法

 更新时间:2021年7月28日 15:00  点击:2313

精度问题最通俗易懂的解释

比如一个数 1÷3=0.33333333...... 大家都知道3会一直无限循环,数学可以表示,但是计算机要存储,方便下次取出来再使用,但0.333333...... 这个数 无限循环,你让计算机怎么存储?计算机再大的内存它也存不下,对吧! 所以不能存储一个相对于数学来说的值,只能存储一个近似值,所以当计算机存储后再取出来用时就会出现精度问题。

JS超出精度数字解决

一、js 最大安全数字是 Math.pow(2,53) - 1,超出这个数字相加会出现精度丢失问题,可通过将数字转换为字符串操作的思路处理,如下:

// js 最大安全数字: Math.pow(2, 53)-1

let a = '123456444565456.889'
let b =       '121231456.32'
// a + b = '123456565796913.209'

function addTwo(a, b) {
    //1.比较两个数长度  然后短的一方前面补0
    if (a.length > b.length) {
        let arr = Array(a.length - b.length).fill(0);
        b = arr.join('') + b
    } else if (a.length < b.length) {
        let arr = Array(b.length - a.length).fill(0);
        a = arr.join('') + a
    }

    //2.反转两个数 (这里是因为人习惯从左往右加 而数字相加是从右到左 因此反转一下比较好理解)
    a = a.split('').reverse();
    b = b.split('').reverse();

    //3.循环两个数组  并进行相加  如果和大于10 则 sign = 1,当前位置的值为(和%10)
    let sign = 0;//标记 是否进位
    let newVal = [];//用于存储最后的结果
    for (let j = 0; j < a.length; j++) {
        let val = a[j] / 1 + b[j] / 1 + sign; //除1是保证都为数字 这里也可以用Number()
        if (val >= 10) {
            sign = 1;
            newVal.unshift(val % 10) //这里用unshift而不是push是因为可以省了使用reverse
        } else {
            sign = 0;
            newVal.unshift(val)
        }
    }

    // 最后一次相加需要向前补充一位数字 ‘1'
    return sign && newVal.unshift(sign) && newVal.join('') || newVal.join('')
}

// 参考其他朋友的精简写法
function addTwo(a,b) {
    let temp = 0
    let res = ''
    a = a.split('')
    b = b.split('')
    while(a.length || b.length || temp) {
        temp += Number(a.pop() || 0) + Number(b.pop() || 0)
        res = (temp%10) + res
        temp = temp > 9
    }
    return res.replace(/^0+/g, '')
}

二、当涉及到带有小数部分相加时,对上面方法进行一次封装,完整实现如下:

let a = '123456444565456.889'
let b =       '121231456.32'
// a + b = '123456565796913.209'

function addTwo(a = '0',b = '0', isHasDecimal=false) {
    //1.比较两个数长度  然后短的一方前面补0
    if (a.length > b.length) {
        let arr = Array(a.length - b.length).fill(0);
        b = isHasDecimal && (b + arr.join('')) || arr.join('') + b
    } else if (a.length < b.length) {
        let arr = Array(b.length - a.length).fill(0);
        a = isHasDecimal && (a + arr.join('')) || arr.join('') + a
    }

    //2.反转两个数 (这里是因为人习惯从左往右加 而数字相加是从右到左 因此反转一下比较好理解)
    a = a.split('').reverse();
    b = b.split('').reverse();


    //3.循环两个数组  并进行相加  如果和大于10 则 sign = 1,当前位置的值为(和%10)
    let sign = 0;//标记 是否进位
    let newVal = [];//用于存储最后的结果
    for (let j = 0; j < a.length; j++) {
        let val = a[j] / 1 + b[j] / 1 + sign; //除1是保证都为数字 这里也可以用Number()
        if (val >= 10) {
            sign = 1;
            newVal.unshift(val % 10) //这里用unshift而不是push是因为可以省了使用reverse
        } else {
            sign = 0;
            newVal.unshift(val)
        }
    }

    // 最后一次相加需要向前补充一位数字 ‘1'
    return sign && newVal.unshift(sign) && newVal.join('') || newVal.join('')
}

function add(a,b) {
    let num1 = String(a).split('.')
    let num2 = String(b).split('.')
    let intSum = addTwo(num1[0], num2[0])
    let res = intSum

    if (num1.length>1 || num2.length > 1) {
        let decimalSum = addTwo(num1[1], num2[1], true)

        if (decimalSum.length > (num1[1]||'0').length && decimalSum.length > (num2[1]||'0').length) {
            intSum = addTwo(intSum, decimalSum[0])
            decimalSum = decimalSum.slice(1)
            res = `${intSum}.${decimalSum}`
        } else {
            res = `${intSum}.${decimalSum}`
        }
    }
    return res
}
console.log(add(a, b)) // 123456565796913.209
// console.log(add('325', '988')) // 1313

看一些JS数字精度丢失的一些典型问题

// 加法 =====================
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001

// 减法 =====================
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
 
// 乘法 =====================
19.9 * 100 = 1989.9999999999998
0.8 * 3 = 2.4000000000000004
35.41 * 100 = 3540.9999999999995

// 除法 =====================
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

总结

到此这篇关于JS超出精度数字问题解决的文章就介绍到这了,更多相关JS超出精度数字内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • 金额阿拉伯数字转换为中文的存储过程

    Create Procedure AtoC @ChangeMoney Money as Set Nocount ON Declare @String1 char(20) Declare @String2 char(30) ...2016-11-25
  • c#中判断字符串是不是数字或字母的方法

    这篇文章介绍了C#判断字符串是否数字或字母的实例,有需要的朋友可以参考一下...2020-06-25
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • 金额阿拉伯数字转换为中文的自定义函数

    CREATE FUNCTION ChangeBigSmall (@ChangeMoney money) RETURNS VarChar(100) AS BEGIN Declare @String1 char(20) Declare @String2 char...2016-11-25
  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • C#实现猜数字游戏

    这篇文章主要为大家详细介绍了C#实现猜数字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
  • js+css实现回到顶部按钮(back to top)

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
  • 安卓开发之设置密码只能输入字母和数字的组合

    设置登录密码我们一般会有限制的如由什么组合了,下面我们来看一篇关于安卓开发之设置密码只能输入字母和数字的组合方法,具体的细节如下所示。 无论是电脑还是手机...2016-09-20
  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01