Форматирование даты в JavaScript: "4 минуты назад" и т.д.

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

Для быстрого вывода результата в формате "время назад" можно воспользоваться JavaScript API Date и функцией timeSince:

function timeSince(date) {
  const periods = [
    { time: 31536000, name: 'год' },
    { time: 2592000, name: 'месяц' },
    { time: 86400, name: 'день' },
    { time: 3600, name: 'час' },
    { time: 60, name: 'минута' },
    { time: 1, name: 'секунда' }
  ];

  let elapsed = Math.floor((Date.now() – date) / 1000);
  for (let { time, name } of periods) {
    if (elapsed >= time) {
      let count = Math.floor(elapsed / time);
      return `${count} ${name}${count > 1 ? 's' : ''} назад`;
    }
  }
}

console.log(timeSince(new Date(Date.now() – 150 * 1000))); // выведет "2 минуты назад"

Данный код вычисляет время, прошедшее с момента указанной даты, конвертируя его из миллисекунд в секунды. Затем выбирается подходящий временной интервал для отображения.

Использование библиотек для точного форматирования времени

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

• Moment.js: Эта библиотека помогает управлять временными интервалами на профессиональном уровне с использованием функции yourdate.fromNow(). Однако, стоит заметить, что поддержка этой библиотеки больше не осуществляется.
• Luxon и Day.js: Это современные альтернативы Moment.js, позволяющие манипулировать датами и временными промежутками; они обладают аналогичными функциональными возможностями, но при этом являются более легковесными и актуальными.
• Intl.RelativeTimeFormat: Отлично подходит для мультимедийных приложений, форматирует время, учитывая языковые особенности и поддерживает даты, идущие в будущее.

Форматирование времени с TypeScript

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

interface TimePeriod {
  time: number;
  name: string;
}

function timeSince(date: Date): string {
  const periods: TimePeriod[] = [
    { time: 31536000, name: 'год' },
    { time: 2592000, name: 'месяц' },
    { time: 86400, name: 'день' },
    { time: 3600, name: 'час' },
    { time: 60, name: 'минута' },
    { time: 1, name: 'секунда' }
  ];
  
  let elapsed: number = Math.floor((Date.now() – date.getTime()) / 1000);
    
  for (let { time, name } of periods) {
    if (elapsed >= time) {
      let count: number = Math.floor(elapsed / time);
      return `${count} ${name}${count > 1 ? 's' : ''} назад`;
    }
  }
  
  return "только что";
}

Особенности работы со временем в JavaScript

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

• Только что: Эта фраза используется для описания событий, которые произошли буквально несколько моментов назад.
• Время в будущем: Встречаются и такие редкие случаи, когда время события получается отрицательным. С такими ситуациями тоже умеют справляться ряд функций и методов.
• Подсчет времени: Считая время, стоит помнить о сложности расчета месяцев и лет, ведь их длительность может быть различной.

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

В качестве примера представьте себе продуктовые этикетки, которые могут обновляться в режиме реального времени, аналогично функции timeSince:

Этикетка Свежести      | Время с Момента Упаковки
--------------------- | ------------------- 
Только что испечено 🍞   | 5 минут назад 🔵   
Можно употреблять 🥚   | 2 дня назад 🟠 
Все еще свежее 🍎 | 1 месяц назад 🟢

Обновление времени: Применение технологий realtime

Если вы в числе тех, кто предпочитает круглосуточное обновление информации:

• Real-time обновления: На помощь придут такие технологии как таймеры или WebSocket, которые помогают обновлять информацию без необходимости перезагружать страницу.
• Производительность и память: Не забывайте про оптимизацию нагрузки на процессор и управление памятью, особенно при работе с большими объемами временных меток.

Нюансы при работе с JavaScript Date

На что следует обратить внимание при работе с JavaScript Date:

• Стандарт ISO 8601: Стандарт, в котором заложено международное соглашение о записи дат и времени, способствуя избеганию недопонимания при обмене данными.
• Неизменяемые даты: Стремитесь работать с датами, которые не подвержены изменениям, используя соответствующие библиотеки, например, Luxon и Day.js.
• Сравнение объектов Date: Будьте аккуратны при сравнении объектов Date, ведь могут возникнуть сложности, связанные с часовыми поясами и переходами на летнее и зимнее время.

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

1. Date – JavaScript | MDN — подробный справочник по работе с объектом Date в JavaScript.
2. Moment.js | Docs — заслужившая хорошую репутацию библиотека для работы с датами и отображением относительного времени.
3. How to format time since "x" minutes ago similar to Stack Exchange sites – Stack Overflow — обсуждение и пример реализации функции "времени назад" на Stack Overflow.
4. date-fns | современная библиотека JavaScript для работы с датами — предлагает различные инструменты по работе с датами, включая форматирование относительного времени.
5. GitHub – hustcc/timeago.js: :clock8: timeago.js — небольшая (2.0 kb) библиотека для форматирования дат "времени назад" — легковесная библиотека для форматирования дат в формате "времени назад".
6. Intl.RelativeTimeFormat – JavaScript | MDN — API для форматирования относительного времени в международных приложениях.