JS
Статьи о JavaScript — инструкции, советы, полезные руководства.
Chrome DevTools останется без «живого» редактирования JS
Инструменты разработчика в браузере Chrome лишатся одной из своих экспериментальных возможностей — «живого редактирования» JavaScript-кода. Как сообщила команда разработчиков в официальном блоге, функция будет полностью удалена в феврале 2026 года с выходом версии Chrome 145. Это решение отражает эволюцию современных инструментов веб-разработки.
- 23 октября 2025
Форматирование относительного времени в JavaScript
API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.
В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.
- 17 октября 2025
Что такое null-коалесцентный оператор ?? в JavaScript
Операторы ?? и ??= стали доступны в Baseline в статусе «Widely Available» с 16 марта 2023 года. Они упрощают работу с переменными, которые могут быть null или undefined, позволяя задавать значения по умолчанию или обновлять переменные только в этих случаях. Это делает код чище и понятнее, особенно при работе с потенциально отсутствующими данными.
В этой статье мы разберём, как работают операторы нулевого слияния, и покажем примеры их использования.
- 15 октября 2025
Кодирование и декодирование Base64 с atob и btoa
Функции btoa() и atob() — это встроенные средства JavaScript для кодирования и декодирования строк в формате Base64.
С 20 марта 2019 года они входят в статус «Widely Available» по Baseline — значит, поддерживаются всеми современными браузерами и подходят для использования в продакшене.
- 14 октября 2025
Как найти элемент в массиве по индексу на JS
Метод at() возвращает элемент массива по индексу. Отрицательные индексы позволяют отсчитывать элементы с конца массива.
const numbers = [10, 20, 30, 40, 50];
// Получаем элемент по индексу
console.log(numbers.at(0)); // 10
console.log(numbers.at(2)); // 30
// С конца массива
console.log(numbers.at(-1)); // 50
console.log(numbers.at(-3)); // 30
Здесь показано, что at() работает как обычный доступ по индексу, но с преимуществом: отрицательные числа позволяют легко получать элементы с конца массива. Это особенно удобно, когда размер массива заранее неизвестен.
// Использование с типизированными массивами
const typedArr = new Uint8Array([1, 2, 3, 4]);
console.log(typedArr.at(1)); // 2
console.log(typedArr.at(-2)); // 3
Метод одинаково хорошо работает и с типизированными массивами (TypedArray), что делает его универсальным инструментом для работы с любыми последовательностями чисел.
// Безопасный доступ
console.log(numbers.at(10)); // undefined
console.log(numbers.at(-10)); // undefined
Если индекс выходит за границы массива, метод возвращает undefined. Это безопаснее, чем напрямую обращаться к элементу через квадратные скобки, так как код остаётся читаемым и предсказуемым.
Метод at() делает код чище и удобнее, особенно когда нужно работать с элементами с конца массива или с переменной длиной массива.
- 3 октября 2025
Как в 2025 году вибрануть сайтом
Шутки в сторону, на кону серьёзная задача — нужно вибрануть сайтом. К счастью, в 2025 году это не очень сложно и нужна поддержка есть. Vibration API поддерживается почти везде, кроме Safari. Конечно, ещё нужно устройство с вибромотором, но тут подойдут почти все телефоны, если есть нужный браузер.
Не будем растягивать эту инструкцию и давайте начнём с базовой страницы (это будет просто кнопка, выровненная по центру.)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка по центру</title>
</head>
<body>
<button>Нажми меня</button>
</body>
</html>
Ну или ладно, сначала она вообще не по центру. Добавим стили, чтобы кнопка получила цвет и оказалась там, где мы хотим. Вставьте весь этот тег <style> куда-нибудь внутри <head>.
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
button {
padding: 15px 30px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
Чтобы добавить поддержку вибрации, слегка изменим код внутри <body> — добавим скрипт, который проверяет поддержку вибрации и вибрирует.
<body>
<button id="vibrateButton">Нажми меня</button>
<p id="status">Проверка поддержки вибрации...</p>
<script>
const vibrateButton = document.getElementById('vibrateButton');
const statusText = document.getElementById('status');
if ('vibrate' in navigator) {
statusText.textContent = 'Vibration API поддерживается!';
vibrateButton.addEventListener('click', () => {
navigator.vibrate(200); // Вибрация на 200 мс
statusText.textContent = 'Устройство завибрировало!';
});
} else {
vibrateButton.disabled = true;
statusText.textContent = 'Vibration API не поддерживается.';
}
</script>
</body>
И всё!
Есть, конечно, нюанс. В теории с поддержкой всё хорошо, а на практике при проверке у редакции на Андроид-смартфоне вибрация поддерживается в Chrome и Яндекс-браузере, а в Firefox не работает (хотя на CanIUse и написано обратное).
Но теперь, если вы хотите клёво вибрануть телефоном в ответ на реакцию в каком-нибудь чатике, вы точно знаете, что делать.
- 3 октября 2025
Использование метода normalize() для строк в JavaScript
Метод normalize() приводит строки к единой форме Unicode. Это нужно, когда один символ (например, буква с акцентом) записан по-разному, но должен обрабатываться одинаково. Метод доступен с 20 марта 2019 года (статус Baseline «Widely Available»).
Пример: буква «é» может быть единой или комбинацией «e» и «́». normalize() делает их одинаковыми для сравнения.
const str1 = 'e\u0301'; // «e» + акцент
const str2 = 'é'; // единая «é»
console.log(str1 === str2); // false
console.log(str1.normalize() === str2.normalize()); // true
Получается, в Unicode один символ может быть записан разными способами, что мешает при сравнении строк, поиске или сортировке. normalize() решает эту проблему, приводя строку к стандартной форме.
- 12 сентября 2025
Таймеры в JS с setTimeout и clearTimeout
setTimeout — это метод, предоставляемый API браузеров и Node.js, который позволяет выполнять код с заданной задержкой. Он принимает функцию (коллбэк), время задержки в миллисекундах и, опционально, аргуtimes для передачи в функцию. Для отмены выполнения используется clearTimeout.
setTimeout и setInterval были введены в первых версиях JavaScript (ECMAScript 1, 1997) как часть API WindowOrWorkerGlobalScope. Эти методы интегрированы в цикл событий (event loop), который управляет асинхронным выполнением в JavaScript. Несмотря на появление современных инструментов, таких как Promises и async/await, setTimeout остаётся востребованным благодаря своей простоте и универсальности.
const timerId = setTimeout(() => {
console.log('Сообщение появится через 2 секунды');
}, 2000);
// Отмена выполнения
clearTimeout(timerId);
Здесь setTimeout возвращает числовой идентификатор таймера (timerId), который используется в clearTimeout. В Node.js возвращается объект Timeout.
- 6 сентября 2025
Операторы присваивания &&= и ||= в JavaScript
JavaScript развивается быстрыми темпами, и новые возможности языка часто появляются именно для того, чтобы писать меньше кода и делать его более читаемым. Одной из таких возможностей стали логические операторы присваивания &&= и ||=, которые вошли в стандарт относительно недавно и уже поддерживаются во всех современных браузерах (статус Widely Available в Baseline с 16 марта 2023 года).
До появления этих операторов разработчики писали длинные конструкции с проверками:
let a = true;
if (a) {
a = false;
}Код был понятен, но избыточен. Новые операторы &&= и ||= позволяют объединить проверку и присваивание в одну строку.
- 30 августа 2025
Как узнать, что юзер кликнул. События мыши в JS
Мышь — один из самых привычных способов взаимодействия с веб-страницей, и JavaScript даёт разработчику полный набор инструментов, чтобы реагировать на действия пользователя. Мышиные события позволяют «слушать» клики, движения и даже прокрутку, создавая динамичные и удобные интерфейсы. Эти события существуют в браузерах очень давно и с января 2018 года находятся в статусе Widely Available в Baseline — значит, поддерживаются всеми современными браузерами.
- 29 августа 2025