Преобразование Unix timestamp в JavaScript: методы и оптимизации

Для кого эта статья:

• Начинающие веб-разработчики, изучающие JavaScript и работу с датами
• Опытные разработчики, желающие оптимизировать работу с временными данными

• Специалисты по интеграции API, которым необходимо преобразование временных меток для пользовательских интерфейсов

  Работа с Unix timestamp — это как рукопожатие между бэкендом и фронтендом. API дарит вам число 1639553700, а пользователь ждет «15 декабря 2021, 12:35». Разрыв между машинным языком и человеческим восприятием может выглядеть устрашающе, особенно когда дело касается разных часовых поясов и форматов. Но не беспокойтесь — JavaScript предлагает элегантные решения для трансформации этих загадочных чисел в понятные даты, и я покажу, как это делать эффективно и с минимальными усилиями. 🕒

Работа с датами и временем — одна из базовых компетенций веб-разработчика. На курсе Обучение веб-разработке от Skypro вы не только освоите преобразование Unix-времени, но и погрузитесь во все тонкости фронтенд-разработки: от основ JavaScript до работы с современными фреймворками. Наши студенты создают реальные проекты с нуля, включая интеграцию с API и обработку временных данных — навыки, которые мгновенно сделают вас ценным специалистом на рынке.

Что такое Unix-время и почему его нужно преобразовывать

Unix-время (или Unix timestamp) — это система исчисления времени, которая считает количество секунд, прошедших с полуночи 1 января 1970 года по UTC. Это своеобразный "день сотворения мира" в компьютерной вселенной, точка отсчета, которую договорились использовать инженеры.

Почему именно эта дата? Просто так исторически сложилось — операционная система Unix была разработана примерно в это время, и инженеры выбрали этот момент как "эпоху" (epoch) для своей системы исчисления.

Существует несколько веских причин, почему Unix-время так популярно в программировании:

• Однозначность: одно число представляет точный момент времени без путаницы с форматами и часовыми поясами
• Компактность: для хранения требуется только одно целое число
• Простота вычислений: легко добавлять и вычитать интервалы времени
• Универсальность: понимается всеми компьютерными системами

Но несмотря на все преимущества для машин, для людей Unix-время абсолютно нечитаемо. Кто скажет, что означает число 1643734800? А ведь это всего лишь 1 февраля 2022 года. Отсюда и возникает необходимость преобразовывать его в понятный человеку формат.

Дмитрий, senior frontend-разработчик Столкнулся с Unix-временем еще в начале своей карьеры, когда подключал API платежной системы. Бэкенд возвращал временные метки для всех транзакций, а на фронте нужно было показывать пользователям понятные даты. Первое решение было наивным — я написал собственную функцию конвертации, которая учитывала все високосные годы, месяцы разной длины и прочие календарные нюансы. Спустя 200 строк кода я понял, что изобретаю велосипед, и обратился к встроенным методам JavaScript. Конструктор Date превратил мой монстр в элегантную однострочную функцию. Главный урок: никогда не пытайтесь самостоятельно реализовать то, что уже встроено в язык — особенно когда речь идет о времени и датах.

Базовые способы конвертации Unix timestamp в JavaScript

JavaScript предлагает несколько встроенных способов преобразования Unix-времени в читаемый формат. Рассмотрим базовые подходы, начиная с самого простого.

Важно понимать, что в JavaScript конструктор Date ожидает миллисекунды, а не секунды, как в классическом Unix-времени. Поэтому не забывайте умножать timestamp на 1000.

Метод 1: Использование конструктора Date

Самый прямолинейный подход — создать объект Date на основе Unix-времени:

// Unix-время в секундах (например, 1 января 2022 года)
const unixTimestamp = 1640995200;

// Создание объекта Date (не забываем умножить на 1000)
const dateObject = new Date(unixTimestamp * 1000);

// Вывод в стандартном формате
console.log(dateObject.toString());
// "Sat Jan 01 2022 03:00:00 GMT+0300 (Moscow Standard Time)"

