Простые правила округления в javascript. Изучаем методы и применяем на практике
Здравствуйте, любители JavaScript-а. Вы уже заметили, что этот язык очень неординарен и в каждом разделе выделяется своими особенностями и необычными техническими решениями. Поэтому сегодняшняя публикация посвящается теме: «JavaScript округление».
После прочтения текущей статьи вы узнаете, для чего необходимо округлять числа, какие методы и свойства в js выполняют эту функцию, а также чем выделяется деление на 0. Не изменяя своим принципам, я прикреплю примеры к ключевым моментам материала и подробно распишу каждое действие. А теперь давайте приступать к обучению!
Важные заметки о числахДля начала запомните, что в js все виды чисел (дробные и целые) относятся к типу Number . К тому же все они 64-битные, так как хранятся в формате «double precision», который также известен под стандартом IEEE-754.
Создаются численные переменные привычным способом:
var numb = 35; // натуральное число
var drob = 0.93; //десятичное представление
var numb16 = 0xFF; //16-ричная система счисления
Поддерживает и другие числовые представления. Так, еще можно создавать числа с плавающей точкой (их еще иногда называют «числа в научном формате»).
В появилась поддержка очень интересного метода toLocaleString () , который форматирует все числовые параметры по спецификациям, прописанным в ECMA 402. Благодаря этому большие числа, телефонные номера, валюты и даже проценты красиво выводятся в диалоговом окне.
var num = 714000.80;
alert (num.toLocaleString ());
Для работы с элементами типа Number был предусмотрен целый глобальный объект с кучей всевозможных математических функций, имя которого Math .
Помимо этого, существуют и другие методы, которые выполняют округление числовых значений до целых чисел, до десятых, сотых и т.д. Рассмотрим их все подробнее.
Великий и могучий MathГлобальный объект Math включает в себя огромное количество разнообразных математических и тригонометрических функций. Это очень нужный объект и часто выручает разработчиков при работе с цифровыми данными.
На других платформах существуют аналогии Math. Например, в таких популярных языках, как Java и C#, Math представляет собой класс, который поддерживает все те же стандартные функции. Так что как видите этот инструмент действительно великий и могучий.
Теперь я хочу пройтись по конкретным методам, отвечающим за округление, и подробно о них рассказать.
Math.floor ()Начну с Math. floor . Обратите внимание на наименование метода. Логически становится понятно, что раз речь идет об округлении, а дословный перевод слова «floor» означает «пол», то данный инструмент округлит обрабатываемые значения в меньшую строну.
Также возможен вариант, когда обработанное число с помощью этой функции осталось прежним. Все потому, что округление осуществляется по нестрогому неравенству (=).
alert (Math.ceil (4.5));
Как вы уже догадались, в ответе будет число 5.
Math.round ()Данный метод округляет дробное число до ближайшего целого. Так, если дробная часть находится в диапазоне от 0 и до 0.5 не включительно, то округление происходит к меньшему значению. А если дробная часть находится в диапазоне от включительно 0.5 и до следующего целого числа, то она округляется к большему целому.
alert (Math.round (4.5));
Надеюсь, все подумали или сказали правильный ответ – 5.
Еще немного методовВ JavaScript также есть и другие 2 метода, которые занимаются округлением числовых представлений. Однако они несколько отличаются.
Речь пойдет о таких инструментах, как toFixed () и toPrecision () . Они отвечают не просто за округление, а за ее точность до определенных знаков. Давайте покопаем глубже.
toFixed ()С помощью данного механизма можно указывать, до скольких знаков после запятой нужно округлить значение. Метод возвращает результат в виде строки. Ниже я прикрепил вариант с тремя разными вариантами. Проанализируйте полученные ответы.
var num = 5656.9393;
document.writeln (num.toFixed ()); // 5657
document.writeln (num.toFixed (2)); // 5656.94
document.writeln (num.toFixed (7)); // 5656.9393000
Как видно, если не указать аргумента, то toFixed ()) округлит дробное значение до целого числа. В третьей строке выполнено округление до 2-знаков, а в четвертой – из-за параметра «7» было дописано еще три 0.
toPrecision ()Данный метод действует несколько иначе. На месте аргумента можно оставить как пустое место, так и установить параметр. Однако последний будет округлять числа до указанного количества цифр, не обращая внимания на запятую. Вот какие результаты выдала программа, переписанная с прошлого примера:
var num = 5656.9393;
document.writeln (num.toPrecision ()); // 5656.9393
document.writeln (num.toPrecision (2)); // 5.7e+3
document.writeln (num.toPrecision (7)); // 5656.939
Особенность деления на 0 в js
Как известно из уроков по математике, делить на нуль нельзя. Это правило взяли за основу большинство создателей языков программирования. Поэтому при делении на нуль все программы выдают ошибку.
Однако JavaScript отличился и здесь. Так, во время выполнения такой операции никаких сообщений о баге не возникает…потому что такая операция возвращает «Infinity» !
Почему же так? Как известно из тех же математических наук, чем меньше делитель, тем в результате получается большее число. Именно поэтому создатели данного прототипно-ориентированного языка решили отказаться от шаблонов и пойти своим путем.
Для тех, кто впервые сталкивается со значением Infinity, ниже я объяснил его особенности.
Infinity – означает бесконечность и полностью соответствует математическому знаку ∞.
Может быть отрицательной. Также сохраняются все стандартные правила работы с арифметическими операторами.
alert (12/ 0); // Infinity
alert (12.34/ 0); // Infinity
alert (-3/ 0); // -Infinity
На этом, пожалуй, и закончу. Если вам понравилась публикация, то обязательно подписывайтесь на мой блог. Не жадничайте ссылкой на интересные статьи и делитесь ими с друзьями. Пока-пока!
The Math.round() function returns the value of a number rounded to the nearest integer.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax Math.round(x) Parameters x A number. Return valueThe value of the given number rounded to the nearest integer.
DescriptionIf the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞. Note that this differs from many languages" round() functions, which often round this case to the next integer away from zero , instead giving a different result in the case of negative numbers with a fractional part of exactly 0.5.
Because round() is a static method of Math , you always use it as Math.round() , rather than as a method of a Math object you created (Math has no constructor).
Examples Math.round(20.49); // 20 Math.round(20.5); // 21 Math.round(42); // 42 Math.round(-20.5); // -20 Math.round(-20.51); // -21 Demonstrative ImplementationBelow is a snippet of code that is functionally equivelent to math.round except that the snippet of code below is slower than Math.round. The purpose of the snippet of code below is to demonstrate how Math.round works.
Function vanilla_round(x) { var y = Math.abs(x) + 0.5; // so that less than 1/2 rounds down; greater rounds up return Math.floor(x+0.5) }
The modulus operator above gets the decimal part of x. Further, the above code snippet could be modified to round to a certain precision on a number:
Function round_to_precision(x, precision) { var y = +x + (precision === undefined ? 0.5: precision/2); return y - (y % (precision === undefined ? 1: +precision)); }
Round_to_precision(11, 2); // outputs 12 round_to_precision(11, 3); // outputs 12 round_to_precision(11, 4); // outputs 12 round_to_precision(11, 5); // outputs 10 round_to_precision(11, 6); // outputs 12 round_to_precision(11, 7); // outputs 14 round_to_precision(11, 8); // outputs 8 round_to_precision(3.7, 0.5); // outputs 3.5 round_to_precision(3.75, 0.5); // outputs 4 round_to_precision(3.8, 0.5); // outputs 4
Specifications| ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. Implemented in JavaScript 1.0. |
| ECMAScript 5.1 (ECMA-262) |
Standard | |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Math.round" in that specification. |
Standard | |
| ECMAScript Latest Draft (ECMA-262) The definition of "Math.round" in that specification. |
Draft |
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile Server | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js | ||||||||||||
| Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Теперь рассмотрим метод floor (в переводе - пол) , который работает противоположно методу ceil , т.е. он округляет дробное число в МЕНЬШУЮ сторону .
var age = 35.97 ;
age = Math .floor (age) ; /* Округляем значение переменной age в меньшую сторону */
document.write (age );
Как видите, метод floor округлил число 35.97 до 35 , то есть в меньшую сторону. Несмотря на то, что 0.97 больше 0.5 (см. ) .
В этом уроке были рассмотрены методы объекта Math , позволяющими округлять дробные десятичные числа .
Теперь нужно выполнить домашнее задание.
Ваша задача написать функцию, которая принимает два параметра.
1. Массив, состоящий из чисел с дробями.
2. Метод округления "round"
, "ceil"
или "floor"
.
На выходе функция должна выводить этот же массив, но при этом все элементы массива, должны быть округлены с помощью указанного во втором параметре метода объекта Math .
Исходный массив:
var numberArray = ;
Сначала решение этого задания может казаться практически идентичным с решениями домашних задач из первых трёх уроков этой темы . Но не все так просто...
Решение №1 - Внимание
По условию задачи функция должна принимать два параметра - исходный массив и один из методов: "round" , "ceil" или "floor" . Исходя из этого, я пробовал сделать так ...
function
decimal
(anyArray
,method
) /* Создаем функцию с двумя параметрами */
{
for (i = 0 ; i < anyArray .length ; i ++ )
{
document.write
(anyArray
"
)
anyArray = Math .method (anyArray ); /* При помощи одного из методов объекта Math округляем текущий элемент массива */
document.write (anyArray + "
"
)
}
decimal (numberArray, round ) /* Вызываем функцию и указываем для нее два параметра. Но НЕЛЬЗЯ указывать ИМЯ метода в качестве параметра функции */
В этом решении создаем функцию с двумя параметрами, а когда ее вызываем, то в качестве параметров
функции пробуем указать исходный массив и ИМЯ одного методов:
decimal
(numberArray,
round
) - в данном случае round
.
Но результата мы не получим, так как НЕЛЬЗЯ указывать ИМЯ метода в качестве параметра функции .
Обратите внимание: ведь не случайно в условии задачи имена методов "round" , "ceil" и "floor" заключены в кавычки .
decimal (numberArray, "round" ) - но такая запись тоже не будет верной!!!
Решение №2 - Корректируем предыдущее решение
Можно решить задачу, указав для функции один параметр.
var numberArray = ;
function
decimal
(anyArray
) /* Создаем функцию с одним параметром */
{
for (i = 0 ; i < anyArray .length ; i ++ ) /* Перебираем элементы массива */
{
document.write
(anyArray
+ " - исходный элемент массива
"
) /* Выводим текущий элемент массива */
/* При помощи метода round объекта Math округляем текущий элемент массива */
document.write (anyArray + " - Округленный элемент
"
) /* Выводим ОКРУГЛЕННЫЙ элемент массива */
}
decimal (numberArray ) /* Вызываем функцию и указываем один параметр - исходный массив */
35 - Округленный элемент
13 - Округленный элемент
17 - Округленный элемент
79 - Округленный элемент
Здесь удалось достичь нужного результата: метод round округлил все числа по . Но не выполнено условие , так как функция принимает лишь один параметр.
Решение №3 - Функция с двумя параметрами
Здесь задача решена правильно. Для этого нужно было вспомнить тему условий в javascript и применить несколько условий одновременно.
var numberArray = ;
function
decimal
(anyArray
,method
)
{
for (i
=
0
; i
<
anyArray
.length
; i
++
)
{
document.write
(anyArray
+ " - исходный элемент массива
"
);
if (method
{
anyArray
= Math
.round
(anyArray
);
document.write
(anyArray
+ " - стандартное округление
"
)
}
Else if(method
{
document.write
(anyArray
+ " - округляем в БОЛЬШУЮ сторону
"
)
}
else if(method
{
document.write
(anyArray
+ " - округляем в МЕНЬШУЮ сторону
"
)
}
}
}
decimal
(numberArray,
"ceil"
)/* Вторым параметром функции - в кавычках указываем имя одного из методов */
34.82 - исходный элемент массива
35 - округляем в БОЛЬШУЮ сторону
12.9 - исходный элемент массива
13 - округляем в БОЛЬШУЮ сторону
17.01 - исходный элемент массива
18 - округляем в БОЛЬШУЮ сторону
78.51 - исходный элемент массива
79 - округляем в БОЛЬШУЮ сторону
Это правильное решение Домашнего задания. Здесь для функции указаны два параметра согласно условию.
Попробуйте в последней строке этого решения:
decimal
(numberArray,
"ceil"
) в качестве второго параметра функции указать имена других методов "round"
и "floor"
объекта Math
.
Решение №4 - Функция с двумя параметрами + метод prompt
Я решил немного оптимизировать предыдущее решение и добавил метод prompt , который вызывает модальное окно, содержащее поле для ввода информации.
Теперь благодаря этому можно будет ввести название одного из методов round , floor или ceil в поле для ввода и получить соответствующий результат.
var numberArray = ;
function
decimal
(anyArray
,method
)
{
for (i
=
0
; i
<
anyArray
.length
; i
++
)
{
document.write
(anyArray
+ " - исходный элемент массива
"
);
if (method
== "round"
) /* 1-е условие */
{
anyArray
= Math
.round
(anyArray
);
document.write
(anyArray
+ "
"
)
}
Else if(method
== "ceil"
) /* 2-е условие */
{
anyArray
= Math
.ceil
(anyArray
);
document.write
(anyArray
+ "
"
)
}
else if(method
== "floor"
) /* 3-е условие */
{
anyArray
= Math
.floor
(anyArray
);
document.write
(anyArray
+ "
"
)
}
/* Добавляем метод prompt */
var method = prompt ("Введите один из методов: round, ceil или floor" );
if (method
== "floor"
) /* 1-е условие */
{
document.write
("Вы ввели метод " +
method
+ " , который округляет числа в МЕНЬШУЮ сторону
"
)
}
else if (method
== "round"
) /* 2-е условие */
{
document.write
("Вы ввели метод " +
method
+ " , который округляет числа по стандартным правилам
"
)
}
else if (method
== "ceil"
) /* 3-е условие */
{
document.write
("Вы ввели метод " +
method
+ " , который округляет числа в БОЛЬШУЮ сторону
"
)
}
else /* Иначе... */
{
document.write
("Вы не ввели или ошибочно ввели метод
"
)
}
decimal (numberArray, method ) /* Вызываем функцию */
Вот так работают методы round , floor или ceil объекта Math , которые округляют дробные числа.
Часто вычисления дают результаты, которые не соответствуют пределам нужных диапазонов. В результате нужно осуществлять JavaScript округление до определенного значения.
Для чего округлять числа?JavaScript не хранит целые числа, поскольку их значения представлены в виде цифр с плавающей точкой. Многие дроби не могут быть представлены числом с определенным конечным количеством знаков после запятой, поэтому JavaScript может генерировать результаты, наподобие приведенного ниже:
0.1 * 0.2; > 0.020000000000000004
На практике это не будет иметь никакого значения, поскольку речь идет о погрешности в 2 квинтилионные. Но это может отразиться на результате при работе с числами, которые представляют значения валют, процентов или размер файла. Поэтому нужно сделать или до определенного знака после запятой.
Округление десятичных чиселЧтобы «обрезать » десятичное число, используются методы toFixed() или toPrecision() . Они оба принимают один аргумент, который определяет количество значимых и знаков после запятой, которые должны быть включены в результат:
- если для toFixed() аргумент не определен, значение по умолчанию равно 0 , то есть без знаков после запятой; максимальное значение аргумента равно 20 ;
- если для toPrecision() аргумент не задан, число не изменяется.
var randNum = 6.25; randNum.toFixed(); > "6" Math.PI.toPrecision(1); > "3" var randNum = 87.335; randNum.toFixed(2); > "87.33" var randNum = 87.337; randNum.toPrecision(3); > "87.3"
Примечание
И toFixed() , и toPrecision возвращают округленное строчное представление результата, а не число. Это означает, что прибавление rounded к randNum в результате даст конкатенацию строк, а не одно число:
console.log(randNum + rounded); > "6.256"
Если нужно получить в результате JavaScript округления до сотых число, используйте parseFloat() :
var randNum = 6.25; var rounded = parseFloat(randNum.toFixed(1)); console.log(rounded); > 6.3
toFixed() и toPrecision() также являются полезными методами для усечения большого количества знаков после запятой. Это удобно при работе с числами, представляющими денежные единицы:
var wholeNum = 1 var dollarsCents = wholeNum.toFixed(2); console.log(dollarsCents); > "1.00"
Обратите внимание, что если в числе больше знаков, чем задано параметром точности, toPrecision будет выдавать результат в научном формате:
var num = 123.435 num.toPrecision(2); > "1.2e+2"
Как избежать ошибок при округлении десятичных дробейВ некоторых случаях toFixed и toPrecision осуществляют JavaScript округление 5 в меньшую сторону , а не до большего:
var numTest = 1.005; numTest.toFixed(2); > 1;
Результатом приведенного выше примера должно быть 1.01, а не 1. Если нужно избежать этой ошибки, я рекомендую использовать экспоненциальные числа:
function round(value, decimals) { return Number(Math.round(value+"e"+decimals)+"e-"+decimals); }
Применение:
round(1.005,2); > 1.01
Если нужно еще более надежное решение, чем округление, оно доступно на MDN .
Округление с помощью эпсилонаАльтернативный метод JavaScript округления до десятых был введен в ES6 (также известном, как JavaScript 2015 ). «Машинный эпсилон » обеспечивает разумный предел погрешности при сравнении двух чисел с плавающей запятой. Без округления, сравнения могут дать результаты, подобные следующим:
0.1 + 0.2 === 0.3 > false
Math.EPSILON может быть использован в функции для получения корректного сравнения:
function epsEqu(x, y) { return Math.abs(x - y) < Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
Функция принимает два аргумента : один содержит вычисления, второй ожидаемый (округленный ) результат. Она возвращает сравнение этих двух параметров:
epsEqu(0.1 + 0.2, 0.3) > true
Все современные браузеры поддерживают математические функции ES6 . Но если необходимо обеспечить поддержку в старых браузерах, то нужно использовать полифиллы .
Усечение десятичных чиселВсе методы, представленные ранее, выполняют JavaScript округление до десятых . Чтобы усечь положительное число до двух знаков после запятой, умножить его на 100 , усечь снова, а затем полученный результат разделить на 100 , нужно:
function truncated(num) { return Math.trunc(num * 100) / 100; } truncated(3.1416) > 3.14
Если требуется что-то более гибкое, можно воспользоваться побитовым оператором:
function truncated(num, decimalPlaces) { var numPowerConverter = Math.pow(10, decimalPlaces); return ~~(num * numPowerConverter)/numPowerConverter; }
Использование:
var randInt = 35.874993; truncated(randInt,3); > 35.874
Округление до ближайшего числаЧтобы осуществить JavaScript округление до целого , используется Math.round() :
Math.round(4.3) > 4 Math.round(4.5) > 5
Обратите внимание, что «половинные значения «, такие как .5 , округляются вверх.
Округление вниз до ближайшего целого числаЕсли вы хотите округлять в меньшую сторону, используйте метод Math.floor() :
Math.floor(42.23); > 42 Math.floor(36.93); > 36
Округление «вниз » имеет одно направление для всех чисел, в том числе и для отрицательных. Это можно представить, как небоскреб с бесконечным количеством этажей, в том числе и ниже уровня фундамента (представляющих отрицательные числа ). Если вы находитесь в лифте между подвальными этажами 2 и 3 (что соответствует значению -2.5 ), Math.floor доставит вас на этаж -3 :
Math.floor(-2.5); > -3
Если нужно избежать этого, используйте JavaScript Math округление с помощью Math.trunc() , поддерживаемый во всех современных браузерах (кроме IE / Edge ):
Math.trunc(-41.43); > -41
MDN также предоставляет полифилл из трех строк для обеспечения поддержки Math.trunc в старых браузерах и IE / Edge .
Округление вверх до ближайшего целого числаЕсли вы хотите округлить десятичные числа вверх, используйте Math.ceil . Действие этого метода также можно представить, как бесконечный лифт: Math.ceil всегда везет вас «вверх «, независимо от того, является ли число отрицательным или положительным:
Math.ceil(42.23); > 43 Math.ceil(36.93); > 37 Math.ceil(-36.93); -36
Округление до ближайшего кратного числаЕсли нужно округлить значение до ближайшего числа, кратного 5 , создайте функцию, которая делит число на 5 , округляет его, а затем умножает результат на то же значение:
function roundTo5(num) { return Math.round(num/5)*5; }
Использование:
roundTo5(11); > 10
Если нужно выполнить JavaScript округление до двух знаков, можно передавать функции, как начальное число, так и кратность:
function roundToMultiple(num, multiple) { return Math.round(num/multiple)*multiple; }
Чтобы использовать функцию, включите в ее вызов округляемое число и кратность:
var initialNumber = 11; var multiple = 10; roundToMultiple(initialNumber, multiple); > 10;
Чтобы округлять значения только в большую или меньшую сторону замените в функции round на ceil или floor .
Привязка к диапазонуИногда нужно получить значение х , которое должно находиться в пределах определенного диапазона. Например, нужно значение от 1 до 100 , но мы получаем значение 123 . Чтобы исправить это, можно использовать min() (возвращает наименьшее из чисел ) и max (возвращает максимально допустимое число ).
Использование:
var lowBound = 1; var highBound = 100; var numInput = 123; var clamped = Math.max(lowBound, Math.min(numInput, highBound)); console.log(clamped); > 100;
Можно создать функцию или расширение класса Number .
Часто результатом расчётов бывает число с большим количеством знаков после запятой. Если это число будет использовано для дальнейших расчётов, то его можно оставить в таком виде. Но иногда требуется округление числа, например для вывода на страницу. В JavaScript округление чисел осуществляется несколькими методами.
Метод Math.round() округляет значение до целого числа.
Math.round (число)
Округление числа производится по математическим правилам. То есть, если после запятой идёт цифра от 0 до 4, то дробная часть просто отбрасывается. А если после запятой идёт цифра от 5 до 9, то дробрая часть отбрасывается, а к целой части прибавляется единица. пример:
JavaScript:
Есть ещё два метода, которые округляют число до целого значения. Метод Math.floor() округляет в меньшую сторону. Он отбрасывает дробную часть числа. А метод Math.ceil() округляет в большую сторону. Он отбрасывает дробную часть, а к целой части прибавляет единицу. Пример:
Конечно, 5 - (-2) это 5+2. Не завбывайте, что число 5 Вы в этой формуле не получите. Максимальное будет 4.999999999. Полученные значения можно округлить до нужной точности.
Если нужны только целые числа, то полученные значения можно округлять до целого в меньшую сторону. К максимуму нужно прибавить единицу, чтобы этот максимум тоже был возможен. Формула получается такая:
целое число = Math.floor (минимум + Math.random() * (максимум + 1 - минимум)
Выведем числа от 10 до 15:
