打字稿中的数字精度

Question

我正在做一个带有角度的网站，我试图将两个数字相加并在 a 中显示它们< div >，但我不知道如何管理精度。

例如，使用以下代码：

网页：

<div>{{sum}}</div>

打字稿：

sum = 9.9 + 1.3

11.200000000000001当我想展示时，网站展示了价值11.2

我已经看到管理浮动操作的方法是使用toFixed(1)，然后我得到了期望11.2。但是，如果我使用, 来执行我想要获取的toFixed(1)操作10.0 + 1.011.011

所以我想要的是当有小数时有一位小数的数字，当没有小数时没有小数的数字

Answer 1

为了达到预期的结果，使用下面的三元与模运算符（％）来得到除以值1（11.2 % 1 = 0.2和11.0%1 = 0）后的余数

<div>{{sum %1?sum.toFixed(1): sum}}</div>

示例工作代码供参考 - https://stackblitz.com/edit/angular-ozgii4?file=src/app/app.component.html

选项2：

如果您希望添加正数，则使用Math.abswith toFixed(1)，对于负值，您将通过这种方法获得正值

<div>{{Math.abs(sum.toFixed(1))}}</div>

示例工作代码供参考 - https://stackblitz.com/edit/angular-4tsk9g?file=src/app/app.component.ts

Answer 2

您所看到的是 Javascript 中如何处理浮点数。处理这个问题的通常方法是：

1.toFixed当你想右补零时：

(9.9 + 1.3).toFixed(2);

2.toPrecision不需要pad右侧时：

(9.9 + 1.3).toPrecision(2);

如果在 Angular Typescript 文件中定义变量，则可以使用其中之一。

3. 但是，您可能还想使用内置小数点直接在 HTML 模板中设置数字格式：

{{ (9.9 + 1.3)  | number : '1.1' }}

十进制管道有很多选项，请查看文档以获取更多信息。