Moment.js: Kompletné vysvetlenie a praktické príklady knižnice dátumov

Informatec Digital » Idiómy » Moment.js: Kompletné vysvetlenie a praktické príklady knižnice dátumov

Práca s dátumami a časmi v jazyku JavaScript môže byť pre webových vývojárov skutočnou výzvou . Našťastie nástroje ako Moment.js tento proces výrazne zjednodušujú a uľahčujú všetko od základného formátovania dátumu až po zložité manipulačné a overovacie operácie. Ak ste sa niekedy cítili frustrovaní pri pokuse o správnu konverziu, porovnanie alebo zobrazenie dátumov vo svojich projektoch, Moment.js bol pravdepodobne jedným z vašich najlepších priateľov, alebo by ste aspoň mali zvážiť jeho použitie.

V tomto článku vám poviem všetko, čo potrebujete vedieť o Moment.js : od jeho hlavných funkcií a menej známych trikov, až po praktické príklady a integráciu s inými knižnicami, vrátane jasného vysvetlenia jeho syntaxe a úloh, ktoré s ním môžete vykonávať. Pozrieme sa aj na jeho obmedzenia, nedávne aktualizácie a alternatívy, ktoré máte, ak hľadáte niečo modernejšie.

Čo je Moment.js a prečo sa stal tak populárnym?

Moment.js je knižnica JavaScript navrhnutá tak, aby uľahčila prácu s dátumami a časmi . Umožňuje vám vytvárať, analyzovať, manipulovať a zobrazovať dátumy prakticky v akomkoľvek predstaviteľnom formáte s jednoduchou, ale výkonnou syntaxou. Táto knižnica je už roky hlavným riešením komunity na prekonanie obmedzení natívneho objektu Date() v JavaScripte.

Jadro Moment.js sa točí okolo objektu `moment()` , ktorý dokáže zostaviť dátumy z takmer akéhokoľvek platného vstupu: textových reťazcov, objektov Date, časových pečiatok alebo priamo s číselnými argumentmi. Vďaka tomu je mimoriadne flexibilný a užitočný vo všetkých druhoch projektov, od malých skriptov až po podnikové aplikácie, ktoré spravujú medzinárodné časové pásma alebo historické záznamy.

Čo ho urobilo takým úspešným? Jeho spoľahlivosť, jednoduchosť použitia a rozmanitosť sprievodných nástrojov a pluginov . Aj keď projekt prešiel do režimu údržby, Moment.js si udržiava veľkú používateľskú základňu a rozsiahlu dokumentáciu , čím posilňuje svoju pozíciu popredného riešenia pre dáta v JavaScripte a Node.js.

Kľúčové vlastnosti a výhody Moment.js

• Jednoduché a intuitívne APIJednou z najväčších silných stránok Moment.js je jeho jasná syntax. V niekoľkých riadkoch môžete vykonávať jednoduché operácie, ako je získanie aktuálneho dátumu alebo prevod reťazca do určitého formátu, alebo zložité výpočty a validácie.
• Flexibilné parsovanie a formátovanieAnalýza dátumových reťazcov takmer akéhokoľvek formátu a ich konverzia na požadovaný výstup nebola nikdy jednoduchšia. Moment.js umožňuje rýchle a bezproblémové formátovanie dátumov vo vlastných prezentáciách..
• Manipulácia s dátumomPridávanie alebo odčítavanie dní, mesiacov, rokov, týždňov alebo akejkoľvek inej časovej jednotky je také jednoduché ako použitie metód pridať () y odčítať()Toto je veľmi užitočné, keď potrebujete pracovať s relatívnymi dátumami, termínmi splatnosti alebo časovými rámcami, ktoré sa dynamicky menia.
• Robustná validáciaAk potrebujete skontrolovať, či je dátum platný alebo existuje (napríklad 30. február), Moment.js vám to uľahčí. Metóda je platné() Dokáže odhaliť jemné chyby vo formáte alebo logike dátumov.
• Podpora časových pásiem a lokalizácieVďaka vášmu pluginu moment-časové pásmoPrevod dátumov medzi rôznymi časovými pásmami je veľmi jednoduchý. Môžete tiež zobraziť dátumy prispôsobené jazyku používateľa a regionálnym konvenciám, čo je kľúčové v globálnych aplikáciách.
• Ekosystém pluginovOkrem hlavnej knižnice existuje ekosystém pluginov na rozšírenie jej funkcionality (kalendár, kompatibilita s inými frameworkami, exotické formáty...).

Ako začať s Moment.js vo vašom projekte

Inštalácia je veľmi jednoduchá . Súbor Moment.js môžete do HTML kódu zahrnúť jedným riadkom:

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

