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

前端精度问题全解析:用“挖掘机”快速“填平精度坑”的完美解决方案

写在前面

“为什么我的计算在 React Native 中总是出现奇怪的精度问题?” —— 这可能是许多开发者在作前端程序猿的朋友们都会遇到的第一个头疼问题。本文将深入探讨前端精度问题的根源,我将以RN为例,并提供一系列实用解决方案,让你的应用告别计算误差。

一、精度问题的根源:JavaScript 的浮点数陷阱

1.1 JavaScript 的数字表示方式

在 React Native 中,我们使用的是 JavaScript 的数字系统,而 JavaScript 遵循 IEEE 754 标准,采用双精度浮点数(64位)表示所有数字。这意味着:

  • 整数和浮点数没有区别
  • 所有数字都以二进制浮点数形式存储
  • 最大安全整数是 2^53 - 1(即 9007199254740991)
console.log(0.1 + 0.2); // 输出:0.30000000000000004

这个经典例子完美展示了浮点数精度问题。不是 JavaScript 的 bug,而是二进制浮点数运算的固有特性。

1.2 React Native 中的特殊场景

在 React Native 开发中,精度问题尤其突出在:

  • 金融计算:金额计算不容许误差
  • 科学计算:需要高精度结果
  • 地理位置:经纬度计算
  • 动画效果:流畅的动画需要精确计算

二、常见精度问题场景分析

2.1 简单算术运算的陷阱

// 看似简单的计算,却暗藏玄机
const calculateTotal = (price, quantity) => {return price * quantity;
};console.log(calculateTotal(0.1, 0.2)); // 0.020000000000000004

2.2 比较操作的不可靠性

// 永远不要直接比较浮点数
const a = 0.1 + 0.2;
const b = 0.3;console.log(a === b); // false

2.3 数据序列化的精度丢失

// 服务器返回的JSON数据
const response = {amount: 12345678901234567890
};console.log(response.amount); // 12345678901234567000

三、基础解决方案:Number 的极限

3.1 使用 toFixed() 进行格式化

const result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30" (注意返回的是字符串)

注意事项

  • 返回的是字符串,不是数字
  • 四舍五入可能不符合金融计算要求
  • 不能解决计算过程中的精度问题

3.2 使用 Math.round 进行整数运算

// 将小数转换为整数运算
const calculate = (a, b) => {const multiplier = Math.pow(10, 2); // 保留2位小数return (a * multiplier + b * multiplier) / multiplier;
};console.log(calculate(0.1, 0.2)); // 0.3

优点

  • 避免了部分浮点数问题
  • 结果相对准确

缺点

  • 操作繁琐
  • 仍然有精度限制

四、进阶解决方案:第三方库的力量

4.1 decimal.js —— 高精度数学计算

