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

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

Moment.js

Moment.js считается лучшей библиотекой времени и даты для JavaScript, и не зря. Он чрезвычайно прост в использовании, хорошо документирован и имеет размер менее 20 КБ (минимизированный, сжатый с помощью gzip). Он работает как с Node.js, так и с JavaScript на стороне браузера, что позволяет использовать его во всей кодовой базе. Это довольно большой плюс, учитывая, что вам нужно изучить только одну библиотеку даты и времени, независимо от того, программируете ли вы переднюю или внутреннюю часть.

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

 > const moment = require('moment'); 
 > let m = moment(); // Create a new date, which defaults to the current time 
 > m = moment('2016-08-02 15:37'); // Parse an ISO 8601 date string 
 > m.month(9); // Set month to October - months are 0-indexed! 

Существует довольно много способов создания, синтаксического анализа и управления датами с помощью Moment, которые мы не будем рассматривать здесь полностью. Чтобы получить хороший обзор библиотеки в целом, ознакомьтесь с нашей статьей Moment.js: A Better Date Library for JavaScript .

Теперь, когда вы примерно знаете, как использовать Moment для создания дат и управления ими, давайте посмотрим, как использовать его для форматирования дат в виде строк.

Самый простой способ начать - использовать метод .format() без аргументов:

 > moment().format(); 
 '2016-08-02T15:44:09-05:00' 

Это распечатает дату, отформатированную в стандарте ISO 8601 . Однако, если вы не печатаете дату для сохранения в JSON или чем-то подобном, вы, вероятно, не хотите, чтобы ваши пользователи имели дело с датами, которые выглядят так. Используя токены формата , даты можно настроить по своему вкусу.

Если вы пришли к JavaScript с другого языка, такого как Java или Python, вы, вероятно, знакомы с концепцией токенов форматирования даты. Хотя, небольшое предупреждение, не думайте, что токены из другого языка точно такие же, как те, что используются в Moment. Вам следует сначала проконсультироваться с документацией, так как существует довольно много различий.

С помощью .format() вы можете создать строку токенов, которые относятся к определенному компоненту даты (например, день, месяц, минута или am / pm).

Например, предположим, что вы просто хотите увидеть простое представление текущего времени (часы: минуты: секунды до / после полудня). Этого можно добиться с помощью:

 > moment().format('[The time is] h:mm:ss a'); 
 'The time is 4:47:09 pm' 

Вот разбивка токенов, которые вы видите выше:

• [The time is] : весь текст в скобках ( [] ) игнорируется анализатором.
• h : часы (без нуля в начале)
• mm : минуты (с нулем в начале)
• ss : секунды (с нулем в начале)
• a : до / после меридиема (утра / вечера)

Весь текст, заключенный в квадратные скобки и не буквенно-цифровые символы, такие как символы двоеточия (':'), анализатор игнорирует. Таким образом вы можете добавить форматирование к своим строкам.

Строки формата могут быть немного сложнее, чем в приведенном выше примере. Например, если вы хотите распечатать месяц, есть 5 способов сделать это:

• M : номер месяца (1, 2, 3 ... 12)
• Mo : номер месяца с порядковым указателем (1-й, 2-й, 3-й ... 12-й)
• MM : номер месяца с нулем в начале (01, 02, 03 ... 12)
• MMM : Аббревиатура месяца (январь, февраль, март ... декабрь)
• MMMM : Название месяца (январь, февраль, март ... декабрь)

Список вариантов становится намного длиннее, если учесть множество вариантов дня месяца, дня недели, часа, года и т. Д. Как только вы изучите концепцию и немного поиграетесь с ней, остальное станет проще. Хотя токены можно легко забыть, поэтому держите справочник под рукой при программировании.

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

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

Пакет dateformat

dateformat похож на Moment в том, что форматирует даты с помощью строк токенов, но делает это немного иначе. Используя версию datetime браузера, он расширит объект Date .format() метод .format (), который работает так же, как метод форматирования Moment:

Со стороны браузера

 today = new Date(); 
 today.format('dd-m-yy'); // Returns '02-8-16' 

В версии для Node.js все работает немного иначе. Вместо расширения Date.prototype для включения format() вы должны использовать dateformat как сам метод и передать свой объект Date

Node.js

 > const dateformat = require('dateformat'); 
 > let now = new Date(); 
 > dateformat(now, 'dddd, mmmm dS, yyyy, h:MM:ss TT'); 
 'Tuesday, August 2nd, 2016, 5:45:19 PM' 

Помимо того, как вы вызываете метод форматирования, все форматирование токенов одинаково для версий браузера и Node.js.

Еще одно преимущество использования dateformat - это именованные форматы. Хотя у каждого свои предпочтения в отношении форматирования дат, на самом деле существует лишь несколько различных форматов, которые использует большинство людей. Эта библиотека направлена на то, чтобы избежать дублирования работы, предоставляя общие форматы даты по имени:

Node.js

 > const dateformat = require('dateformat'); 
 > let now = new Date(); 
 > dateformat(now, 'fullDate'); 
 'Tuesday, August 2, 2016' 
 > dateformat(now, 'longTime'); 
 '5:45:19 PM CDT' 

Доступно более 10 из этих названных форматов. Ознакомьтесь с документацией (ссылка выше), чтобы увидеть полный список.

Вы также можете найти эту библиотеку более подходящей благодаря своему небольшому размеру. Размер файла после минификации и сжатия составляет всего 1,2 КБ. Неплохо, учитывая преимущества, которые он дает.

Date.toLocaleString ()

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

Использование встроенного Date.toLocaleString() - это способ форматирования даты и времени без зависимости. Однако он не поддерживается в Safari и поддерживается только в более поздних версиях других основных браузеров, поэтому в конце концов это может быть не лучшим выбором (если вы не используете Node). Во всяком случае, давайте посмотрим, как это работает.

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

Например, вместо mm для 2-значного часа мы использовали бы {hour: '2-digit'} . То же самое касается всех других компонентов даты, таких как день недели, год, месяц, день и т. Д.

 let now = new Date(); 
 
 let options = { 
 weekday: 'long', 
 year: 'numeric', 
 month: 'short', 
 day: 'numeric', 
 hour: '2-digit', 
 minute: '2-digit' 
 }; 
 
 now.toLocaleString('en-us', options); // Returns 'Tuesday, Aug 2, 2016, 6:03 PM' 

Как видите, использование .toLocaleString() намного более подробное, чем другие методы форматирования, которые мы видели в этой статье.

Вот некоторые из наиболее распространенных компонентов даты, которые вы можете установить в объекте параметров (и их возможные значения):

• weekday : узкий, короткий, длинный
• year : числовой, 2-значный
• month : числовой, двухзначный, узкий, короткий, длинный
• day : числовой, 2-значный
• hour : числовой, 2-значный
• minute : числовые, 2-значные
• second : числовой, 2-значный

Тот же эффект форматирования может быть достигнут с помощью .toLocaleString() , но это требует немного больше усилий.

Заключение

В JavaScript / Node.js есть довольно много библиотек, которые могут форматировать строки даты за вас, но в этой статье я показал лишь несколько наиболее популярных методов. У каждого есть свои преимущества, поэтому вам следует оценить, какой из них лучше всего подходит для вас.

Какую библиотеку даты и времени вы предпочитаете? Есть ли что-то, что не должно было быть здесь упомянуто? Дайте нам знать об этом в комментариях!