微信小程序Decimal实现高精度数值计算

记录微信小程序使用Decimal实现高精度数值计算的一些过程。

实现背景:

一些需要支付的项目,可以使用一些优惠券(优惠券包含代金券和折扣券),那么多个项目,每个项目又可使用多张优惠券。最后需要计算最终金额来进行支付。因为涉及到用户的支付,所以需要格外的注意,避免用户支付错误的金额,那么就是大问题了。

问题:

此时就是有一个问题,之前的使用优惠券后的价格是后端进行计算的,前端通过调接口获得。本期的话可使用多张优惠券,又有叠加使用,互斥逻辑等,用户频繁切换的话,再调取接口进行计算金额,感受上就是不太好。先不说用户频繁切换导致接口的获取不及时,然后也会有一些性能消耗问题。所以感觉最佳的实现就是通过前端来实现,前端自己来进行金额的计算。但是前端计算老是有一些精度的问题,之前就是出现过前后端计算金额不一致的问题。这是因为在JavaScript中采用的是双精度浮点数格式(64位),而在这种格式下无法精确表示某些小数。这时候后端给出了一个建议,使用decimal库,说是计算比较好。

安装步骤:

说干就干,找到github地址来进行看看(github.com/MikeMcl/dec...

按照步骤一步步来实现:

javascript 复制代码
// 安装
npm install decimal.js

// 使用
const Decimal = require('decimal.js');

import Decimal from 'decimal.js';

import {Decimal} from 'decimal.js';

按照这个步骤来进行使用了,但是运行过程中一直报错,提示找不到decimal.js, 提示 npm install decimal.js 来进行安装

但是明明Package中已经安装好了,不知道为什么会一直报找不到。也换过安装方式 使用yarn, 也通过 -g 来全局安装但是此时提示证书过期?

不知道是不是因为是微信小程序的原因,但是看网上别人是可以正常使用的,难道是node版本的问题?

好吧,折腾不了,那就直接引入吧。

直接找到文件的decimal.js 文件,把内容复制到自己项目的utils/decimal文件下,

此时再引入 终于可以正常使用了!

javascript 复制代码
import Decimal from 'utils/decimal'
scss 复制代码
Decimal.add(...) // 直接使用就可

具体使用:

这里写上一些常用的方法吧,其实大部分用到的也就是乘除和加减。

mul:乘法

scss 复制代码
Decimal.mul(0.1, 0.2).toNumber() // 0.02

toNumber是转换为数值类型,默认计算后是字符串类型

add: 加法

scss 复制代码
Decimal.add(0.1, 0.2).toNumber() // 0.3

sub: 减法

scss 复制代码
Decimal.sub(0.8, 0.2).toNumber() // 0.6
makefile 复制代码
toFixed: 转换为几位小数
scss 复制代码
Decimal.sub(0.8, 0.2).toFixed(3) // '0.600'

其他的方法我就不一一列举了,都可在该文档中进行查询(mikemcl.github.io/decimal.js/...

就写到这里了,后续有问题再进行补充,如果有什么问题,欢迎指正!!

相关推荐
Autumn_ing7 小时前
Design.md生成UI怎么验收?举例运营后台的颜色、状态和数据核对
前端·ui·ai·设计系统·paico·ai生成ui·design.md
keyipatience8 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
朱涛的自习室8 小时前
我给 Gemini 4 和 DeepSeek 搞了套「末位淘汰」,AI 干活会更猛吗?(Day 3)
android·前端·后端
java1234_小锋10 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
鶴哥只手遮天11 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方11 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户5304297657911 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain11 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts11 小时前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端
大孜然11 小时前
孜然QQ频道自动化程序机器人配置教程
前端