JS大坑之19位数的Number型精度丢失问题详解

2024-12-15 14:47:51

More

本项目仅供爬取体验，每次访问都会实时爬取数据，所以数据返回速度会比较慢，实际操作应该是定时爬取数据然后将数据存进数据库，数据从数据库返回从而提高数据返回效率。

但项目很基础，可以作为以上各个node模块最基础的练手使用，希望可以帮到大家 😀起源

最近在实现一个需求的时候，需要接入第三方的接口，先调用A接口，A接口返回的数据里，有一个taskId，然后再使用这个taskId请求B接口，获取最终需要的数据。

后端使用的是node，因此最开始使用的是request-promise这个包请求第三方接口，然而在获取A接口返回的taskId之后，调用B接口之后，B接口的响应居然是系统错误！简易代码如下

const rp = require('request-promise')
const { taskId } = await rp('https://xxx.com/A')
const options = {
   method: 'POST',
   uri: 'https://xxx.com/B',
   body: {
    taskId
  },
   json: true
}
const result = await rp(options)
// {
//  "errorcode": "40001",
//  "message": "系统错误",
//  "status": "failed"
// }

接着我使用postman请求A接口，获取新的taskId，再用新的taskId请求B接口，结果却是正常的！

我在反复检查代码，确认请求的参数都是正常的格式之后，一时陷入了无尽的沉思之中。。。

发现

在做了几次尝试之后，我发现使用node请求得到的taskId最后两位数都是0，即1152921504735848700，而使用postman获取的taskId，则是比较正常的是1152921504735848759，接着我在node控制台做如下操作

就是这么一瞬间，顿悟了。A接口里的taskId是个19位数字，而request-promise在将数据解析成json时，导致这个19位的数字丢失了精度，查了下资料，发现js的number类型有个最大安全值，即2的53次方（9007199254740992），超过这个值就会出现精度丢失的问题。 Orz

获取正确的响应数据

由于在一开始使用request-promise包，因此获取的taskId是丢失了精度了，因此改用了node原生的http模块发送请求。

const req = https.request('https://xxx.com/A', (res) => {
  res.on('data', (chunk) => {
  // 由于这里获取到的响应数据是JSON字符串，因此19位的数字只是字符串的一部分，这时获取到的taskId就是正确的数字
   console.log(`BODY: ${chunk}`);
  });
  res.on('end', () => {
   console.log('No more data in response.');
  })
 })

虽然获取到了正常的响应数据，但是这是个JSON字符串，接下来还要把这个字符串解析成JSON，但是用JSON.parse()，又会引起精度丢失的问题，这可真尴尬 Orz

如果这个接口是已方可控的，那么就可以把这个19位数的number转成字符串，这样在解析的时候就不会出错了，但是由于是第三方接口，因此没法改变。那么最快的解决方案，就是换种编程语言请求啊╮（╯＿╰）╭

最后的解决

好吧，最后还是用了node，不过我用了比较硬核的方案实现，先在获取的JSON字符串中，找到这个19位的数字，然后为它加上引号，这样再用JSON.parse()解析的时候，就能保持正常的数值，这样接下的流程就自然通了，代码如下

let result = '{"taskId":1152921504735848759,"status":"CREATED","progress":0.0,"success":true}'
// JSON.parse(result) 不为19位数补上双引号，直接parse时，精度丢失，结果如下：
// {
//  taskId: 1152921504735848700,
//  status: 'CREATED',
//  progress: 0,
//  success: true
// }
const taskId = result.match(/[0-9]{19}/)[0] // 正则获取19位数字的值
result = result.replace(taskId,`"${taskId}"`) // 补上双引号
const data = JSON.parse(result)
// {
//  taskId: '1152921504735848759', // 解析出来之后是字符串，因此没有丢失精度
//  status: 'CREATED',
//  progress: 0,
//  success: true
// }

结语

