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

前端大额计算,真正解决js精度丢失问题

1.解决前端大额计算导致精度丢失问题

2.从底层上解决这个问题,计算时不使用js 运行时计算。

  1. 使用rust语言来解决这个问题,因为是底层语言,不涉及到精度问题。

3.实现步骤

步骤 1: 安装工具
确保你已经安装了Rust工具链和wasm-pack,wasm-pack 是用于构建、优化和打包Rust代码为WebAssembly的工具
步骤 2: 创建新的Rust项目
在命令行中运行以下命令以创建一个新的Rust库项目:

cargo new --lib wasm_math
cd wasm_math

步骤 3: 添加依赖
在Cargo.toml中添加wasm-bindgen依赖项。

[lib]
crate-type = ["cdylib"][dependencies]
wasm-bindgen = "0.2"

步骤 4: 编写Rust代码
接下来,在src/lib.rs中编写需要的Rust函数,如下所示:

use wasm_bindgen::prelude::*;#[wasm_bindgen]
pub fn add(a: f64, b: f64) -> f64 {a + b
}#[wasm_bindgen]
pub fn subtract(a: f64, b: f64) -> f64 {a - b
}#[wasm_bindgen]
pub fn multiply(a: f64, b: f64) -> f64 {a * b
}#[wasm_bindgen]
pub fn divide(a: f64, b: f64) -> f64 {if b == 0.0 {panic!("Cannot divide by zero!");}a / b
}

确保使用#[wasm_bindgen]属性标记你的函数,这能够使这些函数能够在编译成Wasm后被JavaScript调用。
步骤 5: 构建WebAssembly包
在项目目录中运行wasm-pack以构建Wasm包。

wasm-pack build --target web

步骤 6: 在JavaScript中使用Rust函数
在构建完成后,你可以在pkg目录中找到生成的Wasm文件和一个用于加载Wasm模块的JavaScript封装文件。
在HTML文件中,可以这样使用这个Wasm模块:

<!DOCTYPE html>
<html>
<head><title>Rust + Wasm</title><script type="module">import init, { add, subtract, multiply, divide } from './pkg/wasm_math.js';async function run() {await init();console.log("2 + 3 =", add(2, 3));console.log("5 - 1 =", subtract(5, 1));console.log("3 * 4 =", multiply(3, 4));console.log("10 / 2 =", divide(10, 2));}run();</script>
</head>
<body><h1>Check the console for output!</h1>
</body>
</html>

4. 简单模拟了一下计算场景和思路,现在只支持整数,不支持浮点数

5. 我把支持浮点数包放在giehub上了。

https://github.com/smz8023/rust-math

相关文章:

前端大额计算,真正解决js精度丢失问题

1.解决前端大额计算导致精度丢失问题 2.从底层上解决这个问题&#xff0c;计算时不使用js 运行时计算。 使用rust语言来解决这个问题&#xff0c;因为是底层语言&#xff0c;不涉及到精度问题。 3.实现步骤 步骤 1: 安装工具 确保你已经安装了Rust工具链和wasm-pack&#x…...

Android笔记--MediaCodec(一)

这一节主要来了解一下MediaCodec&#xff0c;Android MediaCodec 是 Android 平台提供的一个用于处理音频和视频数据的 API。它允许开发者对音频和视频数据进行编码和解码&#xff0c;支持多种格式和编解码器。MediaCodec API 通常用于实现实时音视频处理&#xff0c;如视频录制…...

Linux简单介绍

Linux简单介绍 编译器VMware虚拟机Ubuntu——LinuxOS为什么使用LinuxOS&#xff1f; 目录结构Windows目录结构Linux操作系统home是不是家目录&#xff1f; Linux常用命令终端命令行提示符与权限切换命令tab 作用&#xff1a;自动补全上下箭头pwd命令ls命令mkdir命令touch命令rm…...

Servlet 的基本理解

Servlet 是JavaEE规范的一种&#xff0c;主要是为了扩展Java作为Web服务的功能&#xff0c;统一接口。由其他内部厂商如tomcat&#xff0c;jetty内部实现web的功能。如一个http请求到来&#xff1a;容器将请求封装为servlet中的HttpServletRequest对象&#xff0c;调用init()&a…...

JavaScript之applye、bind和call方法详解

Question Q1 apply()、bind()和call()方法的区别在哪&#xff1f; Q2 apply()和call()的应用场景 Q3 apply()、bind()和call()方法手写实现逻辑 来源 继承自Function.prototype&#xff0c;属于实例方法 console.log(Function.prototype.hasOwnProperty(call)) //trueconsole.l…...

Docker,anaconda环境的部署与迁移

功能上线将提上日程&#xff0c;但是如何将我windows环境下的程序放到linux服务器的测试环境跑通呢&#xff1f;这是我这整个清明假期将要解决的一件事&#xff0c;最蠢的办法就是看自己的环境下有哪些依赖&#xff0c;如何到服务器上一个一个下&#xff0c;但是首先这个方法很…...

【大数据运维】Hbase shell 常见操作

文章目录 一. DDL1. 表的DDL1.1. 创建表1.2. 删除表 2. 列族的DDL2.1. 增加一个列簇2.2. 删除列族2.3. 修改列族版本&#xff08;ing&#xff09; 二. DML1. 插入与更新数据2. 删除数据3. 清空表 三. DQL1. scan&#xff1a;查一批数据1.1. 查询全部1.2. 过滤rowkey1.3. 过滤列…...