Этот метод дает нам объект Date, с которым можно дальше работать, используя его встроенные методы.

Метод 2: Использование toLocaleString()

Для более гибкого форматирования можно использовать метод toLocaleString():

const unixTimestamp = 1640995200;
const dateObject = new Date(unixTimestamp * 1000);

// Форматирование с учетом локали
const readableDate = dateObject.toLocaleString('ru-RU', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});

console.log(readableDate);
// "1 января 2022 г., 03:00"

Метод toLocaleString() особенно полезен, когда нужно учитывать языковые и региональные особенности отображения дат. 🌐

Метод 3: Использование отдельных методов для извлечения компонентов

Иногда требуется больше контроля над форматированием. В этом случае можно извлечь отдельные компоненты даты:

const unixTimestamp = 1640995200;
const date = new Date(unixTimestamp * 1000);

const year = date.getFullYear();
const month = date.getMonth() + 1; // Месяцы начинаются с 0
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();

// Форматируем с ведущими нулями где нужно
const formattedDate = `${day.toString().padStart(2, '0')}.${month.toString().padStart(2, '0')}.${year} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;

console.log(formattedDate);
// "01.01.2022 03:00"

Такой подход дает максимальную гибкость, но требует больше кода.

Форматирование даты и времени после преобразования

После преобразования Unix-времени в объект Date следующий шаг — форматирование результата в удобочитаемом виде. JavaScript предоставляет несколько методов для этого, каждый со своими особенностями.

Интернационализация с Intl.DateTimeFormat

API интернационализации (Intl) предоставляет мощные инструменты для форматирования дат с учетом локали:

const unixTimestamp = 1640995200;
const date = new Date(unixTimestamp * 1000);

const formatter = new Intl.DateTimeFormat('ru-RU', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short'
});

console.log(formatter.format(date));
// "суббота, 1 января 2022 г., 3:00:00 GMT+3"

Преимущество этого метода — богатые возможности локализации и форматирования. 🌍

Пользовательские форматы с шаблонными строками

Для создания собственных форматов удобно использовать шаблонные строки и методы объекта Date:

const unixTimestamp = 1640995200;
const date = new Date(unixTimestamp * 1000);

const months = [
'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'
];

const formatted = `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()} г., ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;

console.log(formatted);
// "1 января 2022 г., 3:00"

Этот подход дает полный контроль над форматом, но требует ручной локализации.

Относительное форматирование

Иногда пользователю удобнее видеть время в относительном формате — «5 минут назад», «вчера» и т.д.

function getRelativeTimeString(timestamp) {
const now = new Date();
const date = new Date(timestamp * 1000);
const diff = Math.floor((now – date) / 1000); // разница в секундах

if (diff < 60) return 'только что';
if (diff < 3600) return `${Math.floor(diff / 60)} минут назад`;
if (diff < 86400) return `${Math.floor(diff / 3600)} часов назад`;
if (diff < 2592000) return `${Math.floor(diff / 86400)} дней назад`;

// Для более старых дат возвращаем полную дату
return date.toLocaleDateString('ru-RU');
}

console.log(getRelativeTimeString(Date.now() / 1000 – 3600)); // "1 часов назад"

Такой формат особенно полезен для социальных приложений и комментариев.

Учет часовых поясов

При работе с датами всегда нужно помнить о часовых поясах. Unix-время по определению представлено в UTC, но пользователи находятся в разных часовых поясах.

• getUTC*() методы возвращают компоненты даты в UTC
• get*() методы возвращают компоненты даты в локальном часовом поясе пользователя
• Метод toLocaleString() по умолчанию использует локальный часовой пояс

Выбор правильного подхода зависит от требований проекта и целевой аудитории.

Алексей, fullstack-разработчик Разрабатывал приложение для международной команды, где пользователи находились в разных часовых поясах. Все шло гладко, пока один клиент не сообщил об ошибке: встречи, запланированные на утро, отображались как вечерние, что приводило к путанице. Оказалось, я использовал локальное время сервера для формирования дат вместо учета часового пояса пользователя.

