JS
Статьи о JavaScript — инструкции, советы, полезные руководства.
Форматирование относительного времени в 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
События keydown и keyup в JavaScript: управление клавиатурой
Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.
- 23 августа 2025