Javascript 将浮点数处理为数字并从数字中删除小数

Question

我遇到一个问题，我的后端将包含浮点数（例如 10.0、20.0）的 JSON 数据发送到 UI 端。然而，在 UI 中接收这些数字并将其记录到控制台后，我发现它们会自动转换为整数（10 和 20），而不是保留其原始的浮点格式。奇怪的是，带有小数部分的数字（例如 20.1）保持不变为 20.1。

重现步骤：

后端发送带有浮点数（10.0，20.0）的JSON数据。 UI端接收JSON数据并将其记录到控制台。 浮点数 (10.0, 20.0) 将记录为整数 (10, 20)。 带有小数部分的数字（例如 20.1）保持不变（20.1）。 预期行为：

我希望 UI 接收到的所有浮点数字（10.0、20.0 等）都保持其原始浮点格式（10.0、20.0）。这种一致性对于 TypeScript/JavaScript 应用程序 UI 中的准确表示和计算至关重要。

目前的方法：

我尝试了各种方法，例如使用 toFixed 方法在序列化期间格式化浮点数。然而，这种方法导致了不期望的结果，其中数字表示为字符串（“10.0”）而不是数字（10.0）。

我的游乐场是什么样子

import Decimal from 'decimal.js';

Decimal.set({
  precision: 100,
});

Decimal.prototype.toJSON = function () {
  return this.toFixed(1);
};

function customReplacer(key, value) {
  if (value instanceof Decimal) {
    return value.toFixed(1);
  }
  return value;
}

const dict = { foo: new Decimal(10.0) };

const jsonString = JSON.stringify(dict, customReplacer);
console.log('Serialized JSON:', jsonString);

const parsedDict = JSON.parse(jsonString);
console.log('Parsed Object:', parsedDict);

这是我从 api 收到的堆栈跟踪，仅供参考

我点击网络作为响应，我看到了

"123": {
                "name": "222",
                "unit": "262688",
                "lower": 80.0,
                "upper": 100.0,
                "typeId": "321d",
                "limitMode": "LowHigh"
            },

但是控制台显示了我

 "123": {
                    name: "222",
                    unit: "262688",
                    lower: 80,
                    upper: 100,
                    typeId: "321d",
                    limitMode: "LowHigh"
                },

基本上，这是由于 javascript 如何处理 int 数字并将 10.0 转换为 json 中的 10 造成的。我想重写这个逻辑以始终保留小数

Answer 1

在 JavaScript 中，不存在

integer

和

float

这两种不同的类型。任何数字都是

number

类型，可能包含也可能不包含小数。数字的表示形式将删除小数点的尾部零。因此

1.010100

将记录为

1.01

，

5.00

将记录为

5

等（因为它是相同的数字）。 如果在 UI 中您想以 x 点的小数显示它，您可以将其转换为字符串，四舍五入到最接近的小数，并根据需要添加尾部零。 这可以通过内置函数来完成

x.toFixed(1)

示例：

const x = 5;
console.log(x) // 5
console.log(x.toFixed(1)) // 5.0
console.log(x.toFixed(3)) //5.000