JavaScript методы: подробный обзор

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

Рассмотрим наиболее востребованные глобальные методы, которые вы будете использовать практически в каждом проекте. Важно помнить, что хотя они и называются методами, синтаксически они вызываются как обычные функции, без привязки к объекту (кроме случаев явного указания объекта, как с eval).

parseInt(string, radix)

Метод, предназначенный для преобразования строкового аргумента в целое число. Второй необязательный параметр указывает на систему счисления.

const userInput = "123.78px";
const numericValue = parseInt(userInput, 10);
console.log(numericValue); // Вывод: 123 (число)

parseFloat(string)

Аналогичен parseInt, но возвращает число с плавающей точкой, если оно присутствует в строке.

const priceTag = "49.99 dollars";
finalPrice = parseFloat(priceTag);
console.log(finalPrice); // Вывод: 49.99 (число)

isNaN(value)

Служит для проверки, является ли переданное значение NaN (Not-a-Number). Этот метод необходим, так как сравнение NaN === NaN всегда возвращает false.

const operationResult = 0 / 0; // Результат: NaN
const checkResult = isNaN(operationResult);
console.log(checkResult); // Вывод: true

isFinite(value)

Позволяет определить, является ли переданное значение конечным числом. Возвращает false для Infinity, -Infinity и NaN.

const largeNumber = 1e309; // Больше максимального значения
const checkFinite = isFinite(largeNumber);
console.log(checkFinite); // Вывод: false (бесконечность)

encodeURI(string) и decodeURI(string)

Незаменимые инструменты для работы с URL. Они кодируют URI-строку, заменяя определенные символы на escape-последовательности, и декодируют их обратно.

const siteUrl = "https://site.com/контент?запрос=привет";
const encodedUrl = encodeURI(siteUrl);
console.log(encodedUrl); // Вывод: https://site.com/%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82?%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81=%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82

Массивы являются основой для хранения упорядоченных коллекций данных, и методы массивов предоставляют элегантные способы для их перебора, модификации, поиска и агрегации. В современном коде циклы for и while все чаще уступают место декларативным методам, которые делают код более читаемым и менее подверженным ошибкам.

Все методы массивов можно условно разделить на несколько категорий: изменяющие исходный массив (мутирующие) и возвращающие новый массив (иммутабельные). Рассмотрим ключевые представители каждой группы.

const productPrices = [1200, 550, 8000, 320, 1500];
// Создаем массив цен с учетом скидки 10%
const pricesWithDiscount = productPrices.map(price => price * 0.9);
console.log(pricesWithDiscount); // Вывод: [1080, 495, 7200, 288, 1350]

// Оставляем только те товары, цена которых со скидкой меньше 1000
const affordableProducts = pricesWithDiscount.filter(price => price < 1000);
console.log(affordableProducts); // Вывод: [495, 288]

В JavaScript строки являются примитивами, но благодаря механизму автоупаковки (autoboxing) у нас есть возможность вызывать методы так, как если бы строки были объектами. Это означает, что при попытке вызвать метод у строкового примитива, JavaScript временно оборачивает его в объект String, выполняет метод и затем уничтожает этот объект.

Современные веб-приложения постоянно манипулируют текстом: валидируют формы, форматируют вывод, парсят ответы сервера. Для этих целей существует богатый арсенал строчных методов:

• Изменение регистра: toUpperCase() и toLowerCase().
• Поиск и проверка: includes(substring) проверяет наличие подстроки; indexOf(substring) возвращает позицию первого вхождения или -1; startsWith(prefix) и endsWith(suffix) проверяют начало и конец строки.
• Извлечение подстроки: slice(start, end) вырезает часть строки; substring(start, end) делает похожее, но с некоторыми особенностями обработки отрицательных индексов.
• Замена и форматирование: replace(pattern, replacement) заменяет первое вхождение; replaceAll(pattern, replacement) заменяет все вхождения; trim() удаляет пробелы в начале и конце строки; split(delimiter) разбивает строку на массив подстрок.