使用node也有一段时间了，因为涉及不到大数计算，因此对于编号啊，ID啊，都是用字符串形式进行存储的，也就一直没有遇到这个问题。这一次居然碰上了，不得不说js在这一方面确实有点弱势，之后也尝试了下使用Go,python进行请求，都是能正确解析不过node使用起来还是很舒服的

以上所述是小编给大家介绍的JS大坑之19位数的Number型精度丢失问题详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JavaScript字符串转数字的5种方法及遇到的坑

String转换为Number有很多种方式,我可以想到的有5种! parseInt(num); // 默认方式 (没有基数) parseInt(num, 10); // 传入基数 (十位数) parseFloat(num) // 浮点数 Number(num); // Number 构造器 ~~num //按位非 num / 1 // 除一个数 num * 1 // 乘一个数 num - 0 // 减去0 +num // 一元运算符 "+" 选择哪一种呢?什么时候选择它?为什么选择这种
JS面试题大坑之隐式类型转换实例代码

1.1-隐式转换介绍在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小 1.2-隐式转换规则转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符
使用PHP json_decode可能遇到的坑与解决方法

前言最近在做网站的时候用到了json_decode函数,发现了一个问题,现在总结分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 场景: 某项目客户反馈,输出的结果 JSON 中有个要求为对象的数据字段,在某些情况下返回的是 [] 而不是 {}:数据由公司其他部门提供,查看原始数据的时候,没有发现任何问题:后来因为要加入某些预处理,在获取到其他部门的 JSON 数据之后进行解码并对某个字段进行处理:然而,在处理完之后再次使用 JSON 输出,发现结果已经不是我们想要的了. 原始数
基于js粘贴事件paste简单解析以及遇到的坑

在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome的新特性是可以尽情使用了,还是能够覆盖到大部分用户的.所以本文只讨论Chrome如何使用和如何阻止Safari,原理大概了解了,再研究其他浏览器相关的问题就容易多了. paste事件可以用js给页面中的元素绑定paste事件的方法,当用户鼠标在该元素上或者该元素处于focus状态,绑定到paste
对象题目的一个坑理解Javascript对象

这一篇的例子,主要是来引起对Javascript对象的理解及注意的.其实是一种面试时的一个坑,实际项目中也是很少用得到,但是为了提高警惕性,我们来看这个例子: 代码名称 var first = {}; var second = {k:"second"}; var third = {k:"third"}; first[second] = 100; first[third] = 200; console.log(first[second])//这里会输出什么内容呢? 如
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

