Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>22 авг 2025</li>

3 <li>0</li>

4 </ul>Подробно о методах округления в JavaScript: в меньшую и большую сторону, до целого, до сотых.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

7 Округление чисел - одна из базовых операций в программировании. Казалось бы, округлить число несложно. Но на практике возникает много вопросов: какой метод использовать, как работают отрицательные числа, как избежать ошибок при округлении до нужного знака после запятой.

8 Содержание

9 <ul><li><a>Особенности чисел в JavaScript</a></li>

10 <li><a>Что такое объект Math в JavaScript</a></li>

11 <li><a>Math.floor() - округление вниз</a></li>

12 <li><a>Math.ceil() - округление вверх</a></li>

13 <li><a>Math.round() - округление по правилам математики</a></li>

14 <li><a>Math.trunc() - отбрасывание дробной части</a></li>

15 <li><a>Аргументы какого типа можно использовать в функциях округления</a></li>

16 <li><a>Как округлить число до заданного количества знаков после запятой</a></li>

17 <li><a>Примеры задач, в которых используются методы округления</a></li>

18 <li><a>Типичные ошибки при округлении</a></li>

19 </ul>В JavaScript для округления используется объект Math, в частности его методы Math.floor, Math.ceil, Math.round и Math.trunc.

20 Кроме этих, объект Math содержит и другие полезные методы, которые часто используются вместе с округлением: Math.abs(x) возвращает модуль числа, Math.random() - случайное число от 0 до 1, Math.pow(x, y) возводит число x в степень y, Math.sqrt(x) возвращает квадратный корень из числа. О них и о других методах вы можете почитать в <a>документации</a>.

21 В этой статье мы разберём, как устроено округление в JavaScript, какие в нём есть тонкости и как применять эти знания на практике.

22 Но сначала немного поговорим о числах в JavaScript.

23 В JavaScript есть два типа чисел. Основной тип - это обычные целые и дробные числа. Они работают в диапазоне примерно от -9 квадриллионов до 9 квадриллионов (точнее - от -(2⁵³ - 1) до 2⁵³ - 1. Такие числа имеют тип number.

24 let a = 5; // Это number let b = 3.14; // Тоже number let c = -100; // И это numberJavaScript использует для хранения таких чисел стандарт, который называется "числа с плавающей точкой двойной точности". Основной смысл в том, что числа хранятся в двоичной системе. Всё в порядке, пока речь идёт о целых числах, но некоторые десятичные дроби невозможно точно записать в двоичном виде - как в десятичной системе невозможно точно записать 1/3 (она превращается в 0,333...).

25 Поэтому иногда при операциях возникают странности:

26 0.1 + 0.2 // Результат: 0.30000000000000004Это не ошибка в JavaScript - так работает хранение чисел в любом языке программирования, который использует этот формат. Чтобы избежать ошибок, приходится округлять результат:

27 Math.round((0.1 + 0.2) * 100) / 100 // 0.3Сначала умножаем сумму на 100, чтобы избавиться от запятой, потом округляем и делим обратно.

28 Второй тип чисел встречается очень редко - это очень большие или очень маленькие числа, выходящие за пределы диапазона обычных чисел (больше чем 2⁵³ - 1 или меньше чем -(2⁵³ - 1)). Этот формат называется BigInt. Такие числа не могут быть дробными, только целыми. Выглядит он вот так:

29 let big = 1234567890123456789012345678901234567890n;Обратите внимание: в конце числа стоит буква n. Так JavaScript понимает, что это число типа BigInt.

30 На практике BigInt нужен редко - в основном он применяется в криптографии. В этой статье мы на нём останавливаться не будем, а поговорим об округлении.

31 Math - это встроенный объект, который помогает работать с числами. Он умеет округлять числа, находить корень, получать случайные значения и многое другое.

32 В отличие от других объектов в JavaScript, нельзя использовать Math как функцию или создавать из него копии. Например, вы не можете написать new Math() - это вызовет ошибку.

33 С объектом Math можно работать только с помощью его свойств и методов - то есть уже готовых команд. Вот как это выглядит:

34 Math.round(1.7); // Округляет до ближайшего целого: 2 Math.random(); // Возвращает случайное число от 0 до 1, например 0.42 Math.PI; // Возвращает число π (пи): 3.141592653589793В этой статье мы говорим только об умении Math округлять числа.

35 Метод Math.floor() округляет число вниз - до ближайшего целого меньшего или равного значению. Он просто отбрасывает дробную часть и не прибавляет единицу, даже если число близко к следующему целому.

36 Math.floor(4.9); // 4 Math.floor(4.1); // 4Если число отрицательное, Math.floor() всё равно округляет вниз - то есть к меньшему числу:

37 Math.floor(-4.1); // -5 Math.floor(-4.9); // -5Этот метод используют при расчёте количества страниц или порций - когда дробные части недопустимы.

38 Допустим, у вас 23 комментария, и на одной странице помещается 5. Сколько полных страниц вы можете отобразить?

39 let comments = 23; let perPage = 5; let pages = Math.floor(comments / perPage); // 4Ответ - 4 страницы. На пятой осталось бы только 3 комментария, а метод Math.floor() вернёт именно количество полностью заполненных страниц.

40 Округляет аргумент в сторону увеличения до ближайшего целого:

41 Math.ceil(4.1); // 5 Math.ceil(-4.1); // -4Отрицательное число тоже округляется к большему значению - в сторону нуля.

42 У вас 103 записи, и вы хотите выводить по 20 на страницу. Сколько страниц нужно, чтобы вместить всё.

43 let totalItems = 103; let perPage = 20; let totalPages = Math.ceil(totalItems / perPage); // 6Для размещения 103 записей понадобится 6 страниц.

44 Метод Math.round() округляет число по привычным школьным правилам:

45 <ul><li>Если дробная часть меньше 0,5, округляется в меньшую сторону.</li>

46 <li>Если 0,5 и больше - округляется в большую сторону.</li>

47 </ul>Math.round(4.4); // 4 Math.round(4.5); // 5 Math.round(-4.5); // -4 Math.round(-4.6); // -5При положительных числах всё довольно ожидаемо. А при отрицательных Math.round() округляет в сторону нуля, если дробная часть равна 0,5.

48 Допустим, видео длится 95 секунд. Посчитаем, сколько это в минутах:

49 let seconds = 95; let minutes = Math.round(seconds / 60); // 2Результат - 2 минуты. Метод округлил 1,58 до ближайшего целого. Если бы видео длилось 89 секунд, получилась бы минута.

50 Метод Math.trunc() не округляет число, а просто убирает всё, что стоит после запятой. Он оставляет только целую часть - независимо от того, положительное число или отрицательное.

51 Math.trunc(4.9); // 4 Math.trunc(-4.9); // -4Пользователь мышкой рисует прямоугольник, координаты получаются дробными, но при отрисовке прямоугольника нужны целые числа.

52 let x = 99.999; let y = 200.47; ctx.fillRect(Math.trunc(x), Math.trunc(y), 10, 10); // Прямоугольник рисуется в точке (99, 200)Мы используем Math.trunc(), потому что в нашей программе координаты округляются только вниз.

53 Допустим, программа вычисляет скидку -12,95. Для журнала аудита нужно сохранить только целую часть - без копеек.

54 let discount = -12.95; let intPart = Math.trunc(discount); // -12Так мы избавляемся от дробной части без округления и сохраняем грубое значение.

55 Методы Math.round(), Math.floor(), Math.ceil() и Math.trunc() обычно работают с числами. Но JavaScript устроен гибко - если вы случайно (или специально) передаёте в них значение другого типа, движок попытается превратить его в число. Иногда это работает, иногда - нет. Если Math не сможет привести аргумент к числу, он возвращает NaN.

56 NaN (сокращение от Not-a-Number) - это специальное значение в JavaScript, которое означает "не число". Оно появляется, когда операция с числами не может дать корректный результат, например:

57 0 / 0 // NaN - деление ноля на ноль Math.sqrt(-1) // NaN - нельзя извлечь корень из отрицательного числа parseInt("abc") // NaN - строка не может быть преобразована в числоДавайте посмотрим, как ведут себя разные типы значений.

58 console.log(Math.ceil("abc")); // NaN console.log(Math.round("11.15")); // 11Если в строке текст, результат будет NaN. Строку с числом JavaScript сначала приводит к числу, а затем округляет.

59 console.log(Math.ceil(true)); // 1 console.log(Math.round(false)); // 0Булевы значения true и false преобразуются в числа 1 и 0 соответственно.

60 Значение null в JavaScript означает "пусто". Его можно задать вручную, если переменная пока ничего не хранит.

61 let value = null; console.log(Math.ceil(value)); // 0При округлении null логично превращается в 0.

62 Значение undefined означает, что переменная есть, но в ней ничего не лежит. Это значение присваивается автоматически, если вы что-то объявили, но не задали.

63 let value; console.log(Math.round(value)); // NaNЗдесь переменная value существует, но округлить её невозможно. Результат - NaN.

64 Если вы попытаетесь округлить NaN, результат снова будет NaN:

65 console.log(Math.ceil(NaN)); // NaNВ JavaScript даже массив можно округлить. Звучит странно, но иногда это работает.

66 Рассмотрим три примера:

67 console.log(Math.ceil([5.3])); // 6 console.log(Math.round([])); // 0 console.log(Math.ceil([1, 5])); // NaNМассив [5.3] сначала превращается в обычное число 5.3. После этого Math.ceil() округляет его вверх, получается 6.

68 Пустой массив [] превращается в 0. Поэтому результат округления - ноль.

69 В последнем массиве два значения: [1, 5]. JavaScript не может понять, какое число имелось в виду. Поэтому результат - NaN.

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

71 let inputValue = prompt("Введите число:"); Math.floor(Number(inputValue));Это поможет избежать непредсказуемого поведения. NaN опасен, потому что он распространяется по цепочке вычислений:

72 let x = NaN; let y = x + 5; // Тоже NaNМетоды Math напрямую не поддерживают округление до знаков после запятой. Чтобы округлить число, например, до 2 знаков, есть несколько способов, в том числе с использованием альтернативных методов.

73 Чтобы округлить число до n знаков после запятой:

74 <ul><li>умножим его на 10^n - чтобы сдвинуть запятую;</li>

75 <li>применим округление;</li>

76 <li>результат разделим обратно на 10^n.</li>

77 </ul>Например, округлим число 1,23789 до 2 знаков после запятой:

78 function roundTo(num, decimals) { const factor = 10 ** decimals; return Math.round(num * factor) / factor; } // Функция округляет число до n знаков после запятой roundTo(1.23789, 2); // 1.24 roundTo(1.234, 1); // 1.2Метод toFixed() округляет число до нужного количества знаков после запятой. Он работает по обычным правилам математики: если следующая цифра 5 и больше - округляем вверх. Но этот метод возвращает строку, а не число.

79 const num = 5.6789; const result = num.toFixed(2); console.log(result); // "5.68"Здесь число округлилось до двух знаков после запятой. Получилась строка "5.68".

80 Если указать 0 или вообще ничего не указывать, округление произойдёт до целого числа:

81 console.log(num.toFixed(0)); // "6" console.log(num.toFixed()); // "6"Строку можно преобразовать обратно в число с помощью parseFloat():

82 const number = parseFloat(result); console.log(number); // 5.68Методы Math.round, Math.floor, Math.ceil, Math.trunc часто применяются на практике.

83 Представьте, что у вас в корзине товар на сумму 349,999 рубля.На товар действует скидка 12,75 рубля, но магазин округляет скидку вниз до целого числа (чтобы не переплатить). После применения скидки финальная сумма должна быть округлена до ближайшего рубля.

84 Шаги:

85 <ul><li>Округлить скидку вниз (Math.floor).</li>

86 <li>Вычесть скидку из суммы.</li>

87 <li>Округлить финальную сумму до ближайшего целого (Math.round).</li>

88 </ul>// Исходная сумма товаров let total = 349.999; // Скидка, рассчитанная системой let discount = 12.75; // Округляем скидку вниз, чтобы не потерять деньги let discountApplied = Math.floor(discount); // 12 // Промежуточная сумма после скидки let subtotal = total - discountApplied; // 337.999 // Округляем итоговую сумму до ближайшего рубля let finalTotal = Math.round(subtotal); // 338 // Выводим результат console.log(`Итоговая сумма к оплате: ${finalTotal} руб.`); // Результат: "Итоговая сумма к оплате: 338 руб."Представьте, что вы создаётевёрстку сеткис тремя колонками и хотите, чтобы:

89 <ul><li>Колонки целиком поместились в контейнер.</li>

90 <li>Центральный элемент был идеально выровнен по горизонтали.</li>

91 </ul>Расчёт ширины колонки:

92 let containerWidth = 799.8; // Ширина всего контейнера (например, в px) let columnCount = 3; // Количество колонок let columnWidth = Math.floor(containerWidth / columnCount); // 266 px console.log(`Ширина одной колонки: ${columnWidth}px`); // Ширина одной колонки: 266 pxОбъяснение:

93 <ul><li>Находим ширину одной колонки:</li>

94 </ul>799.8 / 3 = 266.6.

95 <ul><li>Округляем вниз, чтобы все три колонки точно поместились в контейнер:</li>

96 </ul>Math.floor(266.6) = 266.

97 <ul><li>Проверим ответ:</li>

98 </ul>266 × 3 = 798 (всё помещается).

99 1,8 пикселя остаются - их можно использовать как отступы между колонками.

100 У нас есть родительский блок шириной 800 px и вложенный элемент шириной 375 px. Нужно найти и выровнять центральный элемент по горизонтали.

101 Решение:

102 let parentWidth = 800; // Ширина родительского блока let childWidth = 375; // Ширина вложенного элемента let left = Math.round((parentWidth - childWidth) / 2); // 213 px console.log(`Левый отступ для центрирования: ${left}px`);Объяснение:

103 <ul><li>Найдём левый отступ центрального элемента внутри родительского блока:</li>

104 </ul>(800 - 375) / 2 = 212.5.

105 <ul><li>Округляем полученное значение до ближайшего целого пикселя, чтобы избежать "размытых" краёв или смещения.</li>

106 </ul>Math.round(212.5) = 213 px.

107 Вы хотите плавно перемещать элемент (например, кружок) слева направо. Координата x вычисляется при каждом кадре - она может быть дробной, но CSS left принимает целое число пикселей. Если задать дробное значение, браузер может отрисовать элемент размыто или вызвать дрожание.

108 Решение:

109 let x = 123.78; // Текущая позиция из расчёта // Округляем координату до ближайшего целого element.style.left = Math.round(x) + "px"; // "124px"Объяснение:

110 <ul><li>x = 123.78 - позиция рассчитывается динамически - например, по времени или скорости.</li>

111 <li>Округляем до целого: Math.round(x) = 124.</li>

112 <li>CSS требует чётких координат, поэтому element.style.left = 124px.</li>

113 </ul>Если оставить дробные координаты (123.78px), элемент может отрисовываться размыто или дрожать при движении.

114 Рассмотрим ошибки, которые часто совершают при использовании методов Math.

115 Иногда новички пытаются использовать Math.round() с двумя аргументами.

116 Math.round(1.2345, 2) // 1Это не работает - Math.round принимает только одно число. Второй аргумент игнорируется.

117 Решение: использовать один аргумент.

118 Math.round(1.2345 * 100) / 100 // 1.23Иногда новички думают, что округление решит проблему плавающей запятой:

119 // Неправильное ожидание: Math.round(0.1 + 0.2) === 0.3; // false (0.30000000000000004 округляется до 0)Решение: нужно сначала корректировать точность.

120 const sum = 0.1 + 0.2; Math.round(sum * 10) / 10 === 0.3; // true<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>