当前位置：首页 > news >正文

解决前端计算的浮点精度问题

news 来源：原创 2025/9/15 1:50:40

问题：比如1001*1.11等于110.11

但是如果用前端开发处理的话，因为涉及到浮点数运算（这是因为JavaScript（以及其他许多编程语言）使用IEEE 754标准来表示浮点数，导致某些十进制小数无法精确表示，从而产生精度误差），导致1001*1.11等于110.1100000000001

解决方案：

1.使用整数进行计算

将浮点数转换为整数进行计算，最后再转换回浮点数。例如，将金额以“分”为单位进行计算，而不是以“元”为单位

let a = 0.1;
let b = 0.2;
let result = (a * 10 + b * 10) / 10; // 0.3

2.使用 toFixed 方法

toFixed 方法可以将数字四舍五入到指定的小数位数，返回一个字符串。但要注意，toFixed 返回的是字符串，可能需要转换为数字。

let a = 0.1;
let b = 0.2;
let result = parseFloat((a + b).toFixed(1)); // 0.3

3.使用第三方库

有一些专门处理高精度计算的库，如 decimal.js、big.js 或 math.js，它们提供了更精确的数值计算功能。

// 使用 decimal.js
let a = BigInt(12345678901234567890);
let b = BigInt(98765432109876543210);
let result = a + b; // 111111111011111111100n

对比：

4. 避免直接比较浮点数

在比较浮点数时，尽量避免使用 == 或 ===，而是使用一个很小的误差范围（epsilon）来判断是否相等。

function areEqual(a, b, epsilon = 0.00001) {
return Math.abs(a - b) < epsilon;
}

let a = 0.1 + 0.2;
let b = 0.3;
console.log(areEqual(a, b)); // true

5.使用 Math 函数

对于某些特定场景，可以使用 Math 函数来处理精度问题，例如 Math.round、Math.floor、Math.ceil 等。

let a = 0.1 + 0.2;
let result = Math.round(a * 10) / 10; // 0.3

6.使用 BigIn

如果涉及大整数计算，可以使用 BigInt 类型，它可以精确表示任意大小的整数。

let a = BigInt(12345678901234567890);
let b = BigInt(98765432109876543210);
let result = a + b; // 111111111011111111100n

我目前使用的是用第三方库decimal.js的方案

1.安装

npm install decimal.js

2.封装一个js的方法

// 处理数据相乘的浮点精度问题

export function calculateProduct(num1, num2) {

num1=Number(num1)

num2=Number(num2)

const result = new Decimal(num1).times(new Decimal(num2));

return result.toNumber() || 0;

}

3.使用

let num=calculateProduct(row.PriceExclTax,row.ShortQuantity)

4.方法

使用 .plus() 进行加法。
使用 .minus() 进行减法。
使用 .times() 进行乘法。
使用 .dividedBy() 进行除法。
支持链式调用，代码简洁。
通过 Decimal.set 配置全局精度和舍入模式。

4.1 加法（Addition）

import { Decimal } from 'decimal.js';

let a = new Decimal(0.1);
let b = new Decimal(0.2);
let sum = a.plus(b); // 0.3
console.log(sum.toString()); // "0.3"

4.2 减法（Subtraction）

import { Decimal } from 'decimal.js';

let a = new Decimal(0.3);
let b = new Decimal(0.1);
let difference = a.minus(b); // 0.2
console.log(difference.toString()); // "0.2"

4.3 乘法（Multiplication）

import { Decimal } from 'decimal.js';

let a = new Decimal(0.1);
let b = new Decimal(0.2);
let product = a.times(b); // 0.02
console.log(product.toString()); // "0.02"

4.4 除法（Division）

使用 .dividedBy() 方法。

import { Decimal } from 'decimal.js';

let a = new Decimal(10);
let b = new Decimal(3);
let quotient = a.dividedBy(b); // 3.333333333
console.log(quotient.toString()); // "3.333333333"

4.5 链式调用

decimal.js 支持链式调用，可以在一行代码中完成多个运算。

import { Decimal } from 'decimal.js';

let result = new Decimal(10)
.dividedBy(3) // 10 / 3
.plus(1) // + 1
.times(2) // * 2
.toFixed(2); // 保留两位小数
console.log(result); // "8.67"

4.6 处理浮点数精度问题

decimal.js 的核心优势是解决 JavaScript 原生浮点数计算的精度问题。

import { Decimal } from 'decimal.js';

// 原生 JavaScript 的精度问题
let nativeResult = 0.1 + 0.2; // 0.30000000000000004

// 使用 decimal.js 解决精度问题
let decimalResult = new Decimal(0.1).plus(0.2); // 0.3
console.log(decimalResult.toString()); // "0.3"

4.7 格式化输出

可以使用 .toFixed() 或 .toString() 方法格式化结果。

import { Decimal } from 'decimal.js';

let result = new Decimal(10).dividedBy(3); // 3.333333333
console.log(result.toFixed(2)); // "3.33"
console.log(result.toString()); // "3.333333333"

4.8 全局配置

可以通过 Decimal.set 方法全局配置精度和舍入模式

import { Decimal } from 'decimal.js';

// 设置全局精度为 10，舍入模式为四舍五入
Decimal.set({ precision: 10, rounding: Decimal.ROUND_HALF_UP });

let result = new Decimal(10).dividedBy(3); // 3.333333333
console.log(result.toFixed(2)); // "3.33"

4.9 完整示例

import { Decimal } from 'decimal.js';

// 设置全局配置
Decimal.set({ precision: 10, rounding: Decimal.ROUND_HALF_UP });

// 加法
let sum = new Decimal(0.1).plus(0.2); // 0.3

// 减法
let difference = new Decimal(0.3).minus(0.1); // 0.2

// 乘法
let product = new Decimal(0.1).times(0.2); // 0.02

// 除法
let quotient = new Decimal(10).dividedBy(3); // 3.333333333

// 链式调用
let result = new Decimal(10)
.dividedBy(3)
.plus(1)
.times(2)
.toFixed(2); // "8.67"

console.log({ sum, difference, product, quotient, result });

解决前端计算的浮点精度问题

问题：比如1001*1.11等于110.11 但是如果用前端开发处理的话 ，因为涉及到浮点数运算（这是因为JavaScript（以及其他许多编程语言）使用IEEE 754标准来表示浮点数，导致某些十进制小数无法精确表示，…...

编程日记 2025/9/15 1:50:40

C语言基本知识------指针（4）

1. 回调函数是什么？ 回调函数就是⼀个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另⼀个函数，当这个指针被⽤来调⽤其所指向的函数时，被调⽤的函数就是回调函数。 void qsort(void base,//指针…...

编程日记 2025/9/14 18:56:28

004 Kafka异常处理

6.异常处理文章目录 6.异常处理1.异常分类与处理原则2.生产者异常处理1. 同步发送捕获异常2. 异步发送回调处理 3.消费者异常处理1.全局异常处理器2.方法级处理3.重试yml配置 4.死信队列（DLQ）配置1. 启用死信队列2. 手动发送到DLQ 5.事务场景异常处理1.…...

编程日记 2025/9/14 16:03:07

C++模拟实现map和set

C模拟实现map和set 1、STL源代码分析2、实现出复用红黑树的框架3、实现红黑树的迭代器4、解决map和set中key不可修改问题5、解决insert返回值问题完整代码模拟实现map和set实际上是对红黑树的封装，如对红黑树的实现有疑问，请移步：C手撕红黑树…...

编程日记 2025/9/9 14:29:37

导出指定索引数据到指定文件夹： ./elasticdump --inputhttp://用户:密码IP:9201/索引名字 --output导出路径/out.json --typedata 将导出的文件导入 ./elasticdump --input路径/out.json --outputhttp://账号:密码IP:9201/索引名称 --typedata --fileTypejson 【el…...

编程日记 2025/9/15 1:48:45

CSDN年度评选揭晓，永洪科技AI技术与智能应用双星闪耀

近日，永洪科技在CSDN（中国专业开发者社区）的年度评选中，凭借在人工智能技术创新与vividime在行业应用中的卓越表现，一举斩获“人工智能企业”及“智能应用”双料大奖。这一荣誉不仅彰显了永洪科技在AI领域的领先地位&a…...

编程日记 2025/9/15 1:45:58

Kubernetes 资源利用率翻倍？离在线混合部署深度解析

还在为 Kubernetes 集群资源利用率低而烦恼？还在为高昂的云成本而头疼？今天，我们就来聊聊 Kubernetes 中的一项黑科技——离在线混合部署，让大家的集群资源利用率翻倍，成本减半！ 🤔 什么是离在线…...

编程日记 2025/9/15 1:48:20

【Java】Spring Boot全量YAML配置说明

目录 Spring Boot 配置文件基础核心配置日志配置Web 服务器配置数据源配置JPA 配置缓存配置国际化配置邮件服务配置自定义配置使用示例1. Spring Boot 配置文件基础 Spring Boot 的配置文件可以使用以下文件格式： application.propertiesapplication.ymlSpring Boot 默认加载…...

编程日记 2025/9/15 1:46:42

【STL】7.STL常用算法（1）

STL常用算法（1） 前言简介一.遍历算法1.for_each2.transform 二.查找算法1.find2.find_if3.adjacent_find4.binary_search5.count6.cout_if 三.排序算法1.sort2.random_shuffle3.merge4.reverse 总结前言 stl系列主要讲述有关stl的文章，使用S…...

编程日记 2025/9/14 15:21:10

弱监督语义分割学习计划(1)-简单实现CAM但是效果不好

零: 项目说明是这样的一个事情，经过与deepseek的一番讨论和交流，DeepSeek为我设计了一个30天高强度学习计划，重点聚焦弱监督/无监督语义分割在野外场景的应用，结合理论与实践，并最终导向可落地的开源项目。目前开始了…...

编程日记 2025/9/15 1:43:43

内存泄漏问题分享

在前端开发中，内存泄漏（Memory Leak）是指由于代码问题导致浏览器无法回收不再使用的内存，从而影响网页的性能，导致页面变慢，甚至崩溃。前端内存泄漏通常由以下几种原因引起，理解和修复这些问题对…...

编程日记 2025/9/15 1:48:45

用 DeepSeek 打样！KubeSphere LuBan 用 3 天/3 分钟“干掉”大模型部署焦虑

用 DeepSeek 打样！KubeSphere LuBan 用 3 天/3 分钟“干掉”大模型部署焦虑大模型落地，如何告别“部署焦虑”？ DeepSeek-R1 的惊艳表现无需赘述，但企业落地时的高门槛却让许多开发者望而却步——复杂的部署流程、资源调度难题、…...

编程日记 2025/9/15 1:48:21

Java在云计算平台中的应用研究

Java在云计算平台中的应用研究随着云计算的广泛应用，越来越多的企业和开发者开始选择基于云计算的架构来构建和部署应用。Java作为一种成熟的编程语言，凭借其跨平台性、强大的生态系统以及优秀的并发处理能力，已成为云计算平台中常用的编程…...

编程日记 2025/9/14 13:37:39

【学写LibreCAD】0 仿写LibreCAD简介

一、LibreCAD 核心模块： 核心模块（Core） 功能：处理 CAD 的核心逻辑，如几何计算、图形对象管理、坐标系转换等。关键组件： 图形对象：如直线、圆、圆弧、多段线等。数学工具：向量、矩…...

编程日记 2025/9/15 1:45:59

【质量管理】怎么评估职能部门当前质量管理成熟度

评估目的在做质量管理时，我们需要先了解各职能部门当前质量管理成熟度。从而识别改进机会，为各职能部门后续质量提升计划提供依据。直白说：就是让那些不肯动的人动起来，同时往往总经理对各部门的质量管理成熟度的评分要更低&…...

编程日记 2025/9/15 1:48:44

音乐游戏Dance Dance Revolution(DDR)模拟器

文章目录 （一）Dance Dance Revolution（1.1）基本情况（1.2）机体 （二）模拟器（2.1）主程序（2.2）模拟器主题 （三）曲谱…...

编程日记 2025/9/15 1:43:43

【Pandas】pandas Series filter

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐，使其具有相同的索引Series.case_when(caselist)用于根据条件列表对 Series 中的元素进行条件判断并返回相应的值Series.drop([lab…...

编程日记 2025/9/15 1:45:57

SpringBoot项目注入 traceId 来追踪整个请求的日志链路

SpringBoot项目注入 traceId 来追踪整个请求的日志链路，有了 traceId， 我们在排查问题的时候，可以迅速根据 traceId 查找到相关请求的日志，特别是在生产环境的时候，用户可能只提供一个错误截图，我们作为开发…...

编程日记 2025/9/15 1:48:46

UVM 软链接应用

软链接在环境中主要是为了代码复用，目前用到的场景有两种： 1）将UT 环境的代码链接到ST环境上复用： 将ut 的transaction和sequence等在ST上复用使用方法在st对应目录下执行命令： ln -s 。…/xxxx/UT/xxx/xx_transact…...

编程日记 2025/9/15 1:46:43

SCIKIT-LEARN 决策树实现csv文档简单的推论预测

一.学习背景原文来自scikit-learn的学习拓展，根据樱花分类示例衍生而来。源文开源地址：scikit-learn: machine learning in Python — scikit-learn 0.16.1 documentation，想学机器学习和数据挖掘的可以去瞧瞧！ 二.读取csv文档 …...

编程日记 2025/9/15 1:43:42

VM虚拟机安装与配置Ubuntu Linux操作系统详细教程~

一、下载VM虚拟机 VMware16.0.zip百度网盘下载链接：https://pan.baidu.com/s/1-l-CcAVNINqhRLSiQ26R7w?pwd=tznn 提取码: tznn 二、软件介绍 VMware（虚拟机）是指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统，通过它可在一台电脑上同…...

编程日记 2025/9/15 1:43:44

使用 Ray的可观察性功能监控和调试 Ray 应用程序和集群

一、引言在分布式系统中，监控和调试是确保系统稳定运行的关键环节。Ray 作为一款高性能的分布式计算框架，提供了丰富的可观察性（Observability）功能，帮助用户监控和调试 Ray 应用程序和集群。本文将详细介绍如何使用 Ray 的可观察性功能，包括监控工具、调试流程、日志管…...

编程日记 2025/9/11 11:47:28

jmeter 如何做移动端的测试特别是兼容性测试

JMeter本身主要是一款用于性能测试和功能测试的工具，虽然它并非专门为移动端测试设计，但可以通过一些方式来对移动端应用进行测试，以下从测试准备、测试过程及注意事项等方面为你详细介绍：一、测试准备（一）环境搭建 JMeter安装与配置：确保JMeter已经正确安装在测试机…...

编程日记 2025/9/8 18:21:15

模板方法模式

模板方法模式（Template Method Pattern）是一种行为型设计模式，它定义了一个算法的骨架，允许子类在不改变算法结构的情况下重写某些步骤的具体实现。核心思想抽象类定义模板方法（final 修饰，防止子类修改…...

编程日记 2025/9/8 17:39:22

64位精度HPC计算引擎的十年博弈：AMD如何以性价比颠覆NVIDIA霸权？

若期望一款中央处理器（CPU）具备图形处理器（GPU）级别的浮点运算性能，根据CPU发展路线图，大约需等待六年左右。这显然是一段漫长的等待期，这也解释了为何十五年前众多高性能计算（HPC&a…...

编程日记 2025/9/14 6:34:08

2P4M-ASEMI照明控制专用2P4M

编辑：ll 2P4M外观与基本结构 2P4M 可控硅通常封装在一个小巧的塑料外壳内，从外观上看，它有着几个标志性的引脚。一般为三脚结构，每个引脚都肩负着不同的使命。其内部结构精密复杂，核心是由多层半导体材料交替堆叠而成…...

编程日记 2025/9/14 8:59:55

【工程管理与安全工程方向 EI会议征稿 | EI Compendex、Scopus收录】2025年工程管理与安全工程国际学术会议 (EMSE 2025)

重要信息：大会官网：www.ic-emse.com【论文投稿】大会时间：2025年3月21-23日大会地点：中国-南京截稿时间：以官网信息为准出版信息：<...

编程日记 2025/9/8 18:35:14

VMware work station 与Device/Credential Guard不兼容

1.出现如下错误按下Windows徽标键R 然后输入msinfo32.exe，会出现系统信息，在系统信息里找到基于虚拟化的安全性，查看是否打开 gpedit.msc 注册表修改...

编程日记 2025/9/8 12:25:01

STM32开发学习(三)----使用STM32CUBEMX创建项目

前言开始正式接触代码，学习代码开发，先熟悉STM32CUBEMX软件，控制开发板的GPIO。(STM32F103C8T6)。正式开始 1.打开软件 2.点击ACCESS TO MCU SELECTOR，进入软件选择，可能会弹出更新，等待更新完成即可。…...

编程日记 2025/9/8 14:34:35

smolagents学习笔记系列（七）Examples-Self-correcting Text-to-SQL

这篇文章锁定官网教程中 Examples 章节中的 Self-correcting Text-to-SQL 文章，主要介绍了如何使用 Agent 对数据库进行查找。官网链接：https://huggingface.co/docs/smolagents/v1.9.2/en/examples/text_to_sql； 【注意事项】&#xff1a…...

编程日记 2025/9/14 14:12:51

ffmpeg常用方法(一)

FFmpeg是一个非常强大的开源项目，提供了一套可以用来录制、转换数字音频、视频，并能将其转换成不同格式的工具和库。它是命令行工具，意味着它没有图形用户界面，但它能够被嵌入到其他应用程序中。它支持多种操作系统，包…...

编程日记 2025/9/14 21:40:25

c++：多态

1.多态多态就是多种形态的意思。分为编译时多态，也叫静态多态，通过传递不同参数的方式使同一个函数好像实现了不同的状态。eg：函数模板，函数重载还有运行时多态，也叫动态多态。通过使用不同的对象调用“同一个函数”…...

编程日记 2025/9/11 7:26:13

Nuxt.js 3【详解】服务器 Server

Nuxt.js 是一个全栈框架，可以在一个项目中，同时完成前端和后端的开发。服务器架构 Nuxt.js 的服务端由 Nitro 实现，Nitro 由基于 H3 实现。 Nitro 官网 https://nitro.build/guideH3 官网 https://h3.unjs.io/guide 接口路由基于文件目录自…...

编程日记 2025/9/14 21:39:47

DeepSeek回答：AI时代Go语言学习路线

最近有小伙伴经常会问：**该如何学习入门Go语言？怎样提升Go语言Coding水平？**这篇文章我们就使用DeepSeek来梳理下Go语言在AI时代的学习路线。向DeepSeek提问的问题原文： 你现在是一名资深的Go语言工程师，精通Go语言并…...

编程日记 2025/9/14 11:11:49

OpenGL 04--GLSL、数据类型、Uniform、着色器类

一、着色器在 OpenGL 中，着色器（Shader）是运行在 GPU 上的程序，用于处理图形渲染管线中的不同阶段。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器…...

编程日记 2025/9/12 16:07:31

仅需三分钟，使用Vue3.x版本组件式风格实现一个消息提示组件！

一、前言在日常的前端项目开发中，我们时常需要使用到“消息提示”（以下简称“消息”）这个组件来帮助我们更好的给予用户提示，例如常见的“登录成功”、“操作成功”、“服务器异常”等等提示。尽管市面上已经有一些组件库提供了…...

编程日记 2025/9/13 20:17:52

天猫代运营公司推荐：品融电商

天猫代运营公司推荐：品融电商在电商行业竞争日益激烈的今天，选择一家专业的天猫代运营公司成为众多品牌商家提升市场竞争力、实现销售增长的关键。在众多代运营公司中，品融电商凭借其专业的团队、丰富的经验和显著的成功案例，脱…...

编程日记 2025/9/10 8:41:37

2025.2.26#Java开发中的鉴权机制详解

1、Java开发中的鉴权机制详解用户问的是在Java开发中什么是鉴权。首先，我需要明确鉴权的定义。鉴权，也就是认证授权，是确认用户身份和权限的过程。可能用户刚接触安全相关的内容，需要简单明了的解释。接下来，我应该分…...

编程日记 2025/9/8 12:47:30

AF3 DataPipeline类解读

AlphaFold3 的DataPipeline类处理单链蛋白数据，主要负责从不同数据源（FASTA、PDB、mmCIF、ProteinNet .core 文件等）解析输入序列、MSA、模板匹配、序列嵌入（如 ESM-2）、并将其转换为 AlphaFold3 可用的特征格式。源代码： class DataPipeline:"""Assem…...

编程日记 2025/9/7 0:50:38

Windows系统PyTorch环境配置

0、前言深度学习为什么要配置GPU？ GPU（图形处理单元）最初是为图形渲染而设计的，它们擅长处理大量并行计算任务。深度学习模型，特别是卷积神经网络（CNN）和循环神经网络（RNN&#xf…...

编程日记 2025/9/10 14:48:42

策略模式环境类的实现方式对比

文章目录 1、策略模式2、聚合策略类实现方式一3、聚合策略类实现方式二4、对比5、补充：ApplicationContextAware接口 1、策略模式近期工作中，需要处理4.x和5.x两个版本的数据，所以自然想到的是策略模式，写一个抽象类&#xff0c…...

编程日记 2025/9/14 1:47:06

深入理解JVM的运行时数据区

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/9/11 10:06:04

mapbox基础，加载background背景图层

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…...

编程日记 2025/9/13 8:33:18

14.二叉搜索树

二叉搜索树 1.概念⼆叉搜索树⼜称⼆叉排序树，它或者是⼀棵空树，或者是具有以下性质的⼆叉树: *若它的左⼦树不为空，则左⼦树上所有结点的值都⼩于等于根结点的值 *若它的右⼦树不为空，则右⼦树上所有结点的值都⼤于等于根结点…...

编程日记 2025/9/13 4:21:02

javascript-es6 （五）

内置构造函数在 JavaScript 中最主要的数据类型有 6 种： 基本数据类型： 字符串、数值、布尔、undefined、null 引用类型: 对象但是，我们会发现有些特殊情况： //普通字符串 const str peiqi console.log(str.length) //…...

编程日记 2025/9/10 0:42:45

飞鱼科技游戏策划岗内推

协助策划完成相关工作，包括但不仅限于策划配置，资料搜集，游戏体验； 游戏策划相关作品；游戏大赛经历；游戏demo制作经历；游戏公司策划岗位实习经历优先内推码 DSZP7YFU...

编程日记 2025/9/8 13:36:55

探索浮点数在内存中的存储（附带快速计算补码转十进制）

目录一、浮点数在内存中的存储 1、常见的浮点数： 2、浮点数存储规则： 3、内存中无法精确存储： 4、移码与指数位E： 5、指数E的三种情况： 二、快速计算补码转十进制 1、第一种方法讨论： 2、第二种方…...

编程日记 2025/9/13 4:52:03

elfk+zookeeper+kafka数据流

申请7台部署elfkzookeeperkafka 数据流： filebeat(每台app) ------>【logstash(2) kafka(3)】 -------> logstash(1) -------> 【elasticsearch(3) kibana(1)】...

编程日记 2025/9/10 21:01:11

汽车悬架系统技术演进：从被动到全主动的革新之路（主动悬架类型对比）

在汽车工业的百年发展史中，悬架系统始终是平衡车辆性能与舒适性的关键战场。随着消费者对驾乘体验要求的不断提升，传统被动悬架已难以满足中高端车型的需求，而半主动与全主动悬架技术的崛起，正在重塑行业格局。本文将深入解析三大…...

编程日记 2025/9/11 22:48:37

什么限制了LLM:空间复杂度限制

什么限制了LLM: 空间复杂度限制空间复杂度是对一个算法在运行过程中临时占用存储空间大小的量度，它描述了算法所需的额外存储空间与输入数据规模之间的增长关系。这里的存储空间主要包括算法执行过程中所使用的变量、数据结构、栈空间等。和时间复杂度类似，空间复杂度通常也…...

编程日记 2025/9/14 10:03:11

相关文章：