vue项目如何解决数字计算精度问题

vue项目数字计算精度问题

js计算精度问题解决步骤

1.进入指定项目 终端安装依赖：

npm install mathjs --save

2.引入依赖包，在需要解决精度问题的页面引入

mathjs： const math = require(‘mathjs')

使用math.format方法

math.format(a*b,num)

a,b表示需要计算的两个数，可以进行加减乘除平方等等计算

num表示精度，最大为14，表示单一文本框最大的数字位数，包括小数点前后，如

如果用户输入99.9999(6个9)

• 当num为5时，输入的数字显示为99.999
• 当num为6时，输入的数字显示为99.9999
• 当num大于6时，输入的数字显示为99.9999

vue处理超过16位数字精度丢失问题

当我们使用MyBatis-Plus 使用 ID_WORKER 或者 ASSIGN_ID(雪花算法) 生成的id作为主键时，因为其长度,为19位，而前端一般能处理16位，如果不处理的话在前端会造成精度丢失，最后两位会变成00

如下图，感觉像是四舍五入后的效果

处理这种问题有两种方案，要么后端出处理，要么前端处理

后端处理

直接把id类型改为String就行，这样是可以，但是我们如果非要用Long呢？

我们可以给对应的实体类主键属性加入注解@JsonSerialize

import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
@JsonSerialize(using = ToStringSerializer.class)
@TableId
private Long id;

前端处理

前端一般都是用axios进行数据请求，我们通过引入json-bigint来解决

yarn add json-bigint
//或
npm install json-bigint

在封装的请求工具类中添加如下代码即可。

axios.defaults.transformResponse = [
  function (data) {
    const json = JSONBIG({
      storeAsString: true
    })
    const res = json.parse(data)
    return res
  }
]

两种方案皆可。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。