Форматирование чисел с 2 знаками после запятой в JS

Быстрый ответ

Если вам необходимо представить число с плавающей точкой в JavaScript с двумя знаками после запятой, можно использовать метод toFixed(2). Этот метод преобразует число в строку и округляет его до двух десятичных знаков:

const number = 123.456;
const formatted = number.toFixed(2);  // "123.46"

Для преобразования обратно в числовой формат можно использовать функцию parseFloat:

const numericFormatted = parseFloat(formatted);  // 123.46

Чтобы избежать появления лишних нулей, можно применить унарный оператор +:

const cleanNumber = +formatted;  // 123.46

Альтернативный способ округления чисел — умножение и деление:

const roundedNumber = Math.round(number * 100) / 100;  // 123.46

Краткий обзор особенностей и проблем

Универсальность toFixed(2)

Метод toFixed(2) подходит для большинства задач, включая обработку денежных сумм, но важно помнить, что результат его применения — это строка, а не число.

Подробнее об этом расскажет наш спикер на видео

Борьба с лишними нулями

Если необходимо убрать десятичные нули в целых числах, можно использовать toFixed(2) вместе с условием:

const formatIfFloat = (num) => num % 1 ? num.toFixed(2) : String(num);

Беззаботность старого IE

При поддержке старых версий Internet Explorer будьте готовы к проблемам с работой toFixed(). Для надежности результаты следует тщательно протестировать.

Капризы toPrecision(2)

Метод toPrecision(2) может округлять числа непредсказуемым образом, что нежелательно, если нужно минимизировать количество знаков после запятой.

Варианты форматирования за пределами toFixed()

Для более сложного форматирования можно использовать пользовательские функции или такие библиотеки, как Numeral.js или accounting.js.

Визуализация

Рассмотрим пример использования JavaScript для отображения суммы на кассовом аппарате в формате доллары и центы:

let displayedTotal = total.toFixed(2);

После такого преобразования:

Было: $26.7
Стало: $26.70

Теперь форматирование валютной суммы становится значительно легче.

Заметка для тех, кто работает с финансами

При обработке денежных сумм важно учитывать не только корректное отображение суммы, но и точность вычислений, принимая во внимание особенности операций с числами с плавающей точкой:

const price = 9.99;
const quantity = 3;
let total = +(price * quantity).toFixed(2);

Добавление в код «местного колорита»

Для форматирования числа в соответствии с местными стандартами применяйте toLocaleString():

const localized = number.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

Ускорение вашего кода

В системах с высокой производительностью прямое математическое округление может быть более эффективным. Однако не забывайте профилировать код, чтобы убедиться в его оптимальности.

Полезные материалы

1. Number.prototype.toLocaleString() – JavaScript | MDN — как задать числу местный формат.
2. Number.prototype.toFixed() – JavaScript | MDN — подробное описание метода toFixed.
3. Методы работы с числами в JavaScript — обзор методов работы с числами.
4. Спецификация языка ECMAScript® 2019 — описание метода toFixed в спецификации ECMAScript.
5. Как всегда отображать число с 2 десятичными знаками – Stack Overflow — обсуждение форматирования чисел с десятичными знаками.
6. Как округлить число до двух десятичных знаков, если необходимо – Stack Overflow — еще однозначное обсуждение округления десятичных чисел.
7. Руководство по стилю JavaScript от Airbnb — рекомендации по приведению типов и форматированию чисел.