JS中对数字(含有小数的)进行相乘后,数值不正确,多了好多位

本文探讨了JavaScript中浮点数运算产生的错误结果,并提供了解决方案,包括自定义加、减、乘、除等精确运算函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       现在用IE8开发项目,好多兼容问题啊,今天写完页面,测试的时候,偶然遇到了个小数相乘的问题,代码没有错,后来找了一下博客,才发现原来是JS浮点运算的bug,特地记录了一下,避免我忘记,另外,方便大家共同学习。

问题:

  37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数)
  我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998
  怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来。
  我Google了一下,发现原来这是JavaScript浮点运算的一个bug。
  比如:7*0.8 JavaScript算出来就是:5.6000000000000005

解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数。
  下面就把这些方法摘录下来,以供遇到同样问题的朋友参考:
 程序代码
//除法函数,用来得到精确的除法结果
//说明: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);
}


function Subtr(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));
     //last modify by deeka
     //动态控制精度长度
     n=(r1>=r2)?r1:r2;
     return ((arg1*m-arg2*m)/m).toFixed(n);
}



  在你要用的地方包含这些函数,然后调用它来计算就可以了。
  比如你要计算:7*0.8 ,则改成 (7).mul(8)  

  其它运算类似,就可以得到比较精确的结果。

转载自:点击打开原博客

<think>嗯,用户想在前端表格中实现两列数值相乘并保留两小数。首先,我需要考虑用户的技术栈,但问题没有说明,所以应该给出通用的解决方案。可能的思路包括使用JavaScript计算积,然后在显示时处理格式。 首先,如何获取表格中的两列数值?可能需要遍历表格的每一行,选取对应的单元格内容。然后,将文本转换为数字进行法运算。这里要注意处理可能的非数字情况,比如如果有空值或者非数字字符,可能需要错误处理或者默认值。 接下来是保留两小数的问题。JavaScript的toFixed方法可以做到,但要注意它会返回字符串,而且可能会四舍五入。如果用户需要严格的四舍五入,可能需要使用更精确的方法,比如Math.round(value * 100) / 100过toFixed(2)通常已经足够,但要注意它可能会在末尾补零,比如变成1.50这样的情况。 然后,如何将计算结果显示在表格中?可能需要在每一行中添加一个新的列,或者更新现有的列。使用DOM操作,比如querySelectorAll获取所有行,然后循环处理每个单元格。 另外,用户提到保留两小数,是否需要考虑国际化格式?比如有些地区用逗号作为小数点,但可能用户只是需要简单的两小数,用点号分隔。所以直接使用toFixed(2)应该可以。 还有,是否需要考虑性能问题?如果表格很大,循环遍历所有行可能会影响性能,但通常前端处理这种操作还是可以接受的。如果数据是动态加载的,可能需要在数据更新时重新计算。 然后,用户可能是在使用某些前端框架,比如React、Vue或Angular,这时候可能需要同的实现方式。但用户的问题没有说明,所以给出基于原生JavaScript的解决方案比较稳妥。 最后,是否需要处理事件监听,比如当输入数值变化时自动更新积?这可能涉及到事件监听,但用户的问题可能只需要在页面加载时计算一次。过根据问题描述,用户可能只是需要在显示时计算,所以初始渲染时处理即可。 总结步骤:遍历表格行,获取两列的值,相乘,保留两小数,插入到指定置。同时,考虑代码的健壮性,比如处理NaN的情况,用try-catch或者默认值来避免脚本错误。</think>### 前端实现表格两列相乘并保留两小数的方法 #### 步骤说明 1. **获取表格元素并遍历行** 通过`document.querySelectorAll`选择所有行(跳过表头),逐行处理数据。 ```javascript const rows = document.querySelectorAll('table tr:not(:first-child)'); // 假设表头是第一行 ``` 2. **提取数值并计算积** 从每行的两个单元格中提取数值(例如第2列和第3列),转换为浮点数后相乘。 ```javascript rows.forEach(row => { const cells = row.querySelectorAll('td'); const value1 = parseFloat(cells[1].textContent); // 第二列 const value2 = parseFloat(cells[2].textContent); // 第三列 const product = value1 * value2; }); ``` 3. **保留两小数并更新表格** 使用`toFixed(2)`将结果格式化为两小数,并将结果显示在目标列(例如第四列)。 ```javascript cells[3].textContent = product.toFixed(2); // 第四列显示结果 ``` 4. **处理异常值(可选)** 添加判断逻辑避免非数字(NaN)问题: ```javascript if (!isNaN(product)) { cells[3].textContent = product.toFixed(2); } else { cells[3].textContent = '无效值'; } ``` #### 完整代码示例 ```html <table border="1"> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr> <td>商品A</td> <td>12.5</td> <td>3</td> <td></td> </tr> <tr> <td>商品B</td> <td>8.99</td> <td>5</td> <td></td> </tr> </table> <script> document.addEventListener('DOMContentLoaded', () => { const rows = document.querySelectorAll('table tr:not(:first-child)'); rows.forEach(row => { const cells = row.querySelectorAll('td'); const value1 = parseFloat(cells[1].textContent); const value2 = parseFloat(cells[2].textContent); const product = value1 * value2; if (!isNaN(product)) { cells[3].textContent = product.toFixed(2); } else { cells[3].textContent = '—'; } }); }); </script> ``` #### 关键点说明 - **数值提取**:`parseFloat`用于将文本内容转为浮点数,注意处理非数字输入。 - **格式化输出**:`toFixed(2)`直接生成两小数(自动四舍五入),但会返回字符串类型。 - **性能优化**:若表格数据动态加载,需在数据更新后重新调用计算逻辑[^2]。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值