Преобразование даты в UTC с Javascript: учет часовых поясов

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Преобразование объекта Date в формат UTC можно быстро осуществить с использованием метода toISOString:

JS
Скопировать код
let utcDate = new Date().toISOString();

Данное преобразование мгновенно генерирует UTC-строку.

Кинга Идем в IT: пошаговый план для смены профессии

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

Если функционала toISOString для вас недостаточно, есть и другие подходы. Вы можете объединить Date.UTC и getTimezoneOffset для более корректного перевода в формат UTC:

JS
Скопировать код
// Поиграем немного со временем!
let date = new Date();
let utcDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);

Таким образом, мы компенсируем локальное время с учётом разницы часовых поясов, в итоге получая чистое UTC.

Учёт перехода на летнее время и особенностей часовых поясов

Не стоит бояться проблем, связанных с переходом на летнее время и часовыми поясами. Date.UTC поможет минимизировать эти сложности:

JS
Скопировать код
let utcDate = new Date(Date.UTC(year, month, day, hour, minute, second));

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

Надёжное использование Moment.js

Когда стоит задача продвинутой работы со временем, это место:Moment.js:

JS
Скопировать код
let utcDate = moment(date).utc().format();

Moment.js легко конвертирует ваше локальное время в формат UTC.

Совместимость со старыми браузерами

Если ваш браузер устарел и не поддерживает функцию toISOString, можно добавить альтернативное решение (костыль):

JS
Скопировать код
if (!Date.prototype.toISOString) {
 // Здесь пора написать свой метод toISOString!
}

Таким образом, недостаток поддержки в старых браузерах больше не будет проблемой.

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

Вдумайтесь, что вы настраиваете свои часы при перемещении из одного часового пояса в другой:

Markdown
Скопировать код
Часовой пояс
Часы:      🕓 Ваше местное время
Переход на: ➡️ UTC

Преобразование даты в UTC в JavaScript подобно переводу ваших часов на GMT:

JS
Скопировать код
new Date().toUTCString(); // 🕓➡️🕛 Подарок – время по UTC на часах! Здорово, не правда ли?

Тестирование преобразований часовых поясов для обеспечения надёжности

Чтобы убедиться в точности ваших преобразований, необходимо провести тщательное тестирование:

JS
Скопировать код
console.assert(new Date('2023-01-01T12:00:00Z').getTime() === new Date(Date.UTC(2023, 0, 1, 12)).getTime()); 
// Результаты должны совпасть. Если нет, обвините 2022 год за то, что он еще не достиг 2023-го.

Тестирование следует осуществлять до тех пор, пока вы полностью не убедитесь в корректности работы приложения со временными зонами.

Работа с UTC на серверной стороне

При обработке строки с датой и временем на сервере, важно преследовать последовательность действий:

JS
Скопировать код
let serverDate = moment.utc('2023-01-01T12:00:00+02:00').toDate(); 
// Готовы к путешествию во времени?

Использование UTC на сервере поможет избавиться от проблем, связанных с различиями в часовых поясах.

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

  1. Date.UTC() – JavaScript | MDN — Всё, что нужно знать о Date.UTC().
  2. Date.prototype.toISOString() – JavaScript | MDN — Подробно о toISOString.
  3. The definitive guide to JavaScript Dates — Универсальное руководство по работе с объектом Date и часовыми поясами.
  4. ISO 8601 – Wikipedia — Полное описание стандарта ISO 8601.
  5. javascript – How to convert a Date to UTC? – Stack Overflow — Полезные советы от пользователей по конвертации дат в UTC.
  6. Date and time — Взгляд JavaScript.Info на работу с датами и временем.
  7. JavaScript Date UTC() Method — Интерактивный пример того, как метод UTC() может внести изменения в ваш код.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод можно использовать для быстрого преобразования даты в формат UTC?
1 / 5