js精度计算

JavaScript021

js精度计算,第1张

在新公司的第一个项目是区块链相关的管理后台和交易所，其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题，所以直接计算就可能会导致各种各样的bug，为了解决这个问题，就要使用BigNumber.js这个库。

至于为什么JavaScript会有精度问题呢，可以看 这里 。简单来说就是因为： JavaScript中所有的数字（包括整数和小数）都只有一种类型–Number。它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。它的优点是可以归一化处理整数和小数，节省储存空间。而实际计算的时候会转换成二进制计算再转成十进制。进制转换之后会很长，舍去一部分，计算再转回来，就有了精度误差。

BigNumber.js是一个用于任意精度计算的js库。可以在  官方文档  的console中测试使用。也可以通过npm install bignumber.js --save来安装。然后 import BigNumber from 'bignumber.js' 来引入使用。他的大概原理是将所有数字当做字符串，重新实现了计算逻辑。缺点是性能比原生的差很多。

现在 TC39 已经有一个 Stage 3 的提案 proposal bigint，大数问题有望彻底解决。在浏览器正式支持前，可以使用 Babel 7.0 来实现，它的内部是自动转换成 big-integer 来计算，要注意的是这样能保持精度但运算效率会降低。

具体用法可以参考以下资料：

官方文档

bignumber.js使用记录

BigNumber 讲解

就不再敖述了，下边随便写点常用的方法：

// 转为 bignumberconstx=newBigNumber('123456789.123456789')// 转为 普通数字x.toNumber()// 格式化(小数点)x.toFormat()// '123,456,789.123456789'x.toFormat(3)// '123,456,789.123'// 计算x.plus(0.1)// 加法x.minus(0.1)// 减法x.times(0.1)// 乘法x.div(0.1)// 除法x.mod(3)// 取模/取余// 比较大小x.eq(y)// isEqualTo 的简写，是否相等x.gt(y)// isGreaterThan 的简写，是否大于x.gte(y)// isGreaterThanOrEqualTo 的简写，是否大于等于x.lt(y)// isLessThan 的简写，是否小于x.lte(y)// isLessThanOrEqualTo 的简写，是否小于等于// 取非，改变数字的正负号x.negated()

首先，由于JS的存在数值的精度误差问题：

0.1+0.2   //0.30000000000000004

0.3-0.1   //0.19999999999999998

所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数

//浮点数加法运算

function floatAdd(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

}

//浮点数减法运算

function floatSub(arg1,arg2){

   var r1,r2,m,n

   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))

   //动态控制精度长度

   n=(r1>=r2)?r1:r2

   return ((arg1*m-arg2*m)/m).toFixed(n)

}

//浮点数乘法运算

function floatMul(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)

}

//浮点数除法运算

function floatDiv(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)

   }

}

以下是详细的计算器代码： 

HTML5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简单计算器</title>

<link href="main.css" rel="stylesheet">

</head>

<body>

<div id="calculator">

<div id="calculator_container">

<h3>计算器</h3>

<table id="calculator_table">

<tbody>

<tr>

<td colspan="5">

<input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294pxcolor: black">

</td>

</tr>

<tr>

<td><input type="button" value="←"       class="btn_color1 btn_operation"></td>

<td><input type="button" value="全清"     class="btn_color1 btn_operation"></td>

<td><input type="button" value="清屏"     class="btn_color1"></td>

<td><input type="button" value="﹢/﹣"    class="btn_color2 btn_operation"></td>

<td><input type="button" value="1/×"     class="btn_color2 btn_operation"></td>

</tr>

<tr>

<td><input type="button"  value="7"     class="btn_color3 btn_number"></td>

<td><input type="button"  value="8"     class="btn_color3 btn_number"></td>

<td><input type="button"  value="9"     class="btn_color3 btn_number"></td>

<td><input type="button"  value="÷"    class="btn_color4 btn_operation"></td>

<td><input type="button"  value="％"    class="btn_color2 btn_operation"></td>

</tr>

<tr>

<td><input type="button"   value="4"   class="btn_color3 btn_number"></td>

<td><input type="button"   value="5"   class="btn_color3 btn_number"></td>

<td><input type="button"   value="6"   class="btn_color3 btn_number"></td>

<td><input type="button"   value="×"  class="btn_color4 btn_operation"></td>

<td><input type="button"   value="√"  class="btn_color2 btn_operation"></td>

</tr>

<tr>

<td><input type="button"  value="1"   class="btn_color3 btn_number"></td>

<td><input type="button"  value="2"   class="btn_color3 btn_number"></td>

<td><input type="button"  value="3"   class="btn_color3 btn_number"></td>

<td><input type="button"  value="－"  class="btn_color4 btn_operation"></td>

<td rowspan="2">

<input type="button"  value="＝"  class="btn_color2" style="height: 82px" id="simpleEqu">

</td>

</tr>

<tr>

<td colspan="2">

<input type="button"  value="0"   class="btn_color3 btn_number" style="width:112px">

</td>

<td><input type="button"  value="."   class="btn_color3 btn_number" ></td>

<td><input type="button"  value="＋"  class="btn_color4 btn_operation"></td>

</tr>

</tbody>

</table>

</div>

</div>

<script type="text/javascript" src="calculator.js"></script>

</body>

</html>

CSS3

* {

margin: 0

padding: 0

}

#calculator{

position: relative

margin: 50px auto

width: 350px

height: 400px

border: 1px solid gray

-webkit-border-radius: 10px

-moz-border-radius: 10px

border-radius: 10px

-webkit-box-shadow: 2px 2px 4px gray

-moz-box-shadow: 2px 2px 4px gray

box-shadow: 2px 2px 4px gray

behavior:url("ie-css3.htc") /*IE8-*/

}

#calculator_table{

position: relative

margin: 10px auto

border-collapse:separate

border-spacing:10px 20px

}

h3{

position: relative

width: 60px

height: 30px

margin: 0 auto

}

#calculator_table td{

width: 50px

height: 30px

border: 1px solid gray

-webkit-border-radius: 2px

-moz-border-radius: 2px

border-radius: 2px

behavior:url("ie-css3.htc") /*IE8-*/

}

#calculator_table td input{

font-size: 16px

border: none

width: 50px

height: 30px

color: white

}

input.btn_color1{

background-color: orange

}

input.btn_color2{

background-color: #133645

}

input.btn_color3{

background-color: #59807d

}

input.btn_color4{

background-color: seagreen

}

input:active{

-webkit-box-shadow: 3px 3px 3px gray

-moz-box-shadow: 3px 3px 3px gray

box-shadow: 3px 3px 3px gray

behavior:url("ie-css3.htc") /*IE8-*/

}

JS

window.onload=function() {

var resultIpt = document.getElementById("resultIpt")//获取输出文本框

var btns_number = document.getElementsByClassName("btn_number")//获取数字输入按钮

var btns_operation = document.getElementsByClassName("btn_operation")//获取操作按钮

var simpleEqu = document.getElementById("simpleEqu")//获取"="按钮

var temp = ""

var num1= 0,num2=0

//获取第一个数

for(var i=0i<btns_number.lengthi++){

btns_number[i].onclick=function (){

temp += this.value

resultIpt.value = temp

}

}

//对获取到的数进行操作

for(var j=0j<btns_operation.lengthj++) {

btns_operation[j].onclick = function () {

num1=parseFloat(resultIpt.value)

oper = this.value

if(oper=="1/×"){

num1 = Math.pow(num1,-1)//取倒数

resultIpt.value = num1.toString()

}else if(oper=="﹢/﹣"){    //取相反数

num1 = -num1

resultIpt.value = num1.toString()

}else if(oper=="√"){      //取平方根

num1 =Math.sqrt(num1)

resultIpt.value = num1.toString()

}else if(oper=="←"){    //删除个位

resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1)

}else if(oper=="全清"){  //清除数字

resultIpt.value = ""

}

else{          //oper=="＋" "－" "×" "÷" "％"时，继续输入第二数字

temp = ""

resultIpt.value = temp

}

}

}

//输出结果

simpleEqu.onclick=function(){

num2=parseFloat(temp) //取得第二个数字

calculate(num1, num2, oper)

resultIpt.value = result.toString()

}

}

//定义一个计算函数

function calculate(num1, num2, oper) {

switch (oper) {

case "＋":

result=floatAdd(num1, num2)//求和

break

case "－":

result=floatSub(num1, num2)//求差

break

case "×":

result=floatMul(num1, num2) //求积

break

case "÷":

result=floatDiv(num1, num2) //求商

break

case "％":

result=num1%num2 //求余数

break

}

}

//精确计算

//浮点数加法运算

function floatAdd(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

}

//浮点数减法运算

function floatSub(arg1,arg2){

var r1,r2,m,n

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))

//动态控制精度长度

n=(r1>=r2)?r1:r2

return ((arg1*m-arg2*m)/m).toFixed(n)

}

//浮点数乘法运算

function floatMul(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)

}

//浮点数除法运算

function floatDiv(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)

}

}

JavaScript中有多种方式可以计算这个结果。

1、最简单粗暴的方式：

var sum = 1 + 2 + 3 + 4 + 5 + 6 + 7 + … + 997 + 998 + 999 + 1000

2、使用while循环

var cnt = 1

var sum = 0

while( cnt <= 1000 ) {

sum+= cnt

++cnt

}

3、使用do-while循环

var cnt = 1

var sum = 0

do {

sum+= cnt

++cnt

} while( cnt <= 1000 )

4、使用for循环

var sum = 0

for( var i = 1i<=1000++i ) {

sum += i

}

从上面四种可以看出，使用for循环是最清晰的。我在秒秒学上js程序的循环章节也看过类似的题目，推荐你去看看。