Преобразование строки в объект Date в JavaScript

Быстрый ответ

Превращение строки, содержащей дату, в объект Date в JavaScript может быть осуществлено мгновенно с помощью new Date() или Date.parse() для строк в формате ISO. При работе с нестандартными форматами рекомендуется использовать moment.js для сохранения консистентности.

// Сразу строка в формате ISO превращается в объект Date
const isoDate = new Date('2022-12-25');

// Moment.js придет на помощь для нестандартных форматов
const customDate = moment('25/12/2022', 'DD/MM/YYYY').toDate();

Обращаем ваше внимание: поведение встроенного парсера JavaScript может отличаться в различных браузерах, в то время как библиотеки типа moment.js поддерживают стабильность поведения.

Вывод дат в UTC и локальном времени

Использование времени в формате UTC

Для международных приложений рекомендуется использовать UTC для хранения и обработки дат, чтобы избежать проблем, связанных с часовыми поясами. Добавление 'Z' в конец строки ISO приводит к преобразованию в UTC.

// Z обозначает Zulu time, что соответствует UTC
const dateUTC = new Date('2022-12-25T00:00:00Z');
console.log(dateUTC.toUTCString()); // Отобразит дату в UTC

Подробнее об этом расскажет наш спикер на видео

Представление дат в локальное время

При локализации UI появляется потребность показывать даты в локальном времени. Для этого достаточно выполнить метод .toString() для объекта Date.

// Дата в локальном времени кажется более удобоваримой
const dateLocal = new Date('2022-12-25T00:00:00Z');
console.log(dateLocal.toString()); // Выводит дату в локальном времени

Совместимость с Internet Explorer

Даже устаревший Internet Explorer заслуживает учета. Для обеспечения совместимости разделяйте компоненты даты в строке с помощью кода.

// Почтим код, рассчитанный на IE
var dateParts = '2022-12-25'.split('-');
var year = parseInt(dateParts[0], 10);
var month = parseInt(dateParts[1], 10) – 1; // В JavaScript месяцы отсчитываются с нуля
var day = parseInt(dateParts[2], 10);

// Разобрана и готова к использованию
var dateIE = new Date(year, month, day);

Использование библиотек для анализа дат

Moment.js в центре внимания

Date — это здорово, но когда требуется углубленный парсинг и форматирование, то moment.js — определенно основной выбор.

// Moment.js сделает все за вас
const dateStr = '25/12/2022 12:34:56 PM';
const dateWithTimezone = moment.tz(dateStr, "DD/MM/YYYY hh:mm:ss A", "Europe/London").toDate();

Новички в мире дат

Кроме moment.js, в роли легковесных и функциональных библиотек для работы с датами быстро набирают обороты date-fns и day.js.

// date-fns: компактный и продуктивный
import { parse } from 'date-fns';

// 'dd.MM.yyyy': удобный нестандартный формат для date-fns
const customFormat = 'dd.MM.yyyy';
const dateFnsDate = parse('25.12.2022', customFormat, new Date());

Мастерство разбора нестандартных форматов дат

Использование регулярных выражений для анализа

Обращайтесь к регулярным выражениям для преобразования строки в дату:

// Преобразование даты из строки при помощи регулярных выражений
const dateString = '25.12.2022';
const regex = /^(\d{2})\.(\d{2})\.(\d{4})$/;
const [, day, month, year] = dateString.match(regex);
const dateFromRegex = new Date(year, month – 1, day);

Ручной разбор: надежность, проверенная временем

Иногда важно взять все под свой контроль; ручной разбор дарит полный контроль над процессом:

function parseDate(dateStr) {
  const parts = dateStr.split('/');
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10) – 1; // В JavaScript месяцы начинаются с 0
  const year = parseInt(parts[2], 10);
  return new Date(year, month, day);
}

Визуализация

Помните, что процесс перевода строки в объект даты в JavaScript выглядит как расшифровка загадочного календарного кода:

Ваша строка: "2023-04-05T08:30:00"

Строка представляет собой таинственный сундук со временем:

🔒📅 Код: Год-Месяц-ДеньTЧас:Минута:Секунда

new Date(): ключ, который раскрывает тайну даты и времени:

const date = new Date("2023-04-05T08:30:00");

И вот код уже не таинственный, а понятный и ясный:

🔄📅 Раскрыто: 5 апреля 2023 года, 08:30 утра

Таким образом, ваша таинственная строка теперь становится послушным объектом Date в JavaScript! 🎉

Борьба с капризами форматирования и избегание путаницы

Запутанность часовых поясов

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

const ambiguousDate = new Date('2022-12-25'); // Локальное время или UTC?
const explicitDate = new Date('2022-12-25T00:00:00Z'); // Однозначно UTC

Неправильные даты

В случае парсинга некорректных дат JavaScript возвращает Invalid Date вместо ошибки. Нужно быть настороже:

const invalidDate = new Date('not-a-date');
if (isNaN(invalidDate)) {
  console.error('Это даже не напоминает дату!');  // Ой!
}

Внимание к високосным годам

Пока весь остальной код может споткнуться, ручной разбор позволяет изящно обойти високосные годы и прочие острые моменты календаря:

if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
  // Високосные годы влияют на течение времени!
}

Полезные материалы

1. Date.parse() – JavaScript | MDN — Углубите знания метода Date.parse() для разбора дат в JavaScript.
2. Parsing a string to a date in JavaScript – Stack Overflow — Сообщество Stack Overflow поделится с вами лучшими практиками обработки строк с датами.
3. Moment.js | Docs — Изучите возможности библиотеки Moment.js по анализу строк с датами.
4. date-fns – современная JavaScript библиотека для работы с датами — Освойте искусство разбора дат при помощи библиотеки date-fns.
5. ISO 8601 – Wikipedia — Погрузитесь в мир стандартизированного форматирования времени по ISO 8601.
6. Возможно, вы не нуждаетесь в Moment.js — Оцените возможности нативного JavaScript по работе с датами и временем.
7. GitHub – iamkun/dayjs: ⏰ Day.js 2kB неизменяемая библиотека дат и времени, альтернатива Moment.js со схожим современным API — Познакомьтесь с небольшой, но функциональной альтернативой Moment.js.