Рубрики
Без рубрики

Как форматировать даты в JavaScript

Автор оригинала: Scott Robinson.

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

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

Moment.js.js.

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

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

> 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.js: лучшая библиотека даты для JavaScript.

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

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

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

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

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

С .Format () Способ, вы можете построить строку токенов, которые относятся к конкретному компоненту даты (например, день, месяц, минута или AM/PM).

Например, скажем, вы просто хотите увидеть простое представление текущего времени (часы: минуты: секунды AM/PM). Мы можем достичь этого с:

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

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

  • [Время] : Все текст в скобках ( [] ) игнорируется парсером
  • H : Часы (без ведущих нуля)
  • мм : Минуты (с ведущим нулем)
  • SS : Секунды (с ведущим нулем)
  • А : Ante/Post Meridiem (AM/PM)

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

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

  • М : Номер месяца (1, 2, 3 … 12)
  • МО : Номер месяца с порядковым показателем (1-й, 2-й, 3-й … 12)
  • Мм : Номер месяца с ведущим ноль (01, 02, 03 … 12)
  • Ммм : Месяц Аббревиатура (Ян, Фев, Мар … декабрь)
  • Мммм : Имя месяца (январь, февраль, март … декабрь)

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

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

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

Пакет DateFormat

DateFormat Помимо момента в том, что его форматы даты используют строки токена, но он делает это немного по-другому. Используя Версия браузера datetime это расширит Дата объект, чтобы иметь .Format () Метод, который работает так же, как момент формата момента:

Браузерная сторона

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

С Node.js версия это работает немного по-другому. Вместо продления Дата. Прототип включить Формат () Вы должны использовать DateFormat как сам метод и пропустите ваш Дата объект:

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 кб, когда они заминированы и Gzed. Неплохо, учитывая пользу, это обеспечивает.

Date.tolocaleString ()

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

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

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

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

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'

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

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

  • будний день : узкие, короткие, длинные
  • Год : числовая, 2-значная
  • месяц : числовые, 2-значные, узкие, короткие, длинные
  • день : числовая, 2-значная
  • час : числовая, 2-значная
  • минута : числовая, 2-значная
  • Второй : числовая, 2-значная

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

Заключение

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

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