Изучите даты и время JavaScript с Moment.js: полное руководство

Статья Изучайте даты и время JavaScript с помощью Moment.js: полное руководство была впервые опубликована в понедельник, 2 января 2023 года, в Блоге технических разработчиков. Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!

Вы устали от работы со встроенными функциями даты и времени в JavaScript и ищете лучший способ обработки даты и времени в своих проектах? Не смотрите дальше Moment.js!

Moment.js — популярная библиотека JavaScript, упрощающая работу с датами и временем в JavaScript. С Moment.js вы можете легко анализировать, проверять, манипулировать и отображать даты и время. Это обязательный инструмент в наборе инструментов любого разработчика JavaScript.

В этом уроке мы рассмотрим 10 основных вещей, которые вам нужно знать, чтобы начать работу с Moment.js и начать использовать его в полной мере в своих проектах.

Монтаж

Первое, что вам нужно сделать, чтобы начать использовать Moment.js, — это установить его в свой проект. Есть несколько разных способов сделать это, в зависимости от того, как вы хотите его использовать.

Один из вариантов — загрузить файл библиотеки Moment.js и включить его в свой проект с помощью тега script:

<script src="/path/to/moment.js"></script>

В качестве альтернативы вы можете использовать менеджер пакетов, такой как npm или Yarn, для установки Moment.js в качестве зависимости в вашем проекте:

npm install moment
yarn add moment

После того, как вы установили Moment.js, вы готовы начать использовать его в своем проекте.

Даты разбора

Одна из самых распространенных вещей, которые вам нужно делать с Moment.js, — это парсить даты. Это означает, что вы берете строковое представление даты и времени и превращаете его в объект даты JavaScript, с которым вы можете работать.

Чтобы проанализировать дату с помощью Moment.js, вы можете использовать функцию moment() и передать ей строковое представление даты, которую вы хотите проанализировать. Например:

const date = moment('2022-01-01');

Отображение дат

Если у вас есть моментальный объект, вы можете использовать его для отображения даты в любом удобном для вас формате. Чтобы отобразить объект момента в виде строки, вы можете использовать метод format() и передать ему строку, указав желаемый формат.

Вот несколько примеров использования метода format():

moment().format('MMMM Do YYYY, h:mm:ss a'); // "January 1st 2022, 12:00:00 am"
moment().format('dddd');                    // "Monday"
moment().format("MMM Do YY");               // "Jan 1st 22"
moment().format('YYYY [escaped] YYYY');     // "2022 escaped 2022"
moment().format();                          // "2022-01-01T00:00:00-05:00"

Вы можете использовать различные токены, чтобы указать точный формат, который вы хотите. Полный список доступных токенов см. в Документации Moment.js.

Манипулирование датами

Одной из самых мощных функций Moment.js является возможность легко манипулировать датами. Вы можете использовать методы add() и subtract(), чтобы добавить или вычесть время из объекта момента. Например:

moment().add(7, 'days');       // adds 7 days to the current date
moment().subtract(1, 'years'); // subtracts 1 year from the current date

Вы также можете использовать методы startOf() и endOf(), чтобы установить объект момента на начало или конец определенной единицы времени. Например:

moment().startOf('day'); // sets the time to 00:00:00 for the current day

Продолжительность

Помимо работы с датами и временем, Moment.js также включает объект длительности, который можно использовать для представления продолжительности времени. Чтобы создать объект длительности, вы можете использовать функцию duration() и передать ей количество миллисекунд.

Вот пример создания объекта продолжительности и работы с ним:

const duration = moment.duration(100000);

duration.asMilliseconds(); // 100000
duration.asSeconds();      // 100
duration.asMinutes();      // 1.6666666666666667

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

Методы запроса

Moment.js включает в себя множество методов запроса, которые вы можете использовать для проверки значения объекта момента. Например, вы можете использовать методы isBefore() и isAfter(), чтобы проверить, возникает ли объект момента до или после другого объекта момента:

moment().isBefore('2022-01-02'); // true
moment().isAfter('2022-01-02');  // false

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

moment().isSame('2022-01-01'); // true

Локализация

Одна из замечательных особенностей Moment.js заключается в том, что он поддерживает локализацию, что означает, что вы можете использовать его для отображения даты и времени на разных языках и в разных форматах. Чтобы использовать локализацию с Moment.js, вам необходимо включить соответствующий файл локали в свой проект и использовать метод locale() для установки локали.

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

moment.locale('fr');

Если установлена французская локаль, метод format() будет автоматически отображать дату и время в соответствующем французском формате.

Часовые пояса

Помимо локализации, Moment.js также поддерживает работу с часовыми поясами. Для работы с часовыми поясами вам необходимо включить в свой проект библиотеку moment-timezone и использовать метод tz() для указания часового пояса, с которым вы хотите работать.

Например, вот как можно установить часовой пояс на тихоокеанское стандартное время:

moment.tz.setDefault('America/Los_Angeles');

При установленном часовом поясе метод format() будет автоматически отображать дату и время в соответствующем часовом поясе.

Плагины

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

Лучшие практики

Когда вы начнете использовать Moment.js в своих проектах, следует помнить о нескольких рекомендациях:

Всегда используйте один и тот же часовой пояс для всех дат и времени в вашем приложении. Это облегчит работу с датами и временем и позволит избежать путаницы.
Используйте метод utc() для создания объектов момента, которые не зависят от местного часового пояса. Это может быть полезно, если вы храните дату и время в базе данных и хотите избежать проблем с переходом на летнее время.
Используйте метод clone() для создания копии объекта момента вместо изменения исходного объекта. Это поможет вам избежать неожиданных побочных эффектов и упростит отладку кода.
Не используйте Moment.js для выполнения вычислений, которые можно выполнить с помощью встроенных в JavaScript функций даты и времени. Например, используйте Date.now() вместо moment().valueOf(), чтобы получить текущую метку времени.
Учтите, что для вашего проекта могут быть лучшие альтернативы Moment.js, например, Luxon.

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

Заключение

В этом руководстве мы рассмотрели 10 основных вещей, которые вам нужно знать, чтобы начать использовать Moment.js в своих проектах. Независимо от того, работаете ли вы с датами и временем, продолжительностью или часовыми поясами, Moment.js — это мощный и гибкий инструмент, который облегчит вашу жизнь как разработчика JavaScript. Так зачем ждать? Начните использовать Moment.js сегодня и посмотрите, что он может сделать для вас!