Moment.js: Пълно обяснение и практически примери за библиотеката с дати

Информатек Дигитал » Идиоми » Moment.js: Пълно обяснение и практически примери за библиотеката с дати

Работата с дати и часове в JavaScript може да бъде истинско предизвикателство за уеб разработчиците . За щастие, инструменти като Moment.js значително опростяват този процес, правейки всичко - от основното форматиране на дати до сложните операции по манипулиране и валидиране - много по-лесно. Ако някога сте се чувствали разочаровани, опитвайки се да конвертирате, сравнявате или показвате правилно дати в проектите си, Moment.js вероятно е бил един от най-добрите ви приятели или поне трябва да обмислите използването му.

В тази статия ще ви разкажа всичко, което трябва да знаете за Moment.js : от основните му функции и по-малко известни трикове, до практически примери и интеграцията му с други библиотеки, включително ясно обяснение на синтаксиса му и задачите, които можете да изпълнявате с него. Ще разгледаме и неговите ограничения, последните актуализации и какви алтернативи имате, ако търсите нещо по-модерно.

Какво е Moment.js и защо е станал толкова популярен?

Moment.js е JavaScript библиотека, предназначена да улесни работата с дати и часове . Тя ви позволява да създавате, анализирате, манипулирате и показвате дати в почти всеки възможен формат с прост, но мощен синтаксис. В продължение на години тази библиотека е основното решение на общността за преодоляване на ограниченията на вградения в JavaScript обект Date().

Ядрото на Moment.js се върти около обекта `moment()` , който може да конструира дати от почти всеки валиден вход: текстови низове, обекти Date, времеви отпечатъци или директно с числови аргументи. Това го прави изключително гъвкав и полезен във всякакви проекти, от малки скриптове до корпоративни приложения, които управляват международни часови зони или исторически записи.

Какво го направи толкова успешен? Неговата надеждност, лекота на използване и разнообразието от съпътстващи инструменти и плъгини . Дори когато проектът е в режим на поддръжка, Moment.js поддържа голяма потребителска база и обширна документация , затвърждавайки позицията си на водещо решение за данни в JavaScript и Node.js.

Основни характеристики и предимства на Moment.js

• Прост и интуитивен APIЕдна от най-големите предимства на Moment.js е ясният му синтаксис. Можете да извършвате прости операции, като например получаване на текущата дата или преобразуване на низ в определен формат, или сложни изчисления и валидации само с няколко реда.
• Гъвкаво парсиране и форматиранеАнализирането на низове за дати от почти всякакъв формат и преобразуването им в желания резултат никога не е било по-лесно. Moment.js прави форматирането на дати в персонализирани презентации бързо и безпроблемно..
• Манипулиране на датиДобавянето или изваждането на дни, месеци, години, седмици или всяка друга единица време е толкова просто, колкото използването на методите добавяне () y изваждане()Това е много полезно, когато трябва да работите с относителни дати, крайни срокове или времеви рамки, които се променят динамично.
• Надеждна валидацияАко трябва да проверите дали дадена дата е валидна или съществува (например 30 февруари), Moment.js ви улеснява. Методът е валиден() Той е в състояние да открива фини грешки във формата или логиката на датите.
• Поддръжка за часови зони и локализацияБлагодарение на вашия плъгин момент-часова зонаМного лесно е да конвертирате дати между различни часови зони. Можете също така да показвате дати, адаптирани към езика на потребителя и регионалните конвенции, което е ключово в глобалните приложения.
• Екосистема от плъгиниОсвен основната библиотека, има екосистема от плъгини за разширяване на функционалността ѝ (календар, съвместимост с други рамки, екзотични формати...).

Как да започнете с Moment.js във вашия проект

Инсталацията е много лесна . Можете да включите Moment.js във вашия HTML код с един ред:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Ако работите с Node.js или модерна среда за разработка, е обичайно да го инсталирате с помощта на npm или yarn:

npm install moment

След като това е направено, можете да импортирате Moment.js според използвания от вас синтаксис:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Създаване на дати: различни начини и практически примери

Създавайте дати лесно

За да получите текущата дата и час, просто използвайте moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Можете да конструирате конкретна дата, като предадете аргументи:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Можете също да започнете от даден низ и формат, дори в строг режим:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Имате ли нативен обект Date?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Форматиране и показване на дати

Moment.js ви позволява да показвате дати във всеки възможен формат . Например, за да покажете текущата дата като ден/месец/година:

moment().format('DD/MM/YYYY');

Ако искате по-хуманизирана верига, можете да използвате:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Някои полезни токени за форматиране :

• YYYY: 4-цифрена година
• MMмесец
• DDден от месеца
• hh o HHвреме (12-часов или 24-часов формат)
• mmминути
• ssсекунди
• a: сутрин/следобед

Например, за да се показва само времето:

moment().format('HH:mm:ss');

Разширено форматиране с токени и регионална поддръжка

Moment.js поддържа множество локализирани формати и преводи . Възможно е да превключвате езиците в движение, за да показвате имената на месеците и дните на друг език.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Манипулиране на дати: събиране, изваждане и сравнение

Работата с относителни дати е една от силните страни на Moment.js.

• Добавете дни, месеци или години:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Изваждане на единици:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Начало и край на периодите:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Валидиране на дати и откриване на грешки

Преди да работите с дати, е изключително важно да проверите дали те са правилни:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Това предотвратява неочаквани грешки в приложения, които получават данни от потребителя.

Сравнение на дати: проверка дали дадена дата е сред другите

Moment.js включва няколко метода за сравняване на дати:

• еПреди()Проверява дали една дата е преди друга.
• еСлед()Проверява дали дадена дата е по-късна.
• еМежду(): Показва дали дадена дата е между две дадени дати.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Работа с часови зони и международни дати

Когато работите с потребители в различни части на света, часовите зони могат да бъдат истинско главоболие . С плъгина moment-timezone можете лесно да конвертирате дати между региони.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

Освен това, Moment.js може да показва дати, адаптирани към регионалните настройки на потребителя , показвайки правилно преведени имена на месеци и дни.

Ключови примери за употреба и разширени съвети

Получаване на разлики между дати

Можете да изчислите времето, изминало между две дати, в различни мерни единици:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Относителни дати и човешки времена

Moment.js е чудесен за показване на съобщения като „преди 3 дни“ или „след 5 часа“:

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Човешки календар

Функцията calendar () показва относителни дати, като например „вчера в 17:00 ч.“, „утре в 9:00 ч.“, което я прави много полезна за приложения за календар.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Поддръжка за годишни преходи и специални дни

Искате ли да знаете дали една година е високосна?

moment([2024]).isLeapYear(); // true

Методът isLeapYear() ви дава отговора директно.

Разширена персонализация: формати, токени и строг парсинг

Moment.js ви позволява да работите с персонализирани низове и токени, за да създавате или четете дати в безброй формати . Освен това, стриктният режим изисква точни съвпадения, предотвратявайки фини грешки и нежелани изненади.

Например, за да анализирате дата във формат „ден/месец/година“:

moment('12/03/2023', 'DD/MM/YYYY', true);

Списък с често срещани токени и примери

• ГодинаГГГГ (2024), ГГ (24), Г (-500)
• Месец: MM (01 – 12), MMM (януари), MMMM (януари)
• Диа: ДД (01 – 31), C (1-ви – 31-ви)
• планинаЧЧ (00 – 23), чч (01 – 12), мм (минути), сс (секунди)
• Часова зона: Z, ZZ

Тези токени могат да се комбинират, за да се създадат напълно персонализирани резултати. Вижте документацията за пълния списък и специалните случаи.