Ak pracujete s Node.js alebo moderným vývojovým prostredím, je bežné ho inštalovať pomocou npm alebo yarn:

npm install moment

Keď to urobíte, môžete importovať súbor Moment.js podľa použitej syntaxe:

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

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

Vytváranie dátumov: rôzne spôsoby a praktické príklady

Jednoduché vytváranie dátumov

Ak chcete získať aktuálny dátum a čas, jednoducho použite moment():

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

Konkrétny dátum môžete vytvoriť zadaním argumentov:

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

Môžete tiež začať od daného reťazca a formátu, a to aj v prísnom režime:

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

Máte natívny objekt Date?

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

Formátovanie a zobrazenie dátumov

Moment.js vám umožňuje zobraziť dátumy v akomkoľvek predstaviteľnom formáte . Napríklad, ak chcete zobraziť aktuálny dátum ako deň/mesiac/rok:

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

Ak chcete viac humanizovaný reťazec, môžete použiť:

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

Niekoľko užitočných tokenov na formátovanie :

• YYYY: 4-ciferný rok
• MMmesiac
• DDdeň v mesiaci
• hh o HHčas (12-hodinový alebo 24-hodinový formát)
• mmminúty
• sssekundy
• a: dopoludnia/popoludní

Napríklad, ak chcete zobraziť iba čas:

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

Pokročilé formátovanie s tokenmi a regionálnou podporou

Moment.js podporuje viacero lokalizovaných formátov a prekladov . Je možné prepínať jazyky za chodu, aby sa názvy mesiacov a dní zobrazovali v inom jazyku.

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

Manipulácia s dátumom: sčítanie, odčítanie a porovnávanie

Práca s relatívnymi dátumami je jednou zo silných stránok Moment.js.

• Pridajte dni, mesiace alebo roky:

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

• Odčítanie jednotiek:

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

• Začiatok a koniec menštruácie:

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

Overiť dátumy a zistiť chyby

Pred prácou s dátumami je dôležité overiť ich správnosť:

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

Toto zabraňuje neočakávaným chybám v aplikáciách, ktoré prijímajú dáta od používateľa.

Porovnanie dátumov: kontrola, či sa dátum nachádza medzi ostatnými

Moment.js obsahuje niekoľko metód na porovnávanie dátumov:

• jePred()Skontroluje, či jeden dátum predchádza inému.
• isAfter(): Skontroluje, či je dátum neskorší.
• jeMedzi()Označuje, či sa dátum nachádza medzi dvoma danými dátumami.

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

Spracovanie časových pásiem a medzinárodných dátumov

Pri práci s používateľmi v rôznych častiach sveta môžu byť časové pásma poriadnou bolesťou hlavy . Pomocou pluginu moment-timezone môžete jednoducho konvertovať dátumy medzi regiónmi.

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"

Okrem toho dokáže Moment.js zobraziť dátumy prispôsobené regionálnym nastaveniam používateľa a správne preložiť názvy mesiacov a dní.

Kľúčové príklady použitia a pokročilé tipy

Získanie rozdielov medzi dátumami

Čas, ktorý uplynul medzi dvoma dátumami, môžete vypočítať v rôznych jednotkách:

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

Relatívne dátumy a ľudské časy

Moment.js je skvelý na zobrazovanie správ ako „pred 3 dňami“ alebo „o 5 hodín“:

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

Ľudský kalendár

Funkcia calendar () zobrazuje relatívne dátumy, napríklad „včera o 17:00“, „zajtra o 9:00“, vďaka čomu je veľmi užitočná pre aplikácie kalendára.

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

Podpora pre ročné skoky a špeciálne dni

Chcete vedieť, či je rok priestupný?

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

Metóda isLeapYear() vám poskytne priamu odpoveď.

Pokročilé prispôsobenie: formáty, tokeny a striktné parsovanie

Moment.js vám umožňuje pracovať s vlastnými reťazcami a tokenmi na vytváranie alebo čítanie dátumov v nespočetných formátoch . Okrem toho, prísny režim vyžaduje presné zhody, čím sa predchádza jemným chybám a nechceným prekvapeniam.

Napríklad, ak chcete analyzovať dátum vo formáte „deň/mesiac/rok“:

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

Zoznam bežných tokenov a príkladov

• RokRRRR (2024), RR (24), RR (-500)
• Mesiac: MM (01 – 12), MMM (január), MMMM (január)
• Día: DD (01 – 31), C (1. – 31.)
• HoraHH (00 – 23), hh (01 – 12), mm (minúty), ss (sekundy)
• Časové pásmoZ, ZZ

Tieto tokeny je možné kombinovať a vytvárať tak úplne prispôsobené výstupy. Úplný zoznam a špeciálne prípady nájdete v dokumentácii.