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

news2024/9/9 0:46:42

目录

一. Decimal.js 介绍

二. 常用方法

1. 创建 Decimal 实例

 2.加法  add 或 plus

3.减法 sub 或 minus

4.乘法 times 或 mul

5.除法 div 或 dividedBy

6.取模

7.幂运算

8.平方根

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

// 其他运算写法大差不差
...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1958646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无线融合,智能协同:ECWAN打造物联网高效协同网络

关键词:资产管理、ECWAN、无线混合组网、用电监测、用电计量、广域基站、计量插座、边缘协同 在当今快速发展的物联网领域,每天都有数以亿计的设备互相通信,形成庞大而复杂的网络生态。在这样的背景下,ECWAN技术以其灵活、高效和智…

【Linux】TCP全解析:构建可靠的网络通信桥梁

文章目录 前言1. TCP 协议概述2. TCP报头结构3. 如何理解封装和解包呢?4. TCP的可靠性机制4.1 TCP的确认应答机制 4.2 超时重传机制5. TCP链接管理机制5.1 经典面试题:为什么建立连接是三次握手?5.2 经典面试题:为什么要进行四次挥…

读零信任网络:在不可信网络中构建安全系统04最小特权

1. 公钥基础设施 1.1. PKI 1.2. 数字证书本身并不能解决身份认证问题 1.2.1. 需要一种方法来验证获得的公钥的确属于某人 1.2.2. 公钥基础设施(PKI)解决了这个问题 1.3. PKI定义了一组角色及其职责,能够在不可信的网络中安全地分发和验证…

【Websim.ai】一句话让AI帮你生成一个网页

【Websim.ai】一句话让AI帮你生成一个网页 网站链接 websim.ai 简介 websim.ai接入了Claude Sonnet 3.5,GPT-4o等常用的LLM,只需要在websim.ai的官网指令栏中编写相关指令,有点类似大模型的Prompt,指令的好坏决定了网页生成的…

Lc63---1859将句子排序(排序)---Java版(未写完)

1.题目描述 2.思路 (1)首先将句子按空格分割成若干单词。 (2)每个单词的最后一个字符是它的位置索引。我们可以通过这个索引将单词恢复到正确的位置。 (3)按照单词的索引顺序排序这些单词。 (4…

【已解决】嵌入式linux mobaxterm unable to open connection to comx 串口正常连接,但终端无法输入

1.点击Session重新选择串口,注意看看串口是不是连接到虚拟机,导致串口被占用。 2.选择PC机与开发板连接的串口,不知道的话可以打开设备管理器看看,选择正确的波特率,一般是115200。 3.关键一步:选择后别急…

性能测试:深入探索与实战指南

大家好,我是一名测试开发工程师,已经开源一套【自动化测试框架】和【测试管理平台】,欢迎大家联系我,一起【分享测试知识,交流测试技术】 在当今这个信息化、数字化的时代,软件系统的性能直接关乎到用户体验…

使用 Matlab 绘制带有纹理的柱状图

以下是效果 1. 在 Matlab 里安装两个额外的库: hatchfill2 和 legendflex。 (1)搜索并安装 hatchfill2,用来画纹理 (2) 搜索并安装 legendflex,用来画自定义的图例 2. 代码(说明见注释) data …

Centos 7系统(最小化安装)安装Git 、git-man帮助、补全git命令-详细文章

安装之前由于是最小化安装centos7安装一些开发环境和工具包 文章使用国内阿里源 cd /etc/yum.repos.d/ && mkdir myrepo && mv * myrepo&&lscurl -O https://mirrors.aliyun.com/repo/epel-7.repo;curl -O https://mirrors.aliyun.com/repo/Centos-7…

docker安装phpMyAdmin

直接安装phpMyAdmin需要有php环境,比较麻烦,总结了使用docker安装方法,并提供docker镜像。 1.docker镜像 见我上传的docker镜像:https://download.csdn.net/download/taotao_guiwang/89595177 2.安装 1).加载镜像 docker load …

(leetcode学习)24. 两两交换链表中的节点

给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入:head [1,2,3,4] 输出:[2,1,4…

Sonatype Nexus Repository搭建与使用(详细教程3.70.1)

目录 一. 环境准备 二. 安装jdk 三. 搭建Nexus存储库 四. 使用介绍 一. 环境准备 主机名IP系统软件版本配置信息nexus192.168.226.26Rocky_linux9.4 Nexus Repository 3.70.1 MySQL8.0 jdk-11.0.23 2核2G,磁盘20G 进行时间同步,关闭防火墙和selinux…

秋招突击——7/29——操作系统——网络IO

文章目录 引言基础知识零拷贝传统文件读取传统文件传输零拷贝mmap writesendifle 网络通信IO模型阻塞IO非阻塞IO IO多路复用模型selectpollselect和poll的总结epoll边缘触发ET和水平触发LT 信号驱动IO模型异步IO 面试题库1、说一下Linux五种IO模型2、阻塞IO和非阻塞IO应用场景…

可视化目标检测算法推理部署(一)Gradio的UI设计

引言 在先前RT-DETR模型的学习过程中,博主自己使用Flask框架搭建了一个用于模型推理的小案例: FlaskRT-DETR模型推理 在这个过程中,博主需要学习Flask、HTML等相关内容,并且博主做出的页面还很丑,那么,是…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第六十六章 电容屏触摸驱动实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

1.5 1.6 操作系统引导 虚拟机

操作系统引导 操作系统引导的概念 操作系统引导是指计算机利用CPU运行特定程序,通过程序识别硬盘,识别硬盘分区,识别硬盘分区上的操作系统,最后通过程序启动操作系统,一环扣一环地完成上述过程 操作系统引导的过程 …

分布式锁 Redis+RedisSon

文章目录 1.什么是分布式锁2.分布式锁应该具备哪些条件3.分布式锁主流的实现方案4.未添加分布式锁存在的问题4.1测试未添加分布式锁的代码通过jmeter发送请求4.2 添加线程同步锁集群部署配置nginx修改jmeter端口号4.3 使用redis的setnx命令实现分布式锁解决办法4.4 使用try、fi…

【2025留学】德国留学真的很难毕业吗?为什么大家不来德国留学?

大家好!我是德国Viviane,一句话讲自己的背景:本科211,硕士在德国读的电子信息工程。 之前网上一句热梗:“德国留学三年将是你人生五年中最难忘的七年。”确实,德国大学的宽进严出机制,延毕、休…

【日常设计案例分享】通道对账

今天跟同事们讨论一个通道对账需求的技术设计。鉴于公司业务线有好几个,为避免不久的将来各业务线都重复竖烟囱,因此,我们打算将通道对账做成系统通用服务,以降低各业务线的开发成本。 以下文稿(草图)&…

正点原子imx6ull-mini-Linux设备树下的LED驱动实验(4)

1&#xff1a;修改设备树文件 在根节点“/”下创建一个名为“alphaled”的子节点&#xff0c;打开 imx6ull-alientek-emmc.dts 文件&#xff0c; 在根节点“/”最后面输入如下所示内容 alphaled {#address-cells <1>;#size-cells <1>;compatible "atkalp…