JavaScript数据精度缺失问题

最新推荐文章于 2025-06-15 16:00:12 发布
转载 最新推荐文章于 2025-06-15 16:00:12 发布 · 524 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000017467338
文章标签：

#前端 #javascript #ViewUI

本文探讨了JavaScript在处理数值计算时遇到的精度缺失问题，尤其是涉及金额计算时的挑战。文章通过实例解释了为何0.1+0.2不等于0.3，并介绍了使用10的n次幂和number-precision库来解决这一问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

说到数据精度缺失的问题，就想起今年夏天刚转正做的一个项目。当时的需求涉及到金额的计算，那时候对js的了解比现在还少，不过当时关于金额计算这块js函数的封装是项目里架构师写的，印象很深，当时他就直呼：被JS精度缺失坑了一把！最近看资料又接触到精度缺失，那就自己站在巨人们的肩膀上整理一下。

JS中数据类型Number

不像Java，数字型的数据类型有short，int，long，float，double等，数字类型的数据在JS中只有一种数据类型——Number。那它的底层是怎么表示的呢？我们参考菜鸟教程的一段话，它是这么说的：

JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x
10308，最小值为±5 x 10 -324。

数据的存储格式用图形表示如下↓
图片描述

（这里先给自己留个坑，等搞清楚了具体的浮点数计算方法后再填……）

实例演示讲解

我们在控制台上做如下的十进制的加法运算，如下图所示

clipboard.png

表面上我们做的是十进制的加法，实际上计算机在底层把它换算成了二进制，再做运算。但是0.1和0.2用二进制表示的话位数是无法穷尽的。因此我们看到的0.1用二进制表示的某数只是真实的0.1的一个近似数。0.2也是这个道理。所以实际上0.1+0.2是两个近似数的相加，因此这个结果也就是0.3的近似数啦。这里不做十进制小数转二进制的详细算法，感兴趣的小伙伴可以继续深入研究。

遇到这种问题，如何解决

  • 10的n次幂运算
    把数字乘以10的n次幂，转换成计算机能够精确识别的整数，之后再除以相同的10的n次幂。

clipboard.png

  • number-precision
    这是一个挺好用的JS数据运算工具，它也是为了解决JS数据精度缺失而产生的。用法如下（官网的截图）

图片描述