npm install decimal.js
import Decimal from 'decimal.js';// 精确计算
const result = new Decimal(0.1).plus(new Decimal(0.2));
console.log(result.toString()); // "0.3"// 复杂运算
const complexCalc = new Decimal(12.345).times(new Decimal(1.2)).dividedBy(new Decimal(3.4)).toFixed(4

相关文章:

前端精度问题全解析:用“挖掘机”快速“填平精度坑”的完美解决方案

写在前面 “为什么我的计算在 React Native 中总是出现奇怪的精度问题?” —— 这可能是许多开发者在作前端程序猿的朋友们都会遇到的第一个头疼问题。本文将深入探讨前端精度问题的根源,我将以RN为例,并提供一系列实用解决方案,让你的应用告别计算误差。 一、精度问题的…...

探索嵌入式硬件的世界:技术、应用与未来趋势

目录 一、什么是嵌入式硬件? 二、嵌入式硬件的核心组件与架构 1. 微处理器与控制器 2. 存储器设备 3. 输入/输出接口 4. 电源管理模块 5. 时钟芯片与时序控制 三、嵌入式硬件的设计原则与技术难点 1. 低功耗与能耗优化 2. 小型化与高度集成 3. 高可靠性和…...

中级网络工程师知识点3

1.在网络线路施工中应遵循规范: ①缆线的布防应自然平直,不得产生扭绞、打圈接头等现象 ②线缆两端应贴有标签,标签自己清晰、正确,标签应选用不易损坏的材料 ③水平子系统中配线间到工作区信息插座电缆不超过90米 ④工作区子系统中信息插座到网卡不超过10米 ⑤信息插…...

Spring2:应用事务+连接池形成的工具类

工具类 package com.qcby.utils;import com.alibaba.druid.pool.DruidDataSource;import javax.sql.DataSource; import java.sql.Connection; import java.sql.SQLException;/*** 事务的工具类*/ //事务是通过连接开启的,所以要保证是同一个连接 public class TxU…...

CentOS高手之路:从进阶实战到企业级优化

一、系统深度优化与性能调优 1. 内核参数调优 通过修改/etc/sysctl.conf文件调整内核参数,可显著提升服务器性能。例如: net.ipv4.tcp_fin_timeout30(快速释放TCP连接) vm.swappiness10(减少交换分区使用&#xff0…...

【Android构建系统】如何在Camera Hal的Android.bp中选择性引用某个模块

背景描述 本篇文章是一个Android.bp中选择性引用某个模块的实例。 如果是Android.mk编译时期,在编译阶段通过某个条件判断是不是引用某个模块A, 是比较好实现的。Android15使用Android.bp构建后,要想在Android.bp中通过自定义的一个变量或者条件实现选…...

命令拼接符

Linux多命令顺序执行符号需要记住5个 【|】【||】【 ;】 【&】 【&&】 ,在命令执行里面,如果服务器疏忽大意没做限制,黑客通过高命令拼接符,可以输入很多非法的操作。 ailx10 网络安全优秀回答者 互联网…...

学习笔记(C++篇)--- Day 5

1.取地址运算符重载 1.1 const成员函数 ①将 const 修饰的成员函数称为const成员函数,const 修饰成员函数放到成员函数参数列表的后面。 ②const 实际修饰该成员函数隐含的this指针,表明在该成员函数中不能对类的任何成员进行修改。const 修饰 Date 类的…...

排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序:冒泡、选择、插入排序详解 前言一、冒泡排序(Bubble Sort)1.1 算法原理1.2 代码实现(Python)1.3 性能分析 二、选择排序(Selection Sort)2.1 算法原理2.2 代码实现&#xff…...

mysql集群

mysql双主keepalivedhaproxy 一、集群作用 实现高可用及负载均衡。 二、示例 1.实验环境 101 mysql01102 mysql01103 haproxy01keepalived01104 haproxy02keepalived02105 client2.各主机改名并关闭防火墙 101 mysql01102 mysql02103 haproxy01104 haproxy02105 clientsyst…...

【嵌入式开发-RGB 全彩 LED】

嵌入式开发-RGB 全彩 LED ■ RGB 全彩 LED简介■ 电路设计■ ■ RGB 全彩 LED简介 RGB 全彩 LED 模块显示不同的颜色。 ■ 电路设计 全彩 LED 使用 PA5、 蓝色(B) TIM2_CHN3 PA1、 绿色(G)TIM2_CHN2 PA2、 红色(R&am…...

网络安全-等级保护(等保) 2-6 GB/T 36958—2018 《信息安全技术 网络安全等级保护安全管理中心技术要求》-2018-12-28 发布【现行】

################################################################################ GB/T 22239-2019 《信息安全技术 网络安全等级保护基础要求》明确了安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心、安全管理制度、安全管理机构、安全管理人员、…...

几个正整数常用的位运算操作

位运算在高性能计算、资源敏感型场景(如嵌入式系统)、特定算法(加密、压缩)中具有不可替代的优势。合理使用位运算可以显著提升代码效率和资源利用率。 1. 判断一个正整数是否为8的倍数 bool is_multiple_of_eight(int n) {if (…...

消息队列(MQ)在项目中的使用场景详解【附开发实战思路】

在开发中,很多人一开始对消息队列(MQ)的认识仅限于“异步处理”,但随着项目复杂度提升,我们会发现 MQ 不仅能异步处理任务,还能解耦系统、削峰限流,甚至提高整体架构的稳定性和扩展性。 这篇文…...

基于MATLAB-GUI图形界面的数字图像处理

基于MATLAB GUI的数字图像处理系统实现方案,包含常见图像处理功能。代码分为两部分:GUI界面设计和回调函数实现。 %% 第一部分:创建GUI界面 (使用GUIDE) % 1. 打开GUIDE: guide % 2. 创建新GUI,添加以下控件: % - …...

C语言水仙花数

水仙花数(Narcissistic Number)也被称为自幂数,是数学中的一种特殊三位数,属于自幂数的一种类型。它的定义为:一个三位数,其各位数字的立方和等于该数本身。 具体定义与计算方式条件: 设一个三位…...

前k个高频元素

pair<int int>&#xff1a;用于存储两个数字。&#xff08;pair<int string>用于存储一个整数和一个字符串&#xff09; const pair<int int>&#xff1a;表示pair对象是常量&#xff0c;一旦初始化以后&#xff0c;其内部的两个成员值都不能被修改。 bool…...

人工智能与智能的底色都是哲学

人工智能与智能的底色都是哲学&#xff0c;因为哲学为它们提供了对“智能”本质的追问与思考。哲学自古以来便对人类智能、思维与意识进行深入探讨&#xff0c;为理解智能的结构和功能奠定了基础。同时&#xff0c;人工智能的发展也引发了诸多哲学问题&#xff0c;如伦理道德、…...

能碳管理系统:助力企业实现“双碳“目标

在全球气候治理和绿色低碳发展的大背景下&#xff0c;能碳管理系统正成为企业应对气候变化、实现"碳达峰、碳中和"战略目标的核心工具。这一系统通过数字化手段将能源管理与碳排放管控深度融合&#xff0c;为企业低碳转型提供全方位支持。 一、系统架构与核心技术 …...

开源鸿蒙北向源码开发: 5.0kit化相关sdk编译

5.0kit化可以在编译系统sdk时添加,将你的kit文件加入编译使得最终生成的sdk包含kits文件 修改编译脚本 修改build仓里面的构建脚本文件,添加kits目录脚本命令 社区的build脚本已经有kits编译功能了,只需要把你的kits目录新增的kit拷贝到社区仓interface仓了,和社区的都一起编…...

多通道电源管理芯片在分布式能源系统中的优化策略

摘要&#xff1a;随着分布式能源系统的广泛应用&#xff0c;对电源管理芯片的性能要求日益提升。本文深入探讨了多通道电源管理芯片在分布式能源系统中的优化策略&#xff0c;以国科安芯的ASP4644芯片为例&#xff0c;从电气特性、工作模式、热管理、可靠性设计以及系统集成为主…...

IEEE 列表会议第五届机器人、自动化与智能控制国际会议

会议地点&#xff1a;中国 成都 会议官网&#xff1a;ICRAIC 主办单位&#xff1a;成都理工大学 协办单位&#xff1a;成都大学 早鸟截稿&#xff1a;2025年7月15日 截稿时间&#xff1a;2025年8月20日 出版信息&#xff1a;IEEE出版&EI数据库 会议时间&#xff1a…...

GitHub 趋势日报 (2025年05月15日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1TapXWorld/ChinaTextbookPDF教材。⭐ 6685⭐ 15287Roff2xming521/WeClone&…...

Java 并发编程归纳总结(可重入锁 | JMM | synchronized 实现原理)

1、锁的可重入 一个不可重入的锁&#xff0c;抢占该锁的方法递归调用自己&#xff0c;或者两个持有该锁的方法之间发生调用&#xff0c;都会发生死锁。以之前实现的显式独占锁为例&#xff0c;在递归调用时会发生死锁&#xff1a; public class MyLock implements Lock {/* 仅…...

Git 笔记

设置Git的user name和email $ git config --global user.name "bread" $ git config --global user.email "1234567890qq.com"因为Git是分布式版本控制系统&#xff0c;所以需要填写用户名和邮箱作为一个标识。git config --global 参数&#xff0c;有了这…...

蒟蒻编程日志

ORZ &#xff08;用于记录你这个“人”是不是真的&#xff0c;也就是说CSDN的流量是否属合适&#xff09; 2025/4/14 21:25 开坑 前言 2024/10/26&#xff1a;CSP-J 260pts&#xff0c;CSP-S 45pts。 2025/3/1&#xff1a;%你赛 180pts rk34 寄&#xff01;这就是不认真的…...

深入GoFrame框架:GToken的优势、实践与踩坑经验分享

一、引言 近年来&#xff0c;Go语言凭借其简洁的语法、高并发性能和强大的标准库&#xff0c;在后端开发领域迅速崛起。从微服务到企业级应用&#xff0c;Go的生态圈正在蓬勃发展&#xff0c;吸引了越来越多的开发者投入其中。在这个生态中&#xff0c;框架的选择往往决定了项…...

MODBUS RTU调试助手使用方法详解

一、软件简介 485调试助手是一款常用的串口通信调试工具&#xff0c;专门用于RS-485总线设备的测试、调试和通信监控。它支持多种串口参数设置&#xff0c;提供数据收发功能&#xff0c;是工业现场调试的必备工具之一。 二、软件安装与启动 1. 系统要求 Windows 7/10/11操作…...

【专利信息服务平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…...

我用 Appuploader绕过 Mac,成功把 iOS 应用上线了 App Store

我以前总觉得&#xff0c;iOS 上架是 macOS Xcode 专属的领域。直到最近项目必须要上架 iOS&#xff0c;团队却没人用 Mac&#xff0c;只能临时组建了一套“跨平台上架流程”。 这篇文章记录我这个“非典型 iOS 开发者”是如何绕开传统 Xcode 流程&#xff0c;借助一系列工具…...

Mac上安装运行SynthTIGER

1. 确保已安装 Python 环境 SynthTIGER 需要 Python 3.6。如果你的 Mac 没有安装 Python&#xff1a; 推荐通过 Homebrew 安装&#xff1a; brew install python 或从 Python 官网 下载安装。 验证安装&#xff1a; python3 --version pip3 --version 2. 安装 SynthTIGER…...

从代码学习深度学习 - 实战Kaggle比赛:狗的品种识别(ImageNet Dogs)PyTorch版

文章目录 前言1. 获取和整理数据集1.1 读取标签1.2 整理数据集&#xff1a;划分训练集和验证集1.3 整理测试集1.4 执行数据重组 2. 图像增广3. 读取数据集3.1 创建Dataset实例3.2 创建DataLoader实例 4. 微调预训练模型4.1 定义网络结构4.2 定义损失函数和评估函数 5. 定义训练…...

翼兴消防监控 – 大数据可视化HTML源码

概述 在当今数据驱动的时代&#xff0c;大数据可视化已成为各行各业不可或缺的工具。幽络源今天为大家带来一款基于ECharts的消防监控大屏HTML源码&#xff0c;帮助开发者快速搭建专业级数据展示界面。这款源码设计简洁大方&#xff0c;功能完善&#xff0c;适合各类监控场景使…...

搭建运行若依微服务版本ruoyi-cloud最新教程

搭建运行若依微服务版本ruoyi-cloud 一、环境准备 JDK > 1.8MySQL > 5.7Maven > 3.0Node > 12Redis > 3 二、后端 2.1数据库准备 在navicat上创建数据库ry-seata、ry-config、ry-cloud运行SQL文件ry_20250425.sql、ry_config_20250224.sql、ry_seata_2021012…...

火山引擎AI大模型

火山引擎的AI大模型&#xff08;如**“云雀”大模型**&#xff09;作为字节跳动旗下的核心技术产品&#xff0c;在性能、应用场景和技术生态上表现较为突出&#xff0c;尤其在字节自身业务&#xff08;如抖音、TikTok等&#xff09;的打磨下&#xff0c;具备较强的实用性和行业…...

isaacgym环境安装

1. 系统环境 操作系统&#xff1a;Ubuntu 18.04.6 LTSGPU&#xff1a;NVIDIA TITAN RTXDriver 版本: 510.108.03CUDA 版本&#xff1a;11.6 2. conda安装以及环境安装 略过&#xff08;参考内容&#xff1a;https://github.com/unitreerobotics/unitree_rl_gym/blob/main/doc…...

使用Mathematica制作Lorenz吸引子的轨道追踪视频

Lorenz奇异吸引子是混沌理论中最早被发现和研究的吸引子之一&#xff0c;它由Edward Lorenz在1963年研究确定性非周期流时提出。Lorenz吸引子以其独特的"蝴蝶"形状而闻名&#xff0c;是混沌系统和非线性动力学的经典例子。 L NDSolveValue[{x[t] -3 (x[t] - y[t]),…...

基于matlab的D2D 功率控制仿真

基于MATLAB的D2D&#xff08;Device-to-Device&#xff09;功率控制仿真示例&#xff0c;包含系统建模、功率控制算法实现和性能分析。该仿真以蜂窝网络为背景&#xff0c;重点关注D2D用户间的干扰管理和功率优化。 1. 系统模型与参数设置​ clc; clear; close all;%% 参数配置…...

将three.js场景保存成图片

使用html2canvas或者canvas.toDataURL&#xff0c;直接转会发现场景是空白的 解决方案&#xff1a;在转图片之前先渲染一下场景&#xff0c;就不会导致因为渲染问题的闪白了 1. 获取dom let canvas: any renderer.domElement;2. 转图片并下载 renderer.render(scene,camera…...

Java注解详解:从入门到实战应用篇

1. 引言 Java注解&#xff08;Annotation&#xff09;是JDK 5.0引入的一种元数据机制&#xff0c;用于为代码提供附加信息。它广泛应用于框架开发、代码生成、编译检查等领域。本文将从基础到实战&#xff0c;全面解析Java注解的核心概念和使用场景。 2. 注解基础概念 2.1 什…...

在哪一个终端下运行有影响吗?pip install pillow

在哪一个终端下运行有影响吗&#xff1f;pip install pillow -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn&#xff0c;需要切换到主目录吗&#xff1f; 1. 是否需要切换目录&#xff1f; 不需要切换目录 pip install 安装的包会存放…...

Java与C/C++跨平台互操作深度解析:Project Panama技术实战

简介 Project Panama是Java语言历史上最重要的互操作性增强项目之一,它通过Foreign Function & Memory API彻底改变了Java与本地代码交互的方式。相比传统的JNI方法,Panama提供了更安全、更高效、更易用的API,使得Java程序能够直接调用C/C++函数并操作外部内存,而无需…...

亲缘半相合供者

https://health.baidu.com/m/detail/ar_3602431741690417249 骨髓移植&#xff1a;亲缘半相合供者的经历分享 从去年八月开始&#xff0c;我妈妈被诊断为急性髓系白血病M4。经过一系列的准备和手术&#xff0c;昨天上午我终于完成了骨髓采集。现在&#xff0c;我的干细胞已经…...

《解锁数字藏品交易系统的底层密码:区块链架构抉择》

区块链&#xff0c;凭借其去中心化、不可篡改、可追溯等特性&#xff0c;成为数字藏品交易系统的核心支撑技术。不同的区块链底层架构&#xff0c;就像各具特色的建筑材料与蓝图&#xff0c;拥有独特的性能、特点以及应用场景。在搭建数字藏品交易系统时&#xff0c;必须深入剖…...

STM32F407VET6的HAL库使用CRC校验的思路

CRC校验在数据传输快&#xff0c;且量大的时候使用。 步骤实现&#xff1a; CubeMX配置 c // 在CubeMX中启用CRC模块 // AHB总线时钟自动启用 HAL库代码 c // 初始化&#xff08;main函数中&#xff09; CRC_HandleTypeDef hcrc; hcrc.Instance CRC; hcrc.Init.Default…...

TDuckX 2.6 正式发布|API 能力开放,核心表单逻辑重构,多项实用功能上线。

大家好&#xff0c;TDuckX 2.6 已正式发布。 本次更新以可集成性提升、数据处理能力增强和交互体验优化为核心&#xff0c;新增了包括 新增OpenAPI 模块、表单数据批量修改、字段导出分列 等多个面向开发者和实际业务落地场景的功能。 我们也重构了部分底层逻辑模块&#xff…...

智慧换热站全流程可视化管理

通过图扑 HT 实现换热站全方位数字孪生。对换热机组、管道阀门等设备精细建模&#xff0c;集成温度、流量、能耗等运行数据。在可视化界面中&#xff0c;设备状态实时呈现&#xff0c;异常即时预警。助力运维人员精准管理&#xff0c;优化调控策略&#xff0c;提升换热站运行效…...

框架的源码理解——V3中的ref和reactive

最近在研究各个框架的源码&#xff0c;从源码角度去理解 vue3 的 reactive 和 ref API&#xff0c;记录下研究的成果 reactive 首先&#xff0c;reactive() 的参数必须是一个对象&#xff0c;返回值是一个 Proxy 对象&#xff0c;具有响应性。如果参数不是对象类型&#xff0…...

一台入网的电脑有6要素, 机器名,mac,ip,俺码,网关,dns,分别有什么作用

一台入网的电脑需要配置的 六大网络要素&#xff08;机器名、MAC地址、IP地址、子网掩码、网关、DNS&#xff09;各自承担不同的关键作用&#xff0c;共同确保设备能正确通信和访问网络资源。以下是它们的详细功能解析&#xff1a; 1. 机器名&#xff08;主机名&#xff09; 作…...

LED点阵屏模块

目录 1.LED点阵屏介绍 2.显示原理 3.74HC595 4.C51的sfr、sbit 5.LED点阵屏显示图形代码 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a; 第五步&#xff1a; 第六步&#xff1a; 最终代码&#xff1a; 模块&#xff1a; main.c …...