Решение пришло в виде двойного подхода: на сервере все даты хранились в Unix-формате (UTC), а клиентский код преобразовывал их с учетом часового пояса браузера. Для особо важных случаев мы добавили явное указание часового пояса рядом с датой. После этой доработки путаница прекратилась, а я навсегда запомнил: когда работаешь с временем, всегда явно указывай, в каком часовом поясе оно представлено.

Использование библиотек для работы с Unix-временем

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

Moment.js: классика жанра

Долгое время moment.js была стандартом де-факто для работы с датами в JavaScript:

// Установка: npm install moment

const moment = require('moment');
moment.locale('ru'); // Установка русской локали

const unixTimestamp = 1640995200;
const formattedDate = moment.unix(unixTimestamp).format('DD MMMM YYYY, HH:mm');

console.log(formattedDate); 
// "01 января 2022, 03:00"

// Относительное время
console.log(moment.unix(unixTimestamp).fromNow());
// "2 года назад" (зависит от текущей даты)

Преимущества moment.js — богатая функциональность и отличная локализация. Однако сейчас библиотека находится в режиме поддержки (без активной разработки), и команда рекомендует переходить на более современные решения. 📦

date-fns: современная альтернатива

date-fns — модульная библиотека, которая следует функциональному подходу и лучше оптимизирована для tree-shaking:

// Установка: npm install date-fns

const { fromUnixTime, format } = require('date-fns');
const { ru } = require('date-fns/locale');

const unixTimestamp = 1640995200;
const date = fromUnixTime(unixTimestamp);

const formatted = format(date, 'dd MMMM yyyy, HH:mm', { locale: ru });
console.log(formatted); 
// "01 января 2022, 03:00"

Преимущества date-fns — модульность и отсутствие мутаций (immutability), что делает её хорошим выбором для современных приложений.

Luxon: наследник Moment.js

Luxon разработан одним из создателей moment.js и учитывает недостатки своего предшественника:

// Установка: npm install luxon

const { DateTime } = require('luxon');

const unixTimestamp = 1640995200;
const dt = DateTime.fromSeconds(unixTimestamp).setLocale('ru');

console.log(dt.toFormat('dd MMMM yyyy, HH:mm'));
// "01 января 2022, 03:00"

// Относительное время
console.log(dt.toRelative());
// "2 года назад" (зависит от текущей даты)

Luxon имеет более современный API, лучше работает с часовыми поясами и более эффективен с точки зрения размера бандла.

Day.js: легковесная альтернатива

Day.js — минималистичная библиотека с API, похожим на moment.js, но с гораздо меньшим размером:

// Установка: npm install dayjs

const dayjs = require('dayjs');
require('dayjs/locale/ru'); // Подключение русской локали
const relativeTime = require('dayjs/plugin/relativeTime');
dayjs.extend(relativeTime);
dayjs.locale('ru');

const unixTimestamp = 1640995200;
const formattedDate = dayjs.unix(unixTimestamp).format('DD MMMM YYYY, HH:mm');

console.log(formattedDate);
// "01 января 2022, 03:00"

console.log(dayjs.unix(unixTimestamp).fromNow());
// "2 года назад"

Если вам нужна легковесная библиотека с хорошей совместимостью с moment.js, Day.js — отличный выбор.

Выбор библиотеки зависит от конкретных требований проекта: размера бандла, необходимых функций и совместимости с существующим кодом.

Оптимизация кода при преобразовании Unix-времени

При работе с Unix-временем в реальных приложениях важно не только правильно преобразовать его, но и сделать это эффективно. Рассмотрим несколько подходов к оптимизации такого кода.

Кеширование результатов форматирования

Если вам нужно отображать одну и ту же дату в разных местах приложения, имеет смысл кешировать результаты форматирования:

const dateFormatCache = new Map();