本文实例讲述了弱类型语言javascript开发中的一些坑.分享给大家供大家参考,具体如下: 测试1: (未声明变量自动提升为全局变量) test1(); function test1() { function setName() { name = '张三'; // 此处没有var声明,提升至全局 } setName(); console.log(name);// '张三' } 测试2: (函数内部局部变量的变量提升) test2(); function test2() { var a = 1;
JavaScript代码编写中各种各样的坑和填坑方法

坑"这个字,在此的意思是"陷阱".由于 JavaScript "弱语言"的性质,使得其在使用过程中异常的宽松灵活,但也极为容易"中招".这些坑往往隐藏着,所以必须擦亮双眼,才能在学习与应用 JS 的道路上走的一帆风顺. 一.全局变量 JavaScript 通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的. "未声明直接简单使用"
JavaScript中使用typeof运算符需要注意的几个坑

typeof是一个运算符,它对操作数返回的结果是一个字符串,有6种(只针对ES,不包含HOST环境对象). 1.'undefined' 2.'boolean' 3.'string' 4.'number' 5.'object' 6.'function' 因为它本身是运算符,它不是函数,使用时没必要加个小括号. 复制代码代码如下: if (typeof(obj) === 'undefined') { // ... } typeof用来判断类型,它有几个坑 1. 对null返回是'objec
Javascript中构造函数要注意的一些坑

前言最近在家看书:<你不知道的Javascript>,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下. 构造函数简单的讲,即定义出来专供new 式调用的函数. 如: function A(b) { this.b = b || 'bbb'; } 然后你就可以通过new ,来构建一个 A 的实例: var a = new A('B') 但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误: var aa
JS大坑之19位数的Number型精度丢失问题详解

More 本项目仅供爬取体验,每次访问都会实时爬取数据,所以数据返回速度会比较慢,实际操作应该是定时爬取数据然后将数据存进数据库,数据从数据库返回从而提高数据返回效率. 但项目很基础,可以作为以上各个node模块最基础的练手使用,希望可以帮到大家
JavaScript中Number对象的toFixed() 方法详解

定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数描述 num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 l
JS中原始值和引用值的储存方式示例详解

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number.Stirng.Boolean.Null.Underfined 引用值指的是复合数据类型的值,包括:Object.Function.Array.Date.RegExp 根据数据类型不同,有的变量储存在栈中,有的储存在堆中.具体区别如下: 原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始
web3.js调用链上的方法操作NFT区块链MetaMask详解

目录实例化链上方法 MetaMask 首先要初始化web3 实例化链调用链上方法授权调用游戏链上方法质押NFT 实例化链上方法公司的项目全是区块链项目,最近这个项目是要构建一个链上的游戏社区,目前这个功能是用户可以质押NFT到游戏的链上,然后游戏那边就可以有人去参加竞赛,然后质押人可以赎回NFT. MetaMask web3.js MetaMask 浏览器插件用的是小狐狸MetaMask 网络用的是测试网络Rinkeby,记得切换网络,把设置 > 高级 > 显示测试网络打开 let
js基础之DOM中document对象的常用属性方法详解

-----引入每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 do
关于js二维数组和多维数组的定义声明(详解)

声明一维数组:var goodsArr = []; 赋值:goodsArr[0] = 'First Value'; 这个毫无争议,因为平时使用PHP比较多,而php语法是可以直接使用goodsArr[0] = 'First Value'; 这种方法声明数组并赋值的,但js不能这样使用,必须先声明数组存在.同理,如果是二维和多维数组在使用前也必须声明二维和多维的数组,举例二维数组: var goodsArr[0] = []; 必须先这样声明一下二维数组才能使用二维数组,否则会出错的. 以上就是小编
JS中正则表达式只有3种匹配模式(没有单行模式)详解

JS正则表达式对象模式仅有如下三种: g (全文查找出现的所有 pattern) i (忽略大小写) m (多行查找) 即没有单行匹配模式,Singleline(单行模式):更改.的含义,使它与每一个字符匹配(包括换行符\n). 如java中 String regex = "(?s)(?<=interface).{0,500}(shutdown)";---------"."表示在一行. 但可以采用[\d\D]或[\w\W]或[\s\S]或(.|\s)*?来解
[js高手之路]原型式继承与寄生式继承详解

一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; return new G(); } var obj = { name : 'ghostwu', age : 22, show : function(){ return this.name + ',' + this.age; } }; var obj2 = object( obj ); console.log(
js删除数组中的元素delete和splice的区别详解

例如有一个数组是 :var textArr = ['a','b','c','d']; 这时我想删除这个数组中的b元素: 方法一:delete 删除数组 delete textArr[1] 结果为: ["a",undefined,"c","d"] 只是被删除的元素变成了 undefined 其他的元素的键值还是不变. 方法二:aplice 删除数组 splice(index,len,[item]) 注释:该方法会改变原始数组. index:数组开
js实现unicode码字符串与utf8字节数据互转详解

js的string变量存储字符串使用的是unicode编码,要保存时必须选择其他编码后进行传输,比如转成utf-8,utf-32等.存储到数据库中为utf-8编码,读取出来如何转换成正确的字符串就成了问题.现在给出解决方案,可以正确支持中文.emoji表情.英文混合的字符串编码互转. /** * Created by hdwang on 2019/1/28. */ var convertUtf8 = (function() { /** * unicode string to utf-8 * @p

JS大坑之19位数的Number型精度丢失问题详解

相关推荐

随机推荐