前端接收后端数据时,遇到精度丢失的问题

简介: 前端接收后端数据时,遇到精度丢失的问题

前端接收后端数据时,可能会遇到精度丢失的问题


前言

之前项目开发过程中遇到过前端接收后端数据时,遇到精度丢失的问题。当时进行了问题记录,本篇博客针对于这个问题进行问题原因并进行多种方式解决这个问题。

问题原因

前端接收后端返回的数据时出现精度丢失问题,通常是因为在数据传输过程中,数据类型被转换为了 JavaScript 中的 Number 类型,而 JavaScript 的 Number 类型有一定的精度限制,无法精确表示一些较大或较小的数值,从而导致精度丢失。


JavaScript 中的 Number 类型可以表示的数字范围是 -9007199254740991 到 9007199254740991,即在 2 的 53 次方以内的整数和小数,超过这个范围的数字可能会失去精度或被表示为特殊的 Infinity 或 NaN 值。这是由于 JavaScript 中的 Number 类型采用的是 IEEE 754 标准的双精度浮点数表示法,使用 64 位二进制格式存储数字,其中 1 位符号位、11 位指数位和 52 位尾数位。因此,JavaScript 中的 Number 类型能够存储的有效数字位数为 52 位,即最多可以精确表示 15 位十进制数字。

如何解决

1.使用字符串类型传递:将后端生成的 ID 转换成字符串类型后再传递给前端,这样可以避免浮点数精度丢失的问题。

2.在前端进行精度处理:在前端接收到 ID 后,可以使用一些 JavaScript 库来进行高精度计算和处理,例如 decimal.js、bignumber.js 等,这样可以避免浮点数精度丢失的问题。

3.前后端统一使用相同的算法:可以尝试使用前后端都支持的算法来生成全局唯一 ID,这样可以保证前后端生成的 ID 是一致的,避免精度丢失的问题。


需要注意的是,如果精度丢失的问题比较严重,可能会影响到系统的正确性,因此需要根据实际情况选择适合的解决方法。

解决示例

后端解决方式

在对应的实体属性上添加注解:

@JsonSerialize(using = com.fasterxml.jackson.databind.ser.std.ToStringSerializer.class)

@JsonSerialize 注解用于指定在将 Java 对象序列化为 JSON 字符串时使用的序列化器,其中

using 属性用于指定序列化器的实现类。在这个例子中,

using 属性指定为

com.fasterxml.jackson.databind.ser.std.ToStringSerializer.class,即使用 Jackson 序列化库中的

ToStringSerializer 类来将 Java 对象的值序列化为字符串类型的 JSON 值。


具体来说,在这个例子中,ToStringSerializer 类实现了将 Java 对象的值序列化为字符串类型的 JSON 值的功能。例如,如果 Java 对象的一个属性是 Long 类型,使用默认的序列化方式时,该属性的值会被序列化为一个数字类型的 JSON 值。但是使用 ToStringSerializer 类时,该属性的值会被序列化为一个字符串类型的 JSON 值,即将该属性的值转换为字符串类型后再进行序列化。

使用 ToStringSerializer 类的主要作用是将 Java 对象中的某些属性序列化为字符串类型的 JSON 值,这通常用于解决一些精度丢失或溢出等问题。例如,在 Java 中,当使用 double 或 float 类型来表示一个非常大或非常小的数时,可能会出现精度丢失或溢出的问题,这时可以使用 ToStringSerializer 类将该属性的值转换为字符串类型后再进行序列化,避免精度问题。


示例:

@JsonSerialize(using = com.fasterxml.jackson.databind.ser.std.ToStringSerializer.class)
//解决雪花算法生成后,前端接收后缺失精度问题
private BigInteger id;

前端进行处理

将数字121212121211212564(17位)使用 decimal.js 库在前端进行精度处理的示例:

  1. 安装 decimal.js 库:
npm install decimal.js
  1. 在前端代码中引入 decimal.js:
import Decimal from 'decimal.js';
  1. 使用 Decimal 类来进行精度处理:
const num = '121212121211212564';
const decimalNum = new Decimal(num);
console.log(decimalNum .toString()); // '121212121211212564'

在这个示例中,我们使用 Decimal 类将给定的数字 121212121211212564 转换成了 decimal.js 支持的数据类型,然后使用 toString() 方法将结果转换成字符串类型。

需要注意的是,如果你给出的数字有小数部分,那么你需要使用 toDecimalPlaces() 方法来指定小数部分的精度。如果你不使用 toDecimalPlaces() 方法,那么在进行运算时,可能会出现精度丢失或者溢出的问题。

目录
相关文章
|
23小时前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
4天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
4天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
4天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发者的必备技能
随着互联网技术的不断发展,全栈开发者的需求日益增长。本文将介绍如何从前端到后端,掌握全栈开发所需的关键技能,包括前端框架的选择、后端语言的学习以及数据库的应用,帮助读者构建成为全面的技术专家。
|
5天前
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
13 1
|
5天前
|
前端开发 测试技术 持续交付
《跨界合作:前端与后端如何优化协作效率》
在当今软件开发领域,前端和后端开发团队通常是分开工作的,但他们的协作质量直接影响着项目的成功与否。本文将探讨如何通过优化前端与后端的协作方式,提高开发效率和项目质量,从而实现更好的跨界合作。
|
5天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
5天前
|
监控 Java 开发者
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第13天】随着现代应用的复杂性日益增加,传统的单体应用架构已不足以满足快速迭代和可扩展性的需求。本文将探讨如何通过微服务架构来提升后端开发的效率和系统的可靠性,涵盖微服务设计原则、技术栈选择、部署策略以及维护实践。我们将分析微服务的优势与挑战,并提供一系列实施建议,帮助开发者在构建和维护分布式系统时做出明智决策。
|
1天前
|
监控 负载均衡 API
构建高效可靠的微服务架构:后端开发的新趋势
【5月更文挑战第19天】 在当今快速发展的数字时代,微服务架构已经成为了软件开发领域的一大热点。本文将深入探讨如何构建一个高效且可靠的微服务架构,以满足不断变化的业务需求和应对日益增长的用户需求。我们将从微服务的基本概念、优势、关键技术以及实践建议等方面进行详细阐述,为后端开发人员提供一套完整的解决方案。
|
3天前
|
监控 持续交付 开发者
构建高效微服务架构:后端开发的新范式
【5月更文挑战第18天】 随着现代软件开发的复杂性日益增长,传统的单体应用架构已难以满足快速迭代和灵活部署的需求。本文聚焦于一种新兴的解决方案——微服务架构,探讨其如何为后端开发带来革命性的改变。我们将深入分析微服务的核心概念、优势与挑战,并通过具体案例来阐述如何在实际项目中实施微服务架构。文章旨在为开发者提供一种系统化的方法,帮助他们理解并应用微服务架构,以提升系统的可维护性、扩展性和技术敏捷性。
14 2