前端常见场景、JS计算精度丢失问题(Decimal.js 介绍)

目录

[一. Decimal.js 介绍](#一. Decimal.js 介绍)

[二. 常用方法](#二. 常用方法)

[1. 创建 Decimal 实例](#1. 创建 Decimal 实例)

[2.加法 add 或 plus](#2.加法 add 或 plus)

[3.减法 sub 或 minus](#3.减法 sub 或 minus)

[4.乘法 times 或 mul](#4.乘法 times 或 mul)

[5.除法 div 或 dividedBy](#5.除法 div 或 dividedBy)

6.取模

7.幂运算

8.平方根

[9.保留小数位 toFixed方法(四舍五入)](#9.保留小数位 toFixed方法(四舍五入))

三.项目应用


前端精度丢失问题通常由以下原因导致:

  1. 浮点数表示:由于IEEE 754标准,某些小数无法精确表示。
  2. 运算顺序:计算机内部的运算顺序可能影响结果。
  3. 舍入误差:除法或乘法可能需要舍入到最近的可表示浮点数。
  4. 累积误差:连续运算可能累积小误差,导致大偏差。
  5. 类型转换:自动类型转换可能引入精度问题。
  6. 大数溢出:超出Number类型范围的数字可能导致精度丢失。
  7. 第三方库误差:第三方库可能存在精度问题。
  8. 平台差异:不同浏览器或JavaScript引擎可能处理浮点数不同。

解决策略:

  • 使用高精度库(如decimal.js,big.js
  • 使用Math对象方法进行精确舍入
  • 尽可能用整数运算 ( 先乘以x倍数进行计算, 计算完再整除x倍数回来 )

一. Decimal.js 介绍

官网: decimal.js ( 提供十进制类型的任意精度数值 )

Decimal.js 是一个小型库,用于解决浮点数计算的不精确问题

安装 decimal.js

npm install decimal.js

在代码中引入 ,两种方式二选一

  • require 是CommonJS模块系统的语法
  • import 是ES6模块系统的语法

const Decimal = require('decimal.js');

import Decimal from 'decimal.js'

二. 常用方法

1. 创建 Decimal 实例
复制代码
const a1 = new Decimal(0.1);   // 从数字创建
const a2 = new Decimal('0.2'); // 从字符串创建
2.加法 add 或 plus
复制代码
const result = a1.add(a2).toNumber();
console.log(result); // 0.3
3.减法 sub 或 minus
复制代码
const result = a1.sub(a2).toNumber();
console.log(result); // -0.1
4.乘法 times 或 mul
复制代码
const result = a1.times(a2).toNumber();
console.log(result); // 0.02
5.除法 div 或 dividedBy
复制代码
const result = a1.div(a2).toNumber();
console.log(result); // 0.5
6.取模
复制代码
const result = a1.mod(a2).toNumber();
console.log(result); // 0.1
7.幂运算
复制代码
const result = a1.pow(2).toNumber();
console.log(result); // 0.01
8.平方根
复制代码
const result = a1.sqrt(2).toNumber();
console.log(result); // 0.31622776601683794
9.保留小数位 toFixed方法(四舍五入)
复制代码
const b1 = new Decimal('0.1546');
const b2 = new Decimal('0.1556');
const result1 = b1.toFixed(2);
const result2 = b2.toFixed(2);
console.log(result1); //0.15
console.log(result2); //0.16

三.项目应用

项目需求: 后端约定 返回的金额展示上需要除以100, 发送后台的值乘以 100,并要求为数字类型, 如果常规运算, 有可能出现精度丢失问题, 通过使用 Decimal.js库解决 ( new Decimal() 或 Decimal() 一个意思)

复制代码
import Decimal from 'decimal.js';

... 

// 先转换为Decimal对象, 进行乘法运算, 再转化为数字类型
const price = '100';
const res = Decimal(price ).mul(Decimal(100)).toNumber();
console.log(res); // 返回结果: 10

// 其他运算写法大差不差
...
相关推荐
桃子酱紫君7 分钟前
华为配置篇-BGP实验
开发语言·华为·php
庸俗今天不摸鱼19 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873019 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
shaoing23 分钟前
MySQL 错误 报错:Table ‘performance_schema.session_variables’ Doesn’t Exist
java·开发语言·数据库
黄毛火烧雪下26 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox36 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞39 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行39 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581040 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周43 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端