function formatUnixTimestamp(timestamp, format) {
const cacheKey = `${timestamp}_${format}`;

if (dateFormatCache.has(cacheKey)) {
return dateFormatCache.get(cacheKey);
}

const date = new Date(timestamp * 1000);
let result;

// Применяем нужный формат
if (format === 'full') {
result = date.toLocaleString('ru-RU');
} else if (format === 'date') {
result = date.toLocaleDateString('ru-RU');
} else if (format === 'time') {
result = date.toLocaleTimeString('ru-RU');
}

// Сохраняем в кеш и возвращаем результат
dateFormatCache.set(cacheKey, result);
return result;
}

Этот подход особенно полезен в компонентах, которые часто перерисовываются, например, в списках или таблицах. ⚡

Оптимизация с помощью мемоизации

Для функциональных компонентов React или Vue можно использовать мемоизацию:

// React пример с useMemo
import { useMemo } from 'react';

function TimestampDisplay({ timestamp, format }) {
const formattedDate = useMemo(() => {
const date = new Date(timestamp * 1000);
return date.toLocaleString('ru-RU');
}, [timestamp, format]);

return <span>{formattedDate}</span>;
}

Выборочное использование библиотек

При использовании библиотек важно импортировать только необходимые функции, чтобы не увеличивать размер бандла:

// Вместо этого
import moment from 'moment';

// Используйте это
import { fromUnixTime, format } from 'date-fns';

// Или с date-fns/esm для еще лучшего tree-shaking
import fromUnixTime from 'date-fns/esm/fromUnixTime';
import format from 'date-fns/esm/format';

Использование единой функции-утилиты

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

// dateUtils.js
export function formatUnixTime(timestamp, type = 'default') {
if (!timestamp) return '';

const date = new Date(timestamp * 1000);

switch (type) {
case 'short':
return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;

case 'time':
return date.toLocaleTimeString('ru-RU', { 
hour: '2-digit', 
minute: '2-digit' 
});

case 'datetime':
return `${date.toLocaleDateString('ru-RU')} ${date.toLocaleTimeString('ru-RU', { 
hour: '2-digit', 
minute: '2-digit' 
})}`;

case 'relative':
return getRelativeTimeString(timestamp);

case 'default':
default:
return date.toLocaleString('ru-RU');
}
}

function getRelativeTimeString(timestamp) {
// Реализация относительного форматирования
// ...
}

Такая централизация упрощает поддержку кода и изменение форматов при необходимости.

Оптимизация для интернационализации

Если ваше приложение поддерживает несколько языков, оптимизируйте работу с Intl.DateTimeFormat:

// Кешируем форматтеры для разных локалей
const formatters = {};

function getFormatter(locale, options) {
const key = `${locale}_${JSON.stringify(options)}`;

if (!formatters[key]) {
formatters[key] = new Intl.DateTimeFormat(locale, options);
}

return formatters[key];
}

function formatTimestamp(timestamp, locale = 'ru-RU') {
const date = new Date(timestamp * 1000);
const formatter = getFormatter(locale, { 
year: 'numeric', 
month: 'long', 
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});

return formatter.format(date);
}

Это позволяет избежать создания новых экземпляров форматтера при каждом вызове функции.

• Используйте нативные методы вместо библиотек для простых случаев
• Минимизируйте зависимости от внешних библиотек, если не используете их широкую функциональность
• Форматируйте даты один раз и сохраняйте результат, а не форматируйте при каждом рендеринге
• Предварительно вычисляйте часто используемые форматы, особенно если они не меняются
• Учитывайте производительность при работе со списками, содержащими множество временных меток

Преобразование Unix-времени в JavaScript — задача, которую каждый разработчик решает многократно на протяжении карьеры. Изучив различные методы — от нативных функций Date до специализированных библиотек — вы теперь можете выбрать оптимальное решение для любого проекта. Помните: правильный выбор инструмента зависит от контекста. Для простых случаев достаточно встроенных методов JavaScript, а для сложных сценариев международных приложений стоит обратиться к современным библиотекам, таким как date-fns или Luxon. Независимо от выбора, всегда учитывайте производительность, размер бандла и удобство сопровождения кода. Время — критический аспект пользовательского опыта, и теперь у вас есть все необходимое, чтобы представлять его правильно.