Округление чисел в JavaScript

Округление чисел в JavaScript

От автора: довольно часто в JavaScript во время вычислений можно получить число не совсем в нужном нам диапазоне или числа, которые необходимо «почистить» перед дальнейшим использованием. Данные числа округляются в большую или меньшую степень, задаются в определенном диапазоне или «обрезаются» до нужного количества знаком после запятой – все зависит от того, что нужно вам.

Зачем округлять числа?

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

В большинстве случаев с практической точки зрения эта погрешность не будет иметь значения (ошибка одна на 2 квинтиллиона), но все же это немного разочаровывает. Немного странный результат также можно получить при работе с валютами, процентными значениями или единицами измерения размера файла. Чтобы избежать этой неточности, необходимо округлить число или ввести определенное количество знаков после запятой.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Округление имеет много примеров практического применения: к примеру, если пользователь передвигает ползунок элемента range, чтобы не работать с десятичными числами, нам было бы удобнее округлять полученное значение до ближайшего целого.

Округление десятичных чисел

Для урезания десятичных чисел можно использовать методы toFixed() и toPrecision. Оба метода принимают всего один аргумент, который соответственно задает количество «значащих цифр» (т.е. общее количество цифр в числе) или количество знаков после запятой:

Если в toFixed() не задан аргумент, то по умолчанию выставляется 0, т.е. без знаков после запятой, максимальное значение 20.

Если в toPrecision не задан аргумент, число не меняется.

Важное замечание

Оба метода toFixed() и toPrecision() возвращают округленное представление строки результата, а не число. Т.е. при «сложении» переменных rounded и randNum будет произведена конкатенация, а не сложение:

Если нужно привести результат к числу, воспользуйтесь parseFloat:

(обратите, что число 5 округлилось в большую сторону, за исключением редких случаев; более подробно чуть ниже.) Также методы toFixed() и toPrecision() бывают полезны, когда необходимо целому числу приписать десятичную часть. Это особенно удобно при работе с валютами:

Обратите внимание, что если в числе больше цифр, чем в аргументе toPrecision, то оно будет записано в научном виде (с мантиссой и порядком):

Как избегать ошибок при округлении десятичных чисел

В некоторых случаях toFixed и toPrecision округляют 5 не вверх, а вниз:

Результат выше должен быть 1.01, а не 1. Если для вас важна точность, я бы порекомендовал вам решение от Jack L Moore, который в вычислениях использует экспоненциальные числа:

И результат:

На MDN есть еще более надежное решение.

Усечение десятичных чисел

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

Если хотите добавить немного гибкости, можно воспользоваться побитовым оператором ~~:

Результат:

В следующей статье я поподробнее расскажу про побитовые операции.

Округление в сторону ближайшего числа

Для округления десятичного число вверх или вниз до ближайшего целого используйте Math.round():

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Обратите внимание, что «половинные значения» типа .5 округляются вверх.

Округление вниз до ближайшего целого числа

Если вам необходимо округлить число вниз, воспользуйтесь Math.floor:

Обратите внимание, что в данном случае округляются вниз все числа, даже отрицательные. Представьте себе небоскреб с бесконечным количеством этажей вверх и вниз (нижние этажи это отрицательные числа). Если вы в лифте находитесь между минус вторым и минус третьим этажами (значение -2.5), метод Math.floor доставит вам на -3 этаж:

Если вы не хотите, чтобы отрицательные числа тоже округлялись в меньшую сторону, воспользуйтесь Math.trunc. Данный метод поддерживается во всех современных браузерах )кроме IE/Edge):

На MDN также есть трехстрочный полифил, который добавляют Math.trunc поддержку старых браузеров и IE/Edge.

Округление вверх до ближайшего целого числа

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

Округление вверх и вниз до ближайшего кратного числа

Если необходимо округлить число до ближайшего кратного пяти, легче всего создать функцию, которая разделит число на 5, округлит его и умножит обратно:

Результат:

Если необходимо округлять числа под разные кратные, можно изменить функцию и передавать в нее как аргументы оба значения, число и кратность:

Чтобы вызвать функцию, необходимо указать два параметра, само число и кратность:

Чтобы округлять вниз или вверх ставьте в функции ceil или floor.

Установка диапазона для числа

Бывает множество случаев, когда мы получаем число Х, и нам необходимо загнать его в определенный диапазон. К примеру, нам нужно число от 1 до 100, а получили мы 123. Тут нам пригодятся методы min (всегда возвращает наименьшее из набора чисел) и max (наибольшее число из набора). Пример с диапазоном от 1 до 100:

Это можно превратить в функцию или расширение класса Number, вариант с расширением впервые предложил Daniel X. Moore:

Результат:

Округление по Гауссу

Округление по Гауссу, которое также называют округлением для «банкиров», конвергентным округлением, голландским округлением и нечетным-четным округлением, это метод округления без статистического смещения; в обычном округлении числа автоматически завышаются. В округлении по Гауссу число приводится к ближайшему четному. Лучшее известное мне решение у Tim Down:

Результат:

Десятичные числа в CSS

JavaScript часто используют для вычисления позиции или значения трансформации HTML элементов. У вас может возникнуть вопрос, а что будет, если задать десятичное значение элементу:

Плюс для нас в том, что современные браузеры понимают десятичные значения, присвоенные к блоковым элементам, в том числе проценты и пиксели.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree