JS小数运算出现多为小数问题的解决方法

写在前面的话：

今天帮同事解决了一个问题，就是小数相乘出现很多位小数的问题；这个问题自己以前也遇到过，现在特意来总结一下；

Number类型：

Number类型是ECMAScript中最常用和最令人关注的类型了；这种类型使用IEEE754格式来表示整数和浮点数值（浮点数值在某些语言中也被成为双精度数值），为支持各种数据类型，ECMA-262定义了不同的数值面量格式。

十进制：
var intNum=10; //整数

八进制:
var octalNum1=070; //八进制的56
var octalNum2=079; //无效的八进制数值-解析为79

八进制字面量在严格模式下是无效的；

十六进制：
var hexNum1=0xA; //10
切记：在进行运算的时候，所有以八进制和十六进制表示的数值都最终被转换成十进制；
为什么操作小数会出现误差？
浮点数值的最高进度是17位小数，但在进行运算的时候其精确度却远远不如整数；整数在进行运算的时候都会转成10进制； 而Java和JavaScript中计算小数运算时，都会先将十进制的小数换算到对应的二进制，一部分小数并不能完整的换算为二进制，这里就出现了第一次的误差。待小数都换算为二进制后，再进行二进制间的运算，得到二进制结果。然后再将二进制结果换算为十进制，这里通常会出现第二次的误差。
所以(0.1+0.2)!=03

解决方式:

程序代码
除法函数，用来得到精确的除法结果
说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
调用：accDiv(arg1,arg2)
返回值：arg1除以arg2的精确结果

function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{
t1=arg1.toString().split(".")[1].length}catch(e){
 }try{
 t2=arg2.toString().split(".")[1].length}catch(e){}
 with(Math){
 r1=Number(arg1.toString().replace(".",""))
 r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}

给Number类型增加一个div方法，调用起来更加方便。

Number.prototype.div = function (arg){
return accDiv(this, arg);
}

乘法函数，用来得到精确的乘法结果
说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
调用：accMul(arg1,arg2)
返回值：arg1乘以arg2的精确结果

function accMul(arg1,arg2){
var m=0,s1=arg1.toString(),
s2=arg2.toString();
try{
m+=s1.split(".")[1].length}catch(e){}
try{
m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m
)}

给Number类型增加一个mul方法，调用起来更加方便。

Number.prototype.mul = function (arg){
return accMul(arg, this);
}

加法函数，用来得到精确的加法结果
说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
调用：accAdd(arg1,arg2)
返回值：arg1加上arg2的精确结果

function accAdd(arg1,arg2){
var r1,r2,m;
try{
r1=arg1.toString().split(".")[1].length
}catch(e){
r1=0} try{
r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}

给Number类型增加一个add方法，调用起来更加方便。

Number.prototype.add = function (arg){
return accAdd(arg,this);
}

在你要用的地方包含这些函数，然后调用它来计算就可以了。
　　比如你要计算：7*0.8 ，则改成 (7).mul(8)
　　其它运算类似，就可以得到比较精确的结果。
解决方式二：
比较常用的办法，toFixed()，toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。在我们计算的结果后面加上这个方法就OK了；但是对精度会有一丝影响，如果精度要求不高的话推荐使用;

赞 (0)

相关推荐

  • js小数运算出现多位小数如何解决

    和大家分享一个有趣的测试: 0.1+0.2 == 0.3 //false 顿时郁闷,好吧!原来0.1+0.2变成:0.30000000000000004 再来一个 2.4/0.8 =>2.9999999999999996 没办法换种方式,都转换成整数 (2.4 * 100)/(0.8 * 100) 10.22 现在要减去 0.11 结果值又出现了很多的小数 10.110000000000001,然后我就用了 toFixed 方法来过滤小数,但是不知道跟前面那种转换成整数后再执行哪种效率高,好!还

  • JS小数运算出现多为小数问题的解决方法

    写在前面的话: 今天帮同事解决了一个问题,就是小数相乘出现很多位小数的问题:这个问题自己以前也遇到过,现在特意来总结一下: Number类型: Number类型是ECMAScript中最常用和最令人关注的类型了:这种类型使用IEEE754格式来表示整数和浮点数值(浮点数值在某些语言中也被成为双精度数值),为支持各种数据类型,ECMA-262定义了不同的数值面量格式. 十进制: var intNum=10; //整数 八进制: var octalNum1=070; //八进制的56 var oct

  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    js的 bug 类型:  Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1.  document.getElementById('test1').style.display='none' 2.  document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生

  • js实现window.open不被拦截的解决方法汇总

    本文实例讲述了js实现window.open不被拦截的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了. 二.分析: 在谷歌搜索有没有解决方法,有些说可以通过新建a标签,模拟点击来实现,但是测试发现都实现不了,照样被浏览器拦截. 最后找到了一个折中的办法,可以实现新页面打开,但是没有a标签的那种直接流量新页面的效果. 三.实现代码: 复制代码 代码如下:

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • js input输入百分号保存数据库失败的解决方法

    解决办法如下: 1.用ASCII码替换百分号和与符号 var remark = $("#remark").val(); remark.replaceAll("ASCII69","%").replaceAll("ASCII70","&"); //展示时需要对原先替换的进行还原展示 remark.replaceAll("%","ASCII69").replaceA

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • 微信js sdk invalid signature签名错误问题的解决方法分析

    本文实例讲述了微信js sdk invalid signature签名错误问题的解决方法.分享给大家供大家参考,具体如下: /**最近在做微信js sdk 接口调用说明*/ ***相信很多人都遇见像我这样的问题,再加上自己只能算是半个程序员,所以苦苦摸索了好久终于搞懂了. ****下面就把自己所遇见的各种问题和大家分享一下,都是自己亲手实验过的********/ 一.问题说明 如果出现 invalid signature,首先可以确定的是你的签名算法有问题. 建议:首先查看微信官方网站给出的解决

  • js定时器出现第一次延迟的原因及解决方法

    我们在使用js定时器,经常会出现间隔几秒获取一次数据,这是通过setInterval实现的.而且如果setInterval() 参数传递不当,定时器会延迟试行.本文向大家介绍js定时器第一次延迟的原理及实现过程. setInterval() 作用是在播放动画的时,每隔一定时间就调用函数.方法或对象. 语法 setInterval(function(),time); 单位是毫秒 注意:单位是毫秒 定时器第一次延迟执行:采用setInterval实现 var t = setInterval(scro

  • JS中浮点数精度问题的分析与解决方法

    JS中浮点数精度问题的分析与解决方法

    目录 前言 问题的发现 浮点数运算后的精度问题 toFixed奇葩问题 为什么会产生 浮点数的存储 浮点数的运算 解决方法 解决toFixed 解决浮点数运算精度 附:JS浮点数精度问题的一些实用建议 总结 前言 最近在做项目的时候,涉及到商品价格的计算,经常会出现计算出现精度问题.刚开始草草了事,直接用toFixed就解决了问题,并没有好好的思考一下这个问题.后来慢慢的,问题越来越多,连toFixed也出现了(允悲),后来经过搜索网上的各种博客和论坛,整理总结了一下. 问题的发现 总结了一下,

  • node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

    发现错误 最近在用Nodejs发送https请求时候,出现\"Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE\"的错误,错误如下: events.js:72 throw er; // Unhandled \'error\' event ^ Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE at SecurePair. (tls.js:1381:32) at SecurePair.emit (events.js:92:17) at

随机推荐