【SpringBoot】79、SpringBoot中返回JS长整型数据丢失精度问题
Asurplus
06-20 3万+
我们在给前端返回数据时，雪花 ID、时间戳等长度超过 JS 中最大值时，会发生精度丢失问题
js解决数字小数计算出现的精度丢失问题（2024-05-24）
hap1994的博客
05-24 2618
js小数进行数值运算时出现精度丢失问题JavaScript 的number类型在进行运算时都先将十进制转二进制，此时，小数点后面的数字转二进制时会出现无限循环的问题。为了避免这一个情况，要舍0进1，此时就会导致精度丢失问题。
JS精度缺失问题
mengxiaodi的博客
09-18 1955
在处理一些极端情况下的复杂数值计算时，我们可能会遇到这样的情况——运算结果丢失精度。那么，为什么会出现这样的情况？该如何避免运算精度丢失呢？在JavaScript中，运算精度丢失的一个主要原因是浮点数的不精确性。JavaScript中的数字类型只有一种，即Number类型，采用64位浮点数表示法，能够表示的最大值为1.7976931348623157e+308，最小值为5e-324，但在进行小数的计算过程中，浮点数的二进制表示往往无法精确表示，就会产生精度的丢失。
JavaScript 精度问题深度解析
记录来时的路
06-15 425
JavaScript数字精度问题的本质是由于采用IEEE 754双精度浮点数标准，导致某些十进制小数无法精确表示。该问题在金融计算、科学运算和条件判断等场景中尤为突出。解决方案包括：整数运算、精度控制、容差比较和使用专用库（如decimal.js）。最佳实践建议金融系统采用整数运算，科学计算选用专业库，避免直接比较浮点数。该问题并非JavaScript缺陷，而是计算机在精度与效率间的必要权衡。开发中应根据业务需求选择合适方案，特别注意货币等敏感计算场景。
js 精度丢失
mcfeng blog
09-02 767
今天写微信小程序的遇到两位小数相乘，结果得到的是***.99999。匪夷所思； 原来是js中就有这个问题，解决办法： 除法： //除法 function accDiv(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length } catch (...
JS丢失精度
qq_33486082的博客
10-19 721
toFixed 不会四舍五入（Chrome） JS 数字丢失精度的原因 计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示，如 圆周率 3.1415926...，1.3333... 等。JS 遵循 IEEE 754 规范，采用双精度存储（double precision），占用 64 bit。 解决方案 对于整数，前端出现问题的几率可能比较低，毕竟很少有业务需要需要...
js精度缺失问题
xin_jiao的博客
09-19 320
JavaScript采用的是双精度浮点数表示法，也称为IEEE 754标准，采用64位浮点数表示法，能够表示的最大值为1.7976931348623157e+308，最小值为5e-324，但在进行小数的计算过程中，浮点数的二进制表示往往无法精确表示，就会产生精度的丢失。那么，为什么会出现这样的情况？但是对于一个浮点数来说，因为小数点的存在，小数点的位置不是固定的。总而言之，小数点精度丢失的问题是由于JavaScript使用的浮点数表示法的特性所致，需要在开发中注意，并考虑使用其他方法或工具来解决精度问题。
小程序数据精度缺失问题 2020-10-15
linchu9502的博客
10-15 1128
项目场景： 小程序获取订单号 问题描述： 返回的订单号是Number类型，前端获取输出的订单号最后两位为0，数据不正确 小程序network接收的数据： 控制台输入的数据id： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
JavaScript数字精度丢失问题解决方案
Sherry Tian的博客
10-06 629
在使用javascript进行运算时经常会遇到计算结果不准确问题，该如何处理呢，本篇就来说说当javascript数字精度丢失时我们该怎么办
说说 Javascript 数字精度丢失的问题，如何解决？
林恒的博客
05-30 1280
这个数无限循环，再大的内存它也存不下，所以不能存储一个相对于数学来说的值，只能存储一个近似值，当计算机存储后再取出时就会出现精度丢失问题。主要是存储二进制时小数点的偏移量最大为52位，最多可以表达的位数是2^53=9007199254740992，对应科学计数尾数是 9.007199254740992，这也是 JS 最多能表示的精度。计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式，然后计算机以自己的规则{符号位+(指数位+指数偏移量的二进制)+小数部分}存储二进制的科学记数法。
javascript解决小数的加减乘除精度丢失的方案
10-22
在JavaScript开发中，处理小数加减乘除运算时经常会遇到精度丢失的问题。由于JavaScript中的数字是以IEEE 754标准的双精度64位浮点数来表示的，这就意味着它可以精确地表示的整数范围大约在-***到***之间。当超出这...
JavaScript精度丢失问题
liushihao_的博客
08-04 507
javaScript中臭名昭著的BUG就是0.1+0.2 !== 0.3，因为精度问题，导致所有浮点数运算都是不安全的。 正如下面的计算结果，它们并不是我们所预想的： 0.1 + 0.2 = 0.30000000000000004 1 - 0.9 = 0.09999999999999998 虽然很多人知道这个浮点数误差这个问题的，可是却不知道背后的原理以及解决方案。今天我们就通过上面两个例子看看JavaScript浮点数误差问题背后的原理以及解决方案吧！ 那我们先..
js处理数字精度问题
dsy960111的博客
06-29 1317
var accAdd = function (arg1,arg2){ var r1,r2,m; try{ r1=arg1.toString().split(".")[1].length; } catch(e){ r1=0; } try{ r2=arg2.toString().split(".")[1].leng...
js精度缺失原因及解决方法
下雨打伞干嘛的博客
02-02 1766
js精度缺失原因及解决方法
JS精度丢失原因及解决方案
vikingship的博客
01-02 524
JavaScript 精度丢失
JS中小数点精度丢失的原因及解决方法
m0_72424150的博客
07-18 5605
计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式，然后计算机会存储二进制的科学记数法, 因为存储时有位数限制（64位），并且某些十进制的浮点数在转换为二进制数时会出现无限循环，会造成二进制的舍入操作(0舍1入)，当再转换为十进制时就造成了计算误差。
为什么js小数相加，会产生精度缺失的问题，怎么解决？
weixin_65363325的博客
03-07 741
JavaScript 中的所有数字，包括整数和小数，都采用 IEEE 754 双精度 64 位浮点数（double-precision 64-bit floating-point format）来表示。综上所述，JavaScript 小数相加产生精度缺失问题的根源在于 IEEE 754 双精度浮点数表示法无法精确表示所有的十进制小数。在计算机中，要将十进制小数转换为二进制小数，通常采用“乘 2 取整”的方法。但并不是所有的十进制小数都能精确地转换为二进制小数。
精度丢失问题
幼稚的小龙龙
03-23 1047
实线代表合法转换即无信息丢失的转换，虚线表示转换可能存在精度丢失问题。 在进行两个数值的运算时 如果两个操作数中有一个是double类型的，另外一个自动转换为double类型。 如果其中一个操作数是float类型的，另外一个操作数也将自动转换为float类型。 如果其中一个操作数是long类型的，另外一个操作数也将自动转换为long类型。 否则，两个操作数都会被转换为int类型。 所以在对两个不同类型操作数进行运算时，就可能存在精度丢失的问题。 ​ 例如：当一个int型数值和一个float型数值进行运算.
js运算精度丢失_js精度丢失解决办法
2401_85124786的博客
06-12 382
/ 避免最终求出结果的长度大于最大长度的时候导致精度丢失 开启下面。
cesium wfs 精度缺失
最新发布
07-19
<think>我们正在处理用户关于Cesium加载WFS服务时遇到的精度缺失问题。 首先，我们需要理解问题：当使用Cesium加载WFS（Web Feature Service）服务时，用户遇到了精度损失，即坐标数据在渲染时可能出现了不准确的情况。 可能的原因： 1. WFS服务返回的数据精度不足（例如，数据本身存储为低精度）。 2. Cesium在解析或渲染时对坐标进行了不适当的处理（例如，四舍五入或浮点数精度问题）。 3. 坐标参考系统（CRS）转换过程中的精度损失。 解决方案思路： 1. 确保WFS服务返回高精度数据：检查WFS服务的请求和响应，确认请求中是否指定了返回数据的精度（如输出格式、小数位数等）。 2. 检查Cesium的坐标处理：Cesium使用笛卡尔空间直角坐标系（Cartesian3）来表示位置，其内部使用双精度浮点数。但是，如果数据在转换过程中（例如从经纬度到笛卡尔坐标）处理不当，可能导致精度损失。 3. 坐标参考系统：确认WFS服务使用的CRS与Cesium使用的CRS（通常是EPSG:4326）是否一致。如果不一致，需要进行转换，而转换过程可能引入误差。 具体步骤： 1. 检查WFS请求：确保请求中指定了返回的数据格式为高精度。例如，使用GML格式时，可以检查坐标的小数位数。 2. 在Cesium中，使用`Cesium.Cartographic.fromCartesian`方法将笛卡尔坐标转换为经纬度（弧度），然后转换为度，检查精度是否与原始数据一致。 3. 如果WFS服务使用的是其他CRS（如EPSG:3857），则需要在客户端进行坐标转换。在转换过程中，使用高精度的转换库（如proj4）来减少误差。 另外，Cesium在处理位置时，对于远离地心的位置可能会使用相对坐标（以相机为中心）来优化性能，但这通常不会导致精度损失，因为原始坐标仍然以高精度存储。 参考讨论： 根据Cesium社区的讨论，有类似问题报告，例如： - 在加载GeoJSON时，如果坐标是整数（如度数为整数），则显示位置不精确。解决方案是确保数据源使用足够的小数位数[^1]。 - 使用Cesium的`GeoJsonDataSource`加载数据时，可以通过设置`clampToGround`为true来将点固定到地面，但线、面可能需要使用其他方法[^2]。 但是，用户使用的是WFS服务，因此可能需要直接使用`Cesium.WebMapServiceImageryProvider`或通过第三方库（如OpenLayers）加载WFS，然后将几何图形转换为Cesium实体。 建议的解决方案： 1. 直接使用WFS服务的GeoJSON输出（如果支持）并检查精度。WFS服务通常支持多种输出格式，如GeoJSON、GML等。GeoJSON在JavaScript中更易处理。 2. 如果使用GML，需要解析GML并提取坐标，然后创建Cesium实体。在解析过程中，确保保留足够的精度。 代码示例（使用GeoJSON）： 如果WFS服务支持GeoJSON输出，可以这样加载： ```javascript Cesium.GeoJsonDataSource.load('http://example.com/geoserver/wfs?request=GetFeature&...&outputFormat=application/json').then(function(dataSource) { viewer.dataSources.add(dataSource); }); ``` 在加载GeoJSON时，Cesium会将其转换为实体。如果发现精度问题，可以检查GeoJSON中的坐标值是否包含足够的小数位。 如果WFS服务不支持GeoJSON，而是返回GML，则可以使用第三方库（如OpenLayers）解析WFS响应，然后将几何图形转换为Cesium实体。在转换过程中，注意保留坐标精度。 另一种方法：使用Cesium的`Cesium.WebMapServiceImageryProvider`加载WMS（作为影像），但WFS是矢量数据，所以不适用。因此，我们主要关注矢量数据的加载。 精度问题可能出现在数据解析阶段。例如，如果使用JavaScript解析坐标字符串时，没有保留足够的小数位，就会导致精度损失。因此，在解析时，应使用`parseFloat`并确保不截断小数。 总结： 1. 确认WFS服务返回的数据精度：通过查看原始响应数据，检查坐标值的小数位数。 2. 在Cesium中，使用高精度的方式创建实体：直接使用原始坐标值（未经截断）创建Cesium的实体（如点、线、面）。 3. 如果需要进行CRS转换，使用高精度转换库。 相关问题： 1. 如何检查WFS服务的响应数据精度？ 2. 在Cesium中如何创建高精度的实体？ 3. 如何在Cesium中进行坐标参考系统转换？ 下面，我们将详细解答用户的问题。</think>### Cesium加载WFS服务精度缺失问题分析及解决方案 在使用Cesium加载WFS（Web Feature Service）服务时遇到精度缺失问题，通常由以下原因导致： 1. **坐标参考系统（CRS）转换问题** WFS服务默认使用EPSG:4326（WGS84）坐标系，但某些服务可能使用其他CRS（如EPSG:3857）。转换过程中浮点数精度损失会导致偏移： $$ \Delta \text{precision} = f(\text{CRS}_\text{source}) - g(\text{CRS}_\text{target}) $$ 解决方法： - 在WFS请求中显式指定CRS： ```http &srsName=EPSG:4326 ``` - 使用`proj4js`库进行高精度坐标转换[^1] 2. **几何数据简化问题** GeoServer等WFS服务默认会简化几何图形（如`maxDecimals=4`），导致坐标截断： ```xml <!-- 原始坐标 --> <gml:pos>113.12345678 23.12345678</gml:pos> <!-- 简化后 --> <gml:pos>113.1235 23.1235</gml:pos> ``` 解决方法： - GeoServer中禁用简化：在数据存储的`高级选项`中设置`Decimal places max`为`-1` - 请求参数强制精度：`&format_options=rounding:max:15` 3. **Cesium渲染优化机制** Cesium默认对距离>100km的实体启用LOD简化，可通过以下代码禁用： ```javascript viewer.resolutionScale = 1.0; // 禁用分辨率缩放 viewer.scene.postProcessStages.fxaa.enabled = false; // 关闭抗锯齿优化 ``` 4. **GeoJSON解析精度损失** 使用`Cesium.GeoJsonDataSource`时，JSON.parse()会降低精度： ```javascript // 错误方式：直接解析字符串 const dataSource = await Cesium.GeoJsonDataSource.load(geojsonString); // 正确方式：使用自定义解析器 const geoJson = JSON.parse(geojsonString); geoJson.features.forEach(f => { f.geometry.coordinates = fixPrecision(f.geometry.coordinates, 8); }); const dataSource = await Cesium.GeoJsonDataSource.load(geoJson); ``` **完整解决方案示例：** ```javascript async function loadHighPrecisionWFS() { // 1. 获取原始GML数据 const response = await fetch('http://geoserver/wfs?request=GetFeature&srsName=EPSG:4326&outputFormat=application/json'); const geojson = await response.json(); // 2. 精度修复（保留8位小数） const precisionFix = coords => coords.map(c => Array.isArray(c) ? precisionFix(c) : parseFloat(c.toFixed(8)) ); geojson.features.forEach(f => { if (f.geometry) f.geometry.coordinates = precisionFix(f.geometry.coordinates); }); // 3. 加载到Cesium const dataSource = await Cesium.GeoJsonDataSource.load(geojson, { clampToGround: true }); viewer.dataSources.add(dataSource); // 4. 禁用优化 viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.postProcessStages.fxaa.enabled = false; } ``` **验证方法：** 1. 比较原始WFS坐标与Cesium实体坐标： ```javascript const position = entity.position.getValue(Cesium.JulianDate.now()); const cartographic = Cesium.Cartographic.fromCartesian(position); console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)); ``` 2. 使用`<ctrl> + <shift> + I`打开Cesium Inspector检查渲染精度 若问题仍存在，建议检查WFS服务端的GML生成配置，或使用WFS-T（事务）服务直接获取二进制几何数据[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值