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