啊，作为一名在前端苦战多年的老兵，我真的太懂大家的心情了！每次写个购物车、算个总价，后来啊小数点后面一串数字，简直想把键盘敲碎！ 0.1 + 0.2 居然不等于 0.3？ 不妨... 这简直是对程序员的侮辱啊！今天就来好好聊聊这个让人头疼的问题，顺便分享一些我摸爬滚打多年出来的“生存技巧”。

为什么JavaScript浮点数会出错？

先说说咱们得搞清楚问题的根源。JavaScript 中的所有数字都遵循 IEEE 754 标准，采用双精度浮点数格式存储。这种格式由三部分组成：符号位、指数位和尾数位。听起来很高大上吧？但核心问题在于：并非所有十进制小数都能被精确地转换为二进制小数，动手。。

想象一下你在用十进制来表示三分之一 ，你会得到无限循环小数 0.3333...。同样地， 像 0.1 这样的小数在二进制中也无法精确表示，只能用近似值来存储。这就导致了计算时出现误差。这个误差虽然很小，但当你对这些带有精度损失的数进行累加时误差会累积，到头来导致后来啊与预期不符，破防了...。

const price1 = 9.1;const price2 = 10.2;; //期望输出19.3 后来啊如下：

; // 输出：0.30000000000000004 

基础案例

先来看几个常见的例子，是不是很眼熟？

let sum = 0;for  { sum += 0.1;}; // 输出：0.9999999999999999，而不是 1.0！

场景一：购物车总价计算

假设你正在写一个购物车功能， 修复下面的“错误”代码：

//错误代码：直接相加,可能有精度问题let totalPrice = 0;const items = ;;; // 可能输出  14.42999999999998

解决方案一：将小数变成整数再计算

礼貌吗？ 思路是：先说说先把小数变成整数来算，算完再变回去。

温馨提示： 在数据库或后端设计时,有时会直接用“分”来存金额，这样前端拿到的就是整数,完全避免了小数问题!

function addPrice { const factor =  return  + ) / factor;}let fixedTotal =  ; });; //  可能输出  实际价格为  １４．４３

优点：

• 代码简单
• 容易理解

缺点：

• 需要知道小数位数。

解决方案二：使用 toFixed 方法

最容易上手的方法！使用toFixed 可以把一个数字保留 n 位小数，并转成字符串。然后再用 `parseFloat`把它转回数字，你猜怎么着？。

function add { return parseFloat.toFixed); } ); // output : .３．００００００００００．２８７６５６５６５６５６５６７８９７９８７９８７９８７９８．１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６78 

优点简单易懂缺点toFixed 是字符串操作,性能稍慢一点点toFixed 的参数需要根据情况调整，心情复杂。

解决方案三：引入高精度计算库

如果你的项目涉及到金融、科学计算等对精度要求极高的场景,推荐使用专业的高精度计算库,比如 。 操作一波。 这里vue环境下使用

 const Decimal = require  ;// 计算 const result= new Decimal . plus ) ; console . log  ;// 输出 ： zero point three 

使用方法

// 加法函数 function add  {// toFixed 保留 four 位小数,然后转回数字 return parseFloat . toFixed ) ;}// 测试console . log ); console . log ); 

使用场景

还行。 主要针对精度要求不是特别苛刻的计算 ， 比如简单的页面计算器 、非金融类的数值展示 。