const userFullName = "  john DOE ";

// Очищаем имя от лишних пробелов и приводим к нижнему регистру
const cleanName = userFullName.trim().toLowerCase();
console.log(cleanName); // Вывод: "john doe"

// Делаем заглавной только первую букву
const capitalizedFirst = cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
console.log(capitalizedFirst); // Вывод: "John doe"

// Разбиваем строку на массив слов
const wordsArray = capitalizedFirst.split(' ');
console.log(wordsArray); // Вывод: ['John', 'doe']

// Проверяем, является ли имя приветствием
const isGreeting = capitalizedFirst.includes('Hello');
console.log(isGreeting); // Вывод: false

Большинство операций с числами выполняется либо через глобальные функции, либо через методы объекта Math. Однако у самого объекта-обертки Number есть ряд полезных методов, которые часто остаются незамеченными новичками.

Основная задача методов чисел — это форматирование, проверка и преобразование, не связанное напрямую с арифметикой.

toFixed(digits)

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

const preciseValue = 123.456789;
const roundedValue = preciseValue.toFixed(2);
console.log(roundedValue); // Вывод: "123.46" (строка!)
// Важно помнить, что результат - строка. Для вычислений его нужно преобразовать обратно.

toPrecision(precision)

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

const largeMetric = 1234.5;
const withPrecision = largeMetric.toPrecision(4);
console.log(withPrecision); // Вывод: "1235" (округлено до 4 значащих цифр)

Number.isInteger(value)

Статический метод, позволяющий надежно проверить, является ли переданное значение целым числом. В отличие от глобальной функции isNaN, эти методы не выполняют принудительное преобразование типов, что делает проверку строже и надежнее.

const orderQuantity = 42;
const pricePerItem = 9.99;

console.log(Number.isInteger(orderQuantity)); // Вывод: true
console.log(Number.isInteger(pricePerItem));   // Вывод: false
console.log(Number.isInteger('42'));           // Вывод: false (строка, а не число)

В отличие от ранее рассмотренных категорий, Math не является функцией-конструктором. Это просто объект, свойства и методы которого предназначены для выполнения стандартных математических задач. Все методы Math являются статическими, то есть мы всегда вызываем их как Math.methodName(...), а не создаем экземпляры объекта Math.

Этот объект — настоящая сокровищница для разработчиков, работающих с анимациями, графикой, статистикой или любыми алгоритмами, требующими вычислений.

Вот список наиболее часто используемых методов Math:

Базовые операции

• Math.max(a, b, c...) — возвращает наибольшее число из переданных.
• Math.min(a, b, c...) — возвращает наименьшее число.
• Math.pow(base, exponent) — возводит base в степень exponent.
• Math.sqrt(x) — возвращает квадратный корень числа.

Округление

• Math.floor(x) — округление вниз (до ближайшего меньшего целого).
• Math.ceil(x) — округление вверх (до ближайшего большего целого).
• Math.round(x) — округление до ближайшего целого по правилам математики.
• Math.trunc(x) — возвращает целую часть числа, отбрасывая дробную.

Случайные числа и тригонометрия

• Math.random() — возвращает псевдослучайное число в диапазоне от 0 (включительно) до 1 (но не включая 1). Краеугольный кань для создания игр и генерации данных.
• Math.sin(x), Math.cos(x), Math.tan(x) и другие тригонометрические функции.

// Генерация случайного целого числа от 10 до 20 включительно
const minBorder = 10;
const maxBorder = 20;
const randomInteger = Math.floor(Math.random() * (maxBorder - minBorder + 1)) + minBorder;
console.log(randomInteger);

// Расчет гипотенузы по теореме Пифагора
const cathetusA = 5;
const cathetusB = 12;
const hypotenuse = Math.sqrt(Math.pow(cathetusA, 2) + Math.pow(cathetusB, 2));
console.log(hypotenuse); // Вывод: 13

