Полное руководство по типу Number и объекту Math

  • 19 августа 2025

JS

HTML Academy

Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.

Исторический контекст: как числа появились в JavaScript

Тип Number и объект Math существуют с первых версий JavaScript, созданного в 1995 году. Тогда язык разрабатывался как простой инструмент для добавления интерактивности на веб-страницы, и числа были необходимы для базовых вычислений, таких как подсчёт кликов или обработка размеров элементов. Вдохновлённый языками вроде C и Java, JavaScript перенял модель чисел с плавающей точкой (floating-point), основанную на стандарте IEEE 754. Это позволило ему обрабатывать как целые, так и дробные числа в едином формате.

Объект Math, в свою очередь, был добавлен, чтобы предоставить разработчикам готовые инструменты для сложных вычислений — от округления чисел до тригонометрических функций. Со временем, с выходом ECMAScript 6 (2015) и последующих стандартов, тип Number получил новые методы, такие как Number.isInteger(), а объект Math расширился дополнительными функциями, например, Math.clz32(). В 2025 году числа и Math остаются краеугольным камнем JavaScript, используемым во всём — от веб-игр до анализа данных.

Тип Number: основы

В JavaScript все числа, будь то целые (например, 42) или дробные (например, 3.14), принадлежат к типу Number. Это примитивный тип, который поддерживает числа с плавающей точкой двойной точности (64-битный формат IEEE 754). Это значит, что JavaScript не различает целые числа и числа с дробной частью на уровне типов, как это делают некоторые другие языки.

Вот несколько способов создать число в JavaScript:

const integer = 42; // Целое число
const float = 3.14; // Дробное число
const negative = -10; // Отрицательное число
const scientific = 1.23e3; // Экспоненциальная запись (1230)

Кроме обычных чисел, тип Number включает специальные значения:

  • Infinity: Представляет бесконечность, например, при делении на ноль (1 / 0).
  • -Infinity: Отрицательная бесконечность.
  • NaN: "Not-a-Number" — результат некорректных вычислений, например, 0 / 0 или parseInt("не число").

Пример работы с этими значениями:

console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log(0 / 0); // NaN
console.log(typeof NaN); // "number"

Важно: NaN — это уникальное значение, которое не равно самому себе. Чтобы проверить, является ли значение NaN, используйте Number.isNaN():

const result = 0 / 0;
console.log(result === NaN); // false
console.log(Number.isNaN(result)); // true

Объект Math: ваш помощник для вычислений

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

  • Math.PI: Число π (примерно 3.14159).
  • Math.random(): Генерирует случайное число от 0 (включительно) до 1 (не включительно).
  • Math.round(x): Округляет число до ближайшего целого.
  • Math.floor(x): Округляет вниз (до меньшего целого).
  • Math.ceil(x): Округляет вверх (до большего целого).
  • Math.abs(x): Возвращает абсолютное значение числа.
  • Math.min(...args) и Math.max(...args): Находят минимальное или максимальное значение из списка чисел.

Пример использования:

console.log(Math.PI); // 3.141592653589793
console.log(Math.round(3.6)); // 4
console.log(Math.floor(3.9)); // 3
console.log(Math.ceil(3.1)); // 4
console.log(Math.abs(-5)); // 5
console.log(Math.min(1, 5, -2, 10)); // -2

Практический пример 1: Генерация случайного цвета

Один из самых популярных сценариев использования Math.random() — генерация случайных значений. Давайте создадим пример, где фон страницы меняется на случайный цвет при клике на кнопку:

<button onclick="changeColor()">Сменить цвет</button>

<style>
#colorBox {
  width: 100px;
  height: 100px;
  margin: 20px;
  transition: background-color 0.3s;
}
</style>

<script>
function changeColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}
</script>

Здесь Math.random() генерирует числа от 0 до 1, мы умножаем их на 256 и округляем вниз с помощью Math.floor(), чтобы получить значения для красного, зелёного и синего каналов RGB. Попробуйте этот код в редакторе, чтобы увидеть, как фон страницы меняется на случайный цвет!