LeetCode-217存在重复的元素

217 存在重复的元素 给定一个整数数组&#xff0c;判断是否存在重复元素。 如果存在一值在数组中出现至少两次&#xff0c;函数返回 true 。如果数组中每个元素都不相同&#xff0c;则返回 false 。 JavaScript的 Array 对象是用于构造数组的全局对象&#xff0c;数组是类似…...

基于两个单片机串行通信的电子密码锁设计

1.功能 电子号码锁在实际应用中应该有两部分&#xff0c;一部分在外部&#xff0c;有键盘部分和密码显示&#xff1b;另一部分内部&#xff0c;设置密码、显示密码。使用单片机自身带有的串口可以很方便的实现单片机之间的通信&#xff0c;使输入的密码值传送到主机检验是否是…...

产品经理功法修炼(3)之产品设计

点击下载《产品经理功法修炼(3)之产品设计》 1. 前言 产品经理的能力修炼并非局限于某一技能的速成,而是需要全面参与到产品的整个生命周期中,通过不断的实践来逐步提升自己的各项能力。尽管在企业的日常运作中,我们不可能身兼数职去扮演每一个角色,但作为产品的核心负…...

Qt 的发展历史、现状与启示

Qt 最早在1991年由挪威的两位程序员 Eirik Chambe-Eng 和 Haavard Nord 开发&#xff0c;他们在1994年创立 Trolltech 公司&#xff08;奇趣科技&#xff09;正式经营软件业务。Qt 的第一个公众预览版于1995年面世&#xff0c;之后在2008年被诺基亚收购&#xff1b;2011年到201…...

Quiet-STaR:让语言模型在“说话”前思考

大型语言模型(llm)已经变得越来越复杂&#xff0c;能够根据各种提示和问题生成人类质量的文本。但是他们的推理能力让仍然是个问题&#xff0c;与人类不同LLM经常在推理中涉及的隐含步骤中挣扎&#xff0c;这回导致输出可能在事实上不正确或缺乏逻辑。 考虑以下场景:正在阅读一…...

【Kotlin】匿名类和伴生类

1 匿名类 1&#xff09;无继承 fun main() {var obj object {var name: String "zhang"override fun toString(): String {return name}}println(obj) // zhang } 2&#xff09;有继承 fun main() {var obj object: People {var name: String "zhang"…...

【机器学习算法介绍】(3)决策树

决策树是一种常见的机器学习算法&#xff0c;用于分类和回归任务。它模拟了人类决策过程&#xff0c;通过一系列的问题来引导决策。决策树的构建涉及三个主要步骤&#xff1a;特征选择、树的构建和树的剪枝。 1. 特征选择 特征选择是决策树构建过程中的第一步&#xff0c;目的…...

算法之查找

1、顺序查找&#xff1a; package com.arithmetic.search; //顺序查找 //sequentialSearch 方法接收一个整数数组和一个目标元素作为参数&#xff0c;并使用顺序查找的方式在数组中查找目标元素。 //它通过循环遍历数组元素&#xff0c;逐个与目标元素比较&#xff0c;如果找到…...

LInux脚本学习

1.注释 #单行注释 以 # 字符开头就是单行注释 当然第一行除外&#xff0c;比较特殊 2.多行注释 3.Shell文件的作用 Shell文件就是linux命令集 4.sh脚本的执行方式 bash xxx.sh 5.新建的文件会没有执行权限 #为文件赋予执行权限 chmod ux xxx.sh 6.编写规范 #!/bin/bash #…...

JavaWeb基础(计网 socket 数据库 JDBC lombok Mybatis JUnit Maven)

本文用于检验学习效果&#xff0c;忘记知识就去文末的链接复习 1. 网络基础 1.1 计网基础 区分设备&#xff1a;IP地址 区分网络&#xff1a;网络地址 网络互联&#xff1a;路由器 主机上进程间通信&#xff1a;端口 http是常用的协议&#xff0c;基于TCP协议 TCP VS U…...

【HBase】

什么是HBase HBase是Google Bigtable的开源实现,类似Google Bigtable利用GFS作为其文件存储系统,HBase利用Hadoop HDFS作为其文件存储系统;Google运行MapReduce来处理Bigtable中的海量数据,HBase同样利用Hadoop MapReduce来处理HBase中的海量数据。 访问层次&#xff08;数据…...

Vue3:使用Pinia存储、读取、修改数据

一、存储数据 Pinia插件中&#xff0c;存储数据的配置项是state count.ts import {defineStore} from piniaexport const useCountStore defineStore(count,{// 真正存储数据的地方state(){return {sum:6}} })loveTalk.ts import {defineStore} from piniaexport const use…...

基于 Quartz.NET 可视化任务调度平台 QuartzUI

一、简介 QuartzUI 是基于 Quartz.NET3.0 的定时任务 Web 可视化管理&#xff0c;Docker 打包开箱即用、内置 SQLite 持久化、语言无关、业务代码零污染、支持 RESTful 风格接口、傻瓜式配置、异常请求邮件通知等。 二、部署 QuartzUI 从 2022 年到现在没有提交记录&#xf…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...