Moment.js: Pełne wyjaśnienie i praktyczne przykłady biblioteki dat

Informatec Digital » Frazeologia » Moment.js: Pełne wyjaśnienie i praktyczne przykłady biblioteki dat

Praca z datami i godzinami w JavaScript może być prawdziwym wyzwaniem dla programistów stron internetowych . Na szczęście narzędzia takie jak Moment.js znacznie upraszczają ten proces, sprawiając, że wszystko – od podstawowego formatowania dat po złożone operacje manipulacji i walidacji – staje się znacznie prostsze. Jeśli kiedykolwiek czułeś frustrację próbując poprawnie konwertować, porównywać lub wyświetlać daty w swoich projektach, Moment.js prawdopodobnie był jednym z Twoich najlepszych przyjaciół, a przynajmniej powinieneś rozważyć jego użycie.

W tym artykule opowiem Ci wszystko, co musisz wiedzieć o Moment.js : od jego głównych funkcji i mniej znanych sztuczek, po praktyczne przykłady i integrację z innymi bibliotekami, w tym przejrzyste wyjaśnienie składni i zadań, które możesz za jego pomocą wykonać. Przyjrzymy się również jego ograniczeniom, najnowszym aktualizacjom i alternatywom, jeśli szukasz czegoś bardziej nowoczesnego.

Czym jest Moment.js i dlaczego stał się tak popularny?

Moment.js to biblioteka JavaScript zaprojektowana z myślą o bezproblemowej pracy z datami i godzinami . Umożliwia ona tworzenie, parsowanie, przetwarzanie i wyświetlanie dat w praktycznie dowolnym formacie, korzystając z prostej, a zarazem zaawansowanej składni. Od lat ta biblioteka jest głównym rozwiązaniem społeczności JavaScript pozwalającym na obejście ograniczeń natywnego obiektu Date() języka JavaScript.

Sercem Moment.js jest obiekt `moment()` , który może konstruować daty z niemal każdego prawidłowego tekstu wejściowego: ciągów tekstowych, obiektów Date, znaczników czasu lub bezpośrednio z argumentami numerycznymi. Dzięki temu jest niezwykle elastyczny i użyteczny w różnego rodzaju projektach, od małych skryptów po aplikacje korporacyjne zarządzające międzynarodowymi strefami czasowymi lub danymi historycznymi.

Co zapewniło mu tak wielki sukces? Niezawodność, łatwość obsługi oraz różnorodność narzędzi i wtyczek . Nawet po przejściu projektu w tryb konserwacji, Moment.js utrzymuje dużą bazę użytkowników i obszerną dokumentację , co umacnia jego pozycję jako wiodącego rozwiązania w JavaScript i Node.js.

Kluczowe cechy i zalety Moment.js

• Proste i intuicyjne APIJedną z największych zalet Moment.js jest jego przejrzysta składnia. Możesz wykonywać proste operacje, takie jak pobieranie bieżącej daty czy konwersja ciągu znaków do określonego formatu, a także złożone obliczenia i walidacje w zaledwie kilku linijkach.
• Elastyczne parsowanie i formatowanieAnaliza ciągów dat w praktycznie każdym formacie i konwersja ich na żądany format wyjściowy nigdy nie była łatwiejsza. Dzięki Moment.js formatowanie dat w niestandardowych prezentacjach jest szybkie i bezproblemowe..
• Manipulacja datamiDodawanie lub odejmowanie dni, miesięcy, lat, tygodni lub dowolnej innej jednostki czasu jest tak proste, jak użycie metod Dodaj() y odejmować()Jest to bardzo przydatne, gdy trzeba pracować z datami względnymi, datami końcowymi lub przedziałami czasowymi, które zmieniają się dynamicznie.
• Solidna walidacja:Jeśli chcesz sprawdzić, czy data jest prawidłowa lub istnieje (na przykład 30 lutego), Moment.js ułatwia Ci to zadanie. Metoda jest ważna() Potrafi wykrywać drobne błędy w formacie i logice dat.
• Obsługa stref czasowych i lokalizacji:Dzięki Twojej wtyczce moment-strefa czasowaKonwersja dat między różnymi strefami czasowymi jest bardzo prosta. Można również wyświetlać daty dostosowane do języka użytkownika i konwencji regionalnych, co jest kluczowe w aplikacjach globalnych.
• Ekosystem wtyczek:Oprócz głównej biblioteki istnieje ekosystem wtyczek rozszerzających jej funkcjonalność (kalendarz, kompatybilność z innymi frameworkami, egzotyczne formaty...).

Jak rozpocząć korzystanie z Moment.js w swoim projekcie

Instalacja jest bardzo prosta . Możesz dodać Moment.js do kodu HTML za pomocą jednego wiersza:

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

Jeśli pracujesz z Node.js lub nowoczesnym środowiskiem programistycznym, zazwyczaj instalujesz je za pomocą npm lub yarn:

npm install moment

Po wykonaniu tej czynności możesz zaimportować Moment.js zgodnie ze składnią, której używasz:

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

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

Tworzenie dat: różne sposoby i praktyczne przykłady

Łatwe tworzenie dat

Aby uzyskać aktualną datę i godzinę, po prostu użyj moment():

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

Możesz skonstruować konkretną datę przekazując argumenty:

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

Można również zacząć od podanego ciągu i formatu, nawet w trybie ścisłym:

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

Czy masz natywny obiekt Date?

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

Formatowanie i wyświetlanie dat

Moment.js pozwala wyświetlać daty w dowolnym formacie . Na przykład, aby wyświetlić bieżącą datę w formacie dzień/miesiąc/rok:

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

Jeśli chcesz, aby łańcuch był bardziej humanistyczny, możesz użyć:

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

Kilka przydatnych tokenów do formatowania :

• YYYY:4-cyfrowy rok
• MM: miesiąc
• DD:dzień miesiąca
• hh o HH:czas (format 12h lub 24h)
• mm: minuty
• ss: sekundy
• a: rano/po południu

Na przykład, aby wyświetlić tylko godzinę:

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

Zaawansowane formatowanie z tokenami i obsługą regionalną

Moment.js obsługuje wiele zlokalizowanych formatów i tłumaczeń . Możliwa jest bieżąca zmiana języka, aby wyświetlać nazwy miesięcy i dni w innym języku.

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

Manipulowanie datami: dodawanie, odejmowanie i porównywanie

Jedną z mocnych stron Moment.js jest możliwość pracy z datami względnymi.

• Dodaj dni, miesiące lub lata:

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

• Odejmij jednostki:

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

• Początek i koniec okresów:

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

Sprawdź poprawność dat i wykryj błędy

Przed przystąpieniem do pracy z datami należy koniecznie sprawdzić, czy są one poprawne:

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

Zapobiega to nieoczekiwanym błędom w aplikacjach, które odbierają daty od użytkownika.

Porównanie dat: sprawdź, czy dana data jest wśród innych

Moment.js zawiera kilka metod porównywania dat:

• jest przed():Sprawdza czy jedna data jest wcześniejsza od drugiej.
• jest po():Sprawdza czy data jest późniejsza.
• jest pomiędzy():Oznacza, czy data mieści się pomiędzy dwiema podanymi datami.

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

Obsługa stref czasowych i dat międzynarodowych

Podczas pracy z użytkownikami z różnych części świata, strefy czasowe mogą być prawdziwym problemem . Dzięki wtyczce moment-timezone możesz łatwo konwertować daty między regionami.

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"

Ponadto Moment.js potrafi wyświetlać daty dostosowane do ustawień regionalnych użytkownika , pokazując poprawnie przetłumaczone nazwy miesięcy i dni.

Przykłady użycia kluczy i zaawansowane wskazówki

Pobierz różnice między datami

Można obliczyć czas, jaki upłynął między dwiema datami, w różnych jednostkach:

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

Daty względne i czasy ludzkie

Moment.js świetnie nadaje się do wyświetlania wiadomości takich jak „3 dni temu” lub „za 5 godzin”:

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

Kalendarz ludzki

Funkcja calendar () wyświetla daty względne, takie jak „wczoraj o 17:00”, „jutro o 9:00”, co sprawia, że ​​jest bardzo użyteczna w aplikacjach kalendarza.

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

Obsługa przeskoków rocznych i dni specjalnych

Chcesz wiedzieć, czy rok jest rokiem przestępnym?

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

Metoda isLeapYear() daje odpowiedź bezpośrednio.

Zaawansowana personalizacja: formaty, tokeny i ścisła analiza składniowa

Moment.js pozwala na pracę z niestandardowymi ciągami znaków i tokenami, aby tworzyć lub odczytywać daty w niezliczonych formatach . Co więcej, tryb ścisły wymaga dokładnych dopasowań, zapobiegając subtelnym błędom i niepożądanym niespodziankom.

Na przykład, aby przeanalizować datę w formacie „dzień/miesiąc/rok”:

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

Lista popularnych tokenów i przykłady

• Rok: RRRR (2024), RR (24), RR (-500)
• Miesiąc:MM (01 – 12), MMM (styczeń), MMMM (styczeń)
• Dzień:DD (01 – 31), C (1 – 31)
• Czas: HH (00 – 23), hh (01 – 12), mm (minuty), ss (sekundy)
• Strefa czasowa: Z, ZZ

Te tokeny można łączyć, aby tworzyć w pełni spersonalizowane wyniki. Pełną listę i opisy przypadków specjalnych można znaleźć w dokumentacji.