// Поиск максимального значения в массиве с использованием spread-оператора
const temperatureReadings = [15, 22, 18, 27, 20];
const maxTemp = Math.max(...temperatureReadings);
console.log(maxTemp); // Вывод: 27

Методы объекта Date предоставляют интерфейс для работы с датами и временем в JavaScript. Работа с временными отрезками всегда была нетривиальной задачей из-за различий в часовых поясах, форматах летосчисления и локальных настройках.

Все методы Date позволяют получать и устанавливать компоненты этой даты (год, месяц, день, час и т.д.) как в локальном времени, так и по UTC.

При создании новой даты (new Date()) мы получаем объект, который затем можно настроить или из него можно извлечь данные.

Методы получения (getters)

• getFullYear() — возвращает год (4 цифры). Важно: getYear() устарел и не рекомендуется к использованию.
• getMonth() — возвращает месяц в диапазоне от 0 (январь) до 11 (декабрь). Это частая причина ошибок на один месяц.
• getDate() — возвращает день месяца (от 1 до 31).
• getDay() — возвращает день недели (от 0 — воскресенье до 6 — суббота).
• getHours(), getMinutes(), getSeconds(), getMilliseconds() — очевидные компоненты времени.
• getTime() — возвращает количество миллисекунд, прошедших с 1 января 1970 года. Удобно для сравнения дат.

Методы установки (setters)

• setFullYear(year, [month], [date]) — устанавливает год (и опционально месяц и день).
• setMonth(month, [date]) — устанавливает месяц.
• setDate(date) — устанавливает день месяца.
• setHours(hour, [min], [sec], [ms]) — устанавливает часы.
• setTime(milliseconds) — устанавливает дату через количество миллисекунд от эпохи Unix.

Методы форматирования и преобразования

• toLocaleDateString() — возвращает строку с датой, отформатированную согласно локали пользователя.
• toLocaleTimeString() — возвращает строку со временем.
• toISOString() — возвращает дату в формате ISO (YYYY-MM-DDTHH:mm:ss.sssZ), что идеально подходит для отправки на сервер.

// Создаем дату рождения: 15 марта 1995 года
const birthDate = new Date(1995, 2, 15); // Месяц 2 = Март
console.log(birthDate.toLocaleDateString()); // Вывод: 15.03.1995 (в зависимости от локали)

// Получаем текущую дату
const currentDate = new Date();

// Вычисляем возраст (упрощенно)
const age = currentDate.getFullYear() - birthDate.getFullYear();
console.log(`Возраст: ${age} лет`);

// Проверяем, был ли уже день рождения в этом году
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
const birthMonth = birthDate.getMonth();
const birthDay = birthDate.getDate();

if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
    console.log('День рождения еще в этом году не наступал');
} else {
    console.log('День рождения в этом году уже был или происходит сегодня');
}

// Формируем строку для сервера в формате ISO
const serverFormat = birthDate.toISOString().split('T')[0];
console.log(serverFormat); // Вывод: 1995-03-15

Мы проделали большой путь от общего понятия методов JS до тонкостей работы с датами и числами. Как видите, владение встроенным инструментарием JavaScript превращает написание кода из рутинного процесса в искусство создания элегантных и производительных решений.

Если вы чувствуете, что готовы систематизировать знания и выйти на новый профессиональный уровень, приглашаем вас на наш комплексный онлайн-курс «Обучение JavaScript с нуля до профи». Программа построена так, чтобы за короткий срок превратить вас из новичка в специалиста, способного решать реальные бизнес-задачи. А если вашему проекту или бизнесу нужен не просто код, а мощный, современный и конверсионный сайт — команда нашей веб-студии с радостью возьмет разработку такого сайта на себя, воплотив ваши идеи в жизнь с использованием самых актуальных веб-технологий.