Практический пример 2: Калькулятор окружности

Допустим, вы хотите создать приложение, которое вычисляет длину окружности по радиусу. Здесь пригодится константа Math.PI:

<input type="number" id="radius" placeholder="Введите радиус">
<button onclick="calculateCircumference()">Вычислить</button>
<div id="result"></div>

<style>
input {
  padding: 8px;
  font-size: 16px;
  margin-right: 10px;
}
button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}
button:hover {
  background-color: #0056b3;
}
#result {
  margin-top: 20px;
  font-family: Arial, sans-serif;
}
</style>

<script>
function calculateCircumference() {
  const radius = Number(document.getElementById('radius').value);
  if (Number.isNaN(radius) || radius

Этот код проверяет, является ли введённое значение числом, и использует Math.PI для вычисления длины окружности. Метод Math.round() используется для округления результата до двух знаков после запятой.

Совместимость с браузерами

На август 2025 года тип Number и объект Math имеют статус Baseline: Widely Available и поддерживаются всеми современными браузерами (Chrome, Firefox, Safari, Edge) с января 2018 года, согласно данным MDN. Даже старые браузеры, такие как Internet Explorer 11, полностью поддерживают базовые методы Math и специальные значения вроде Infinity и NaN. Более новые методы, такие как Number.isSafeInteger(), поддерживаются с 2015 года (ES6).

Когда стоит использовать Number и Math?

Тип Number и объект Math пригодятся в самых разных сценариях:

  • Создание игр: генерация случайных событий, расчёт траекторий или углов.
  • Обработка форм: проверка и преобразование числовых данных.
  • Визуализации: построение графиков или анимаций с использованием тригонометрических функций.
  • Финансовые приложения: округление цен, вычисление процентов.

Однако есть подводные камни:

  • Точность: Из-за формата IEEE 754 дробные вычисления могут давать неожиданные результаты, например, 0.1 + 0.2 === 0.3 вернёт false. Для точных расчётов используйте библиотеки, такие как decimal.js.
  • Производительность: Частое использование сложных методов Math, таких как Math.sin(), в циклах может замедлить приложение.

Практический пример 3: Случайный выбор элемента

Допустим, вы хотите случайным образом выбрать цитату из списка и отобразить её на странице:

<button onclick="showRandomQuote()">Показать цитату</button>
<div id="quote"></div>

<style>
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
}
button:hover {
  background-color: #218838;
}
#quote {
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-style: italic;
}
</style>

<script>
const quotes = [
  'Веб-разработка — это искусство!',
  'Код — это поэзия.',
  'Учись, пробуй, твори!',
  'JavaScript делает веб живым.'
];
function showRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  document.getElementById('quote').textContent = quotes[index];
}
</script>

Здесь Math.random() и Math.floor() используются для выбора случайного индекса из массива цитат. Это отличный пример для новичков, чтобы понять, как числа могут оживить интерфейс.

Альтернативы и современный подход

Тип Number и объект Math покрывают большинство базовых задач, но в сложных проектах вы можете рассмотреть альтернативы:

  • BigInt: Для работы с целыми числами произвольной длины, например, в криптографии.
  • Библиотеки: math.js или decimal.js для высокоточных вычислений.
  • Typed Arrays: Для работы с большими наборами чисел, например, в графике или играх.

Пример с BigInt:

const bigNumber = BigInt(9007199254740991); // Максимум для Number
console.log(bigNumber + 1n); // Без потери точности

Заключение

Числа в JavaScript, представленные типом Number, и объект Math — это мощные инструменты, которые позволяют создавать интерактивные и функциональные веб-приложения. От генерации случайных чисел до сложных математических расчётов, они дают новичкам простой способ начать работу с данными. В 2025 году эти инструменты остаются стандартом благодаря их универсальности и поддержке во всех браузерах. Понимание Infinity, NaN и методов Math открывает двери для создания игр, калькуляторов, визуализаций и многого другого.

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники