В данной статье мы рассмотрим основные функции JavaScript по работе с датой, такие как:
- создание объектов даты,
- получение текущей даты и времени,
- форматирование значений и манипуляции с датами.
Вы получите полное представление о работе с датами в JavaScript и сможете применить эти знания в своих проектах, а также блок бесплатных материалов в конце статьи, помогающий в обучении разработке.
Базовые операции с датами
Создать дату в JavaScript можно с помощью конструктора Date(), который при вызове без параметров (const date = new Date()) вернет дату и время вызова в формате YYYY-MM-DDTHH:mm:ss.sssZ где YYYY-MM-DD — год, месяц и день, T — разделитель между датой и временем, HH:mm:ss.sss — часы, минут, секунды и миллисекунды, а Z — настройки временной зоны. Даты в JavaScript представлены в виде количества миллисекунд, прошедших с 1 января 1970 года по UTC поэтому новую дату можно так же создать с помощью метода .now() глобального объекта Date, который вернет количество миллисекунд до вызова.
Поскольку даты содержат точное количество миллисекунд, прошедших с 1 января 1970 года по UTC разницу между ними можно использовать для замера времени между началом и окончанием выполнения какой-либо операции. Для таких целей лучше использовать метод Date.now() вместо конструктора т.к. он гораздо быстрее потому что не создает при вызове промежуточных объектов и возвращает сразу количество миллисекунд, что может быть важно при проведении большого количества замеров подряд.
Что бы задать конкретную дату нужно передать ее в конструктор в одном из следующих форматов:
- Указать год, месяц, день и т.д. цифрами через запятую
- Строка вида “YYYY-MM-DDTHH:mm:ss.sssZ” или 'December 31, 2023 23:59:59’ фактически такой способ является неявным вызовом метода Date.parse()
- Другой объект даты
- Количество миллисекунд, прошедших с 1 января 1970 года по UTC
При указании даты строкой или перечислением цифр не обязательно указывать точное до мс значение. Если не передать количество мс, секунд, минут или часов — они будут автоматически установлены на 0, дни на 1, месяца на 0 (нумерация месяцев начинается с 0). При этом год нужно передавать полностью, а не последние 2 цифры.
Работа с датами в JavaScript может быть сложной задачей из-за различных форматов, часовых поясов и операций. Умение форматировать даты, выполнять вычисления с датами и учитывать локализацию является важным навыком для любого JavaScript-разработчика. Без глубокого понимания работы с датами сложно создать по-настоящему качественное веб-приложение, которое будет удобно пользователям в разных уголках мира. Если вы хотите детальнее погрузиться в основы JavaScript и научиться профессионально работать с датами и временем — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Внести изменения в уже существующий объект даты, можно с помощью методов, которые имеют название .set<нужное значение> как .setDate() для дней (.getDay() вернет день недели числом от 0 до 6), .setFullYear() для года (.setYear() был удален из стандарта т.к. мог принимать не полное значение года) или .setHours() для часов. Если указать при объявлении даты или передать в один из таких методов несуществующее значение, например 20-й месяц или 25-й час — дата автоматически отформатируется и вместо 25 часов добавит к значений дней единицу, а часы установит на 1.
Важно помнить что Date ссылочный тип данных и два объекта, содержащие одинаковые даты не будут равны друг другу при любом типе сравнения.
По аналогии с методами для изменения значений даты, существуют методы для получения части значений. Такие методы имеют название .get<нужное значение> или .getUTC<нужное значение> для получения получения значений по Гринвичу.
Работа с форматированием дат
В JavaScript доступны методы для вывода дат в виде строки разных форматов:
- .toString() не принимает параметров и возвращает строку в виде: день недели (Mon), первые три буквы месяца (Aug), день (28), год (2023), время без мс (12:45:30), часовой пояс относительно UTC (GMT-0700) и название часового пояса в скобках (Pacific Daylight Time).
- .toDateString аналогичен .toString(), но возвращает только дату без времени.
- .toTimeString() аналогичен .toString(), но возвращает только время без даты.
- .toUTCString() аналогичен .toString(), но возвращает дату по Гринвичу.
- .toLocalString() принимает настройки локализации (язык и название страны) и опции (например формат отображения часов в виде 24 или am/pm) и возвращает строку в принятом в указанной стране и языке формате.
- .toLocalDateString() аналогичен .toLocalString(), но возвращает только дату без времени.
- .toLocalTimeString() аналогичен .toLocalString(), но возвращает только время без даты.
Date можно сериализовать в формат JSON с помощью метода .toJSON(). Конструктор конечно же прекрасно распарсит такую строку.
Заключение
В статье мы разобрали основные функции, которые дают понимание концепций работы с датами и навык их применения. В свою очередь, это позволит вам создавать более динамичные и функциональные веб-приложения на JavaScript. Не забывайте продолжать изучать и практиковать использование дат в своих проектах, ведь это крайне важное умение для разработчика, полезное во всех смыслах.
Освоив основы работы с датами, ты сможешь перейти к более сложным задачам, таким как работа с временными зонами, планирование задач и создание интерактивных календарей. На курсе JavaScript Advanced мы подробно разбираем все аспекты работы с датами, включая использование Date, Date.parse, Date.UTC, а также знакомимся с библиотеками для работы с датами, например, Moment.js или Luxon. В первых 3 модулях уже доступно бесплатное содержание — начни изучать JavaScript Advanced прямо сегодня.
Бесплатные полезности
- Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене — https://dzen.ru/purpleschool?tab=longs
- Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте — https://purpleschool.ru/skills
- Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» — https://purpleschool.ru/course/code-basics
