Конвертация секунд в формат времени hh:mm:ss на JavaScript

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

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

const toTimeString = (seconds) => new Date(seconds * 1000).toISOString().substr(11, 8);

Цей метод принимает количество секунд, конвертирует их в миллисекунды, использует ISO формат даты и извлекает из него временную часть. Вызов toTimeString(3661) вернёт вам значение "01:01:01".

Разбор магии объекта Date

Возможно, функция, представленная выше, кажется вам волшебной. Давайте разберём её. Главным инструментом в ней является объект Date в JavaScript:

let time = new Date(0); // Магический момент начала времени!
time.setSeconds(seconds); // Устанавливаем время в секундах
let timeString = time.toISOString(); // Конвертируем в универсальное время

Манипулируя временем, мы игнорируем все часовые пояса. Время в формате ISO всегда указывается по координированному всемирному времени UTC, благодаря чему результат не зависит от часового пояса.

Учет крайних условий

Обработка отрицательных секунд

Однако при работе с отрицательными значениями наша исходная функция не справится. Для их корректной обработки можно добавить условие проверки знака:

const toSignedTimeString = (seconds) => {
  const sign = seconds < 0 ? "-" : "";
  return sign + new Date(Math.abs(seconds) * 1000).toISOString().substr(11, 8);
};

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

Преобразование времени меньше часа

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

const toHmsTimeString = (seconds) => {
  const date = new Date(seconds * 1000);
  return [
    date.getUTCHours(),
    date.getUTCMinutes(),
    date.getUTCSeconds(),
  ].map(val => String(val).padStart(2, '0')).join(':').replace(/^00:/, '');
};

В этой функции replace помогает убрать ненужный ноль.

Разбиение и форматирование: улучшение с помощью вспомогательных функций

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

const toCustomTimeString = (seconds) => {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const secondsPart = (seconds % 60).toString().padStart(2, '0');
  return `${hours}:${minutes}:${secondsPart}`;
};

Такой подход позволяет нам математически вычислить часы, минуты и секунды, а затем соединить их в аккуратный формат чч:мм:сс. А padStart гарантирует наличие нужных нулей.

Продвинутые методы работы со строками времени

Обработка значений, превышающих сутки

Если секунды превышают сутки (86400 секунд), toISOString больше не поможет. Но можно посчитать часы так:

const toLongDurationString = (seconds) => {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const date = new Date(seconds % 86400 * 1000);
  return `${hours}:${date.toISOString().substr(14, 5)}`;
};

Проверка конкретного элемента времени

Иногда требуется проверить только определённую часть времени. С помощью регулярных выражений это делается довольно просто:

const extractTimePart = (timeString, part) => {
  const parts = {
    часы: /^(\d{2})/,
    минуты: /:(\d{2}):/,
    секунды: /:(\d{2})$/,
  };
  const match = timeString.match(parts[part]);
  return match ? match[1] : '00';
}; // Мне нужны только часы!

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

Превращение секунд в отформатированное время можно представить как подготовку праздничного обеда. Сырьё (секунды) поступает на кухню, после всех этапов обработки вы получаете готовое блюдо (результат):

 Сначала у нас сырые секунды (входящие данные)
 На следующем этапе появляются минуты (преобразование)
 И в конце обработки получаются часы (окончательное преобразование)

Время на приготовление: 3665 секунд

| Этап               | Кулинарное действие | Итог               |
| ------------------ | -------------------- | ------------------ |
| Сырые секунды      | 3665 % 60            | 05 секунд          |
| Минуты             | (3665 / 60) % 60     | 01 минута          |
| Часы               | 3665 / 3600          | 01 час             |

И вот ваш готовый обед — 01:01:05.

Отладка

Обязательно протестируйте ваши функции, чтобы проверить их на наличие ошибок и недостатков:

console.assert(toTimeString(3665) === "01:01:05", "Неудачный тест для 3665 секунд");
console.assert(toTimeString(-3665) === "-01:01:05", "Непрошедший тест для -3665 секунд");
console.assert(toTimeString(90061) === "25:01:01", "Тестовые данные для 90061 секунд не прошли проверку");
// Не забывайте добавлять крайние значения в ваши тесты!

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

1. Как перевести секунды в формат HH-MM-SS с помощью JavaScript? – Stack Overflow — обзор методов форматирования на Stack Overflow.
2. Date.prototype.toISOString() – JavaScript | MDN — справочник по toISOString() на MDN.
3. String.prototype.padStart() – JavaScript | MDN — описание padStart на MDN.
4. Справочник по объекту Date в JavaScript — основная информация про объект Date.
5. Javascript – Преобразование секунд в время (чч:мм:сс,мс) -> sec2time(593.685038) превращается в 00:09:53,685 · GitHub — полезные советы по преобразованию секунд на GitHub.
6. Всё, что нужно знать о работе с датами в JavaScript | CSS-Tricks — подробное руководство по работе с объектом Date в JavaScript.
7. Как добавить ведущие нули к числу в JavaScript – Stack Overflow — обсуждение различных способов добавления ведущих нулей к числам в JavaScript.