Точность числа в машинописи

Question

Я делаю веб-сайт с угловым значением и пытаюсь сложить два числа и показать их в < div >, но я не знаю, как управлять точностью.

Например, со следующим кодом:

htlm:

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

машинопись:

sum = 9.9 + 1.3

На веб-сайте отображается значение 11.200000000000001, когда я хотел бы показать 11.2

Я видел, что для управления операциями с плавающей запятой используется toFixed(1), а затем я получаюexpecte 11.2.Однако, если я использую toFixed(1), для операции 10.0 + 1.0 я получаю 11.0, когда мне хотелось бы получить 11

Так что я хотел бы иметь число с одним десятичным знаком, когда естьявляются десятичными знаками и без десятичных знаков, если нет десятичных знаков

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

Option2:

Используйте Math.abs с 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 когда вам не нужно заполнять вправо:

(9.9 + 1.3).toPrecision(2);

Вы можете использовать любой из них, если определите свою переменную в файле Angular Typescript.

3.Однако вы также можете отформатировать число непосредственно в шаблоне HTML со встроенным десятичным каналом:

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

Десятичный канал имеет довольно много опций, для получения дополнительной информации проверьте документы..