详解JS-- 浮点数运算处理
一. 问题描述
最近在做一个项目，页面上会存在一些JS浮点数的运算，发现JS浮点数运算存在一些bug.譬如:
0.1+0.2 == 0.30000000000000004 0.1 + 0.7 == 0.7999999999999999 7*0.8 == 5.6000000000000005 5.6/7 == 0.7999999999999999
二.解决方案
JS运算后都会有很小的误差. 不像.Net或者Java那样准确. 主要是JS重点不在运算上面,可是有时候项目一定要用到.想了一下大概有两种解决方案
A 方案一:
运算结果保留2-3位小数位数. 前端界面一般用到的运算比较少。精度要求不会太高。 所以取2位小数位即可。
B. 方案二:
将小数位数转换为整数运算. 譬如：
0.1+0.2 =》 (1+2)/10 == 0.3 0.1 + 0.7 =》 (1+7)/10 == 0.8 7*0.8 == (7*8)/10 == 5.6 5.6/7 == (56/7)/10 == 0.1
为了方便调用. 所以我们可以提取一个公共的方法出来.譬如下面的JSMath库，JSMath重写了加减乘除. 会先将参数转换为整数再运算JSMath(参数1).操作(参数2)
参数1和参数2分别就是运算的第一个Number和第二个Number. 计算后通过Value属性获取值．
(function() {
var JSMath = function() {
return this;
}
JSMath.prototype.from = function(value) {
// 支持JSMath参数传递主要是用于嵌套的调用
if ((typeof(value) == 'object') && (value.value != undefined)) {
this.value = value.value;
} else {
this.value = value;
}
return this;
}
// 加法
JSMath.prototype.add = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value + Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
return this;
}
// 减法
JSMath.prototype.sub = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value - Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
return this;
}
// 除法
JSMath.prototype.div = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = ((Math.pow(10, maxtimeCount) * this.value) / (Math.pow(10, maxtimeCount) * value));
return this;
}
// 乘法
JSMath.prototype.times = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value * Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount * 2);
return this;
}
if (window.JSMath == undefined) {
window.JSMath = function(value) {
var result = new JSMath();
result.from(value);
return result;
}
}
})()
B1.基本运算
0.1+0.2 => JSMath(0.1).add(0.2).value == 0.3 7+0.8 => JSMath(7).times(0.8).value == 5.6 5.6/7 => JSMath(5.6).div(7).value = 0.8
B2.多目运算
0.05 + 0.05 + 0.2 => JSMath(JSMath(0.05).add(0.05)).add(0.2).value == 0.3 (5+0.6)/7 => JSMath(JSMath(5).add(0.6)).div(7).value == 0.8
三．小总结
上面自己自己暂时知道的一些解决方案．不太清楚是否有开源的更可靠的三方库来解决这个问题。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
解决JS浮点数运算出现Bug的方法
37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 网上找到了一些解决办法,就是重新写了一些浮点运算的函数或直接扩大倍数运算. 下面就把这
-
Javascript中浮点数相乘的一个解决方法
Javascript中的浮点数相乘是个很有意思的事情. 浮点数相乘有很多方式,下面是我给出的一个我自己认为不错的解决方案: 复制代码 代码如下: function FxF(f1, f2) { f1 += ''; f2 += ''; var f1Len = f1.split('.')[1].length, f2Len = f2.split('.')[1].length; if (f1Len) { f1 = f1.replace('.', '');
-
Javascript正则控制文本框只能输入整数或浮点数
JS部分代码如下: function CheckInputIntFloat(oInput) { if('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/,'')) { oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' :oInput.value.match(/\d{1,}\.{0,1}\d{0,}/); } } HTML部分代码(示例): <input type
-
js浮点数精确计算(加、减、乘、除)
复制代码 代码如下: <SPAN style="FONT-SIZE: 18px">//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. //调用:accAdd(arg1,arg2) //返回值:arg1加上arg2的精确结果 function accAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".&
-
JavaScript检查数字是否为整数或浮点数的方法
本文实例讲述了JavaScript检查数字是否为整数或浮点数的方法.分享给大家供大家参考.具体如下: 检查是否为整数: function isInt(n) { return typeof n === 'number' && n % 1 == 0; } // or ,this support ie3 function isInt(n) { return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) &
-
python中精确输出JSON浮点数的方法
有时需要在JSON中使用浮点数,比如价格.坐标等信息.但python中的浮点数相当不准确, 例如下面的代码: 复制代码 代码如下: #!/usr/bin/env python import json as json data = [ 0.333, 0.999, 0.1 ]print json.dumps(data) 输出结果如下: 复制代码 代码如下: $ python floatjson.py[0.33300000000000002, 0.999, 0.10000000000000001] 能
-
深入理解JavaScript中的浮点数
js只有一种数值型数据类型,不管是整数还是浮点数,js都把归为数字. typeof 17; // "number" typeof 98.6; // "number" typeof –2.1; // "number" js中的所有数字都是双精度浮点数.是由IEEE754标准制定的64位编码数字(这个是什么东东,不知道,回头查一下吧) 那么js是如何表达整数的,双精度浮点数可以完美地表示高达53位精度的整数(没有什么概念,没处理过多大的数据,没用
-
跟我学习javascript的浮点数精度
大多数编程语言都有几种数值型数据类型,但是JavaScript却只有一种.你可以使用typeof 运算符查看数字的类型.不管是整数还是浮点数,JavaScript都将它们简单地归类为数字. typeof 17; //number typeof 98.6; //number typeof -21.3; //number 事实上,JavaScript中所有的数字都是双精度浮点数.这是由IEEE754标准制定的64位编码数字--即"doubles".如果这一事实使你疑惑JavaScript是
-
js判断输入是否为正整数、浮点数等数字的函数代码
1.下面列出了一些判读数值类型的正则表达式 复制代码 代码如下: /^\d+$/ //非负整数(正整数 + 0) /^[0-9]*[1-9][0-9]*$/ //正整数 /^((-\d+)|(0+))$/ //非正整数(负整数 + 0) /^-[0-9]*[1-9][0-9]*$/ //负整数 /^-?\d+$/ //整数 /^\d+(\.\d+)?$/ //非负浮点数(正浮点数 + 0) /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0
-
详解JavaScript 浮点数运算的精度问题
问题描述 在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此. 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 .在一些特殊的数值表示中,例如金额,这样看上去有点变扭,但是至少值是正确了.然而要命的是,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子: // 加法 ===================== // 0.1 + 0.2 = 0.30000000000000004 // 0.7
-
详解JS数值Number类型
Number 问题 下面的问题你都能回答对了吗? 0.1 + 0.2 == 0.3 成立吗? .e-5 表示多少? 怎么表示8进制? 怎么转换进制? 如何将字符串转换成数值或整数?反过来呢?十六进制又怎么处理? parseInt(0x12, 16) 的返回值是多少?是0x12吗? Number.MAX_VALUE 为最大数值,(new Number(12)).MAX_VALUE 是多少? JavaScript中怎么进行四舍五入?如果保留3位小数的精度? 如何获取一个随机数?如何取整?如何向上取整
-
详解JS ES6编码规范
1.块级作用域 1.1.let取代var ES6 提出了两个新的声明变量的命令: let 和const.其中,let可以完全取代var,因为两者语义相同,而且let没有副作用. var命令存在变量提升的特性,而let没有这个命令. 所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读. 1.2.全局常量和线程安全 在let和const之间,优先使用const. let应出现在单线程模块代码内,而const则非常适合多线程. // bad var a = 1, b = 2,
-
详解JS中的reduce fold unfold用法
fold(reduce) 说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁.reduce也称为fold,本质上就是一个折叠数组的过程,把数组中的多个值经过运算变成一个值,每次运算都会有一个函数处理,这个函数就是reduce的核心元素,称之为reducer,reducer函数是个2元函数,返回1个单值,常见的add函数就是reducer const addRed
-
深入详解JS函数的柯里化
一.补充知识点之函数的隐式转换 来一个简单的思考题. function fn() { return 20; } console.log(fn + 10); // 输出结果是多少? 稍微修改一下,再想想输出结果会是什么? function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少? 还可以继续修改一下. function fn() { return 20;
-
一文详解JS 类型转换方法以及如何避免隐式转换
目录 前言 类型转换的概念 5 种转换方法 1. 字符串转换为数字 2. 数字转换为字符串 3. 布尔值转换为字符串或数字 4. 对象转换为原始值 5. 空值和未定义值转换为数字或字符串 隐式转换 总结 前言 当我们使用JavaScript编写代码时,类型转换是一个非常重要的概念.JavaScript是一种弱类型语言,这意味着变量可以自动转换为另一种类型,而不需要我们明确地指定.在这篇文章中,我们将探讨JavaScript类型转换的概念.转换方法,并针对隐式转换进行分析. 类型转换的概念 Jav
-
详解js几个绕不开的事件兼容写法
本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下: 1.键盘事件 keyCode 兼容性写法 var inp = document.getElementById('inp') var result = document.getElementById('result') function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode :
-
详解JS数组Reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上
-
详解js中构造流程图的核心技术JsPlumb（2）
前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line
-
详解JS异步加载的三种方式
一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输