Упрощение преобразования часовых поясов в JavaScript: как без усилий преобразовать время UTC в местное время

Введение

В современной веб-разработке работа с часовыми поясами является распространенным требованием, особенно при обработке данных о дате и времени, полученных с серверов, в формате всемирного координированного времени (UTC). В этой статье мы рассмотрим, как преобразовать время UTC в местное время с помощью JavaScript на стороне клиента. Мы шаг за шагом углубимся в процесс и предоставим практический пример, чтобы проиллюстрировать концепцию.

Понимание проблемы

UTC (Всемирное координированное время) — это стандартизированное представление времени, используемое во всем мире. Однако отображение даты и времени в формате UTC для конечных пользователей может сбивать с толку и быть неудобным для пользователя. Следовательно, преобразование времени UTC в местный часовой пояс пользователя необходимо для предоставления значимой информации.

Пошаговый процесс преобразования:

Давайте разобьем процесс преобразования времени UTC в местное время на три ключевых этапа:

Шаг 1: Извлеките дату UTC

Первый шаг — извлечь дату UTC из данного источника. Мы будем работать со строкой даты UTC, такой как «2023–06–29T16:45:06.387Z», и удалим часть миллисекунд, поскольку объект Date JavaScript не поддерживает этот формат.

const utcDataString = "2023-06-29T16:45:06.387Z";
const utcDateWithoutMillis =utcDateString.slice(0,-5) + "Z";
const utcDate = new Date(utcDateWithoutMillis);

console.log("UTC Date:", utcDate.toISOString()):

Выход консоли:

UTC Date: 2023–06–29T16:45:06.387Z

Шаг 2: Получите смещение часового пояса

Далее нам нужно определить смещение часового пояса между UTC и местным временем пользователя. Смещение выражается в минутах, представляя разницу часовых поясов.

const offsetMinutes = utcDate.getTimezoneOffset();

console.log(“Time Zone Offset (minutes):”, offsetMinutes);```

Выход консоли:

Time Zone Offset (minutes): -180

Шаг 3: Рассчитайте местное время

Теперь, когда у нас есть дата в формате UTC и смещение часового пояса, мы можем рассчитать местное время, вычитая смещение из времени в формате UTC.

const localTime = new Date(utcDate.getTime() — offsetMinutes * 60 * 1000);

console.log(“Local Time:”, localTime.toISOString());

Выход консоли:

Local Time: 2023–06–29T19:45:06.387Z

Местное время 2023–06–29T19:45:06.387Z получается путем добавления смещения -180 минут ко времени UTC.

Практический пример:

Давайте соберем все вместе и продемонстрируем процесс преобразования, используя простой файл HTML и код JavaScript. В этом примере мы будем отображать UTC и местное время в браузере.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
 <title>UTC to Local Time Conversion</title>
</head>
<body>
 <div id=”utcTime”>2023–06–29T16:45:06.387Z</div>
 <div id=”localTime”></div>
 <script src=”script.js”></script>
</body>
</html>

JavaScript

// script.js

// Step 1:
const utcDateString = "2023-06-29T16:45:06.387Z"; // UTC date string (example)
const utcDateWithoutMillis = utcDateString.slice(0, -5) + "Z";
const utcDate = new Date(utcDateWithoutMillis);
console.log("UTC Date:", utcDate.toISOString());

// Step 2:
const offsetMinutes = utcDate.getTimezoneOffset();
console.log("Time Zone Offset (minutes):", offsetMinutes);

// Step 3:
const localTime = new Date(utcDate.getTime() - offsetMinutes * 60 * 1000);
console.log("Local Time:", localTime.toISOString());

// Display Local Time
const localTimeString = localTime.toLocaleString();
document.getElementById('localTime').textContent = `Local Time: ${localTimeString}`;

Когда вы откроете файл index.html в браузере и просмотрите консоль, вы увидите дату в формате UTC, смещение часового пояса и местное время. Местное время, отображаемое на веб-странице, будет соответствовать местному часовому поясу пользователя.

Исход:

Заключение:

Обработка часовых поясов и преобразование времени UTC в местное время являются важным аспектом веб-разработки при работе с датами и временем. Поняв процесс, описанный в этой статье, вы сможете убедиться, что ваши веб-приложения отображают информацию о времени в удобной для пользователя форме с учетом местного часового пояса каждого пользователя. Помните, что JavaScript выполняет это преобразование на стороне клиента, что делает его удобным для пользователей по всему миру.