Скидки до 20% + 2-ая профессия бесплатно и подарки на 50 000₽

Главная | Все статьи | Дневник студента

Десятичные дроби и приведение их к адекватному виду в JS

Время чтения статьи ~2 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Десятичные дроби и приведение их к адекватному виду в JS главное изображение

Небольшая зарисовка по поводу того, почему при сложении чисел 0.1 и 0.2 получается 0.30000000000000004 и что с этим можно сделать.

Делал для себя маленький скрипт, суть которого (кратко) заключается в том, что если ввести в поле ввода какое-либо число и щёлкнуть по кнопке, находящейся вместе с данным полем в одной форме, то в отдельном блоке чуть ниже form выводится сумма введенного в поле ввода числа и того числа, которое уже было в нижележащем блоке (назовём его div-output).

И тут в ходе работы обнаружилась одна неприятная особенность — если числа целые, то проблем не было, но если вводились дроби (наподобие 12.38), то спустя пару кликов (операций) в div-output начались выводиться значения в откровенно неудобном формате. Например, складываешь 45.57 и 34.91, а на выходе получаешь не ровные 80.48, а «абра-кадабру» в виде 80.47999999999999.

Причины такого поведения раскрываются в общеизвестном учебнике по JavaScript в разделе Числа, но нас больше интересует то, как это безобразие устранить и получить число в виде 80.48. Одним из вариантов является использование метода toFixed(), о чем кратко и без «воды» можно прочитать здесь «Как округлить число до 2 знаков js», главное помнить, что этот метод возвращает строку. И в качестве второго варианта можно использовать функцию, которую нашёл в интернете на одном из форумов (думаю, что автор не будет против презентации этой функции «широкой общественности», так сказать):

function toFixed(num, size) {
    return Math.round(num * Math.pow(10, size))/Math.pow(10, size);
}

Допустим, надо получить число с четырьмя знаками после запятой, соответственно:

const uncomfortableNum = 5.12678906590125600678199;

console.log(toFixed(uncomfortableNum, 4)); // 5.1268

Поэтому, при необходимости, можно заменить метод Math.round() на Math.floor() или Math.ceil(). В общем, как-то так.

Получите профессию «Фронтенд-разработчик» за 10 месяцев! Погружение в практику с первого дня и обучение без дедлайнов. Вы получите готовое портфолио на GitHub к концу обучения, поддержку наставников на протяжении всего курса и помощь в трудоустройстве.

Стать фронтенд-разработчиком

Аватар пользователя Валерий Воронков
Валерий Воронков 16 декабря 2022
2
Похожие статьи
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на Python, Разработка веб-приложений и сервисов используя Django, проектирование и реализация REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
Тестирование веб-приложений, чек-листы и тест-кейсы, этапы тестирования, DevTools, Postman, SQL, Git, HTTP/HTTPS, API
4 месяца
с нуля
Старт 26 декабря
профессия
Программирование на Java, Разработка веб-приложений и микросервисов используя Spring Boot, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
новый
Google таблицы, SQL, Python, Superset, Tableau, Pandas, визуализация данных, Anaconda, Jupyter Notebook, A/B-тесты, ROI
9 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на PHP, Разработка веб-приложений и сервисов используя Laravel, проектирование и реализация REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на Ruby, Разработка веб-приложений и сервисов используя Rails, проектирование и реализация REST API
5 месяцев
c опытом
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
новый
Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL
8 месяцев
c опытом
Старт 26 декабря