Moment.js: Popolna razlaga in praktični primeri knjižnice datumov

Informatec Digital » Idiomi » Moment.js: Popolna razlaga in praktični primeri knjižnice datumov

Delo z datumi in časi v JavaScriptu je lahko pravi izziv za spletne razvijalce . Na srečo orodja, kot je Moment.js, ta postopek znatno poenostavijo, saj olajšajo vse od osnovnega oblikovanja datumov do kompleksnih operacij manipulacije in validacije. Če ste se kdaj počutili razočarane pri poskusu pravilnega pretvarjanja, primerjanja ali prikazovanja datumov v svojih projektih, je bil Moment.js verjetno eden vaših najboljših prijateljev ali pa bi vsaj morali razmisliti o njegovi uporabi.

V tem članku vam bom povedal vse, kar morate vedeti o Moment.js : od njegovih glavnih funkcij in manj znanih trikov do praktičnih primerov in integracije z drugimi knjižnicami, vključno z jasno razlago njegove sintakse in nalog, ki jih lahko z njim opravite. Ogledali si bomo tudi njegove omejitve, nedavne posodobitve in alternative, ki jih imate, če iščete nekaj sodobnejšega.

Kaj je Moment.js in zakaj je postal tako priljubljen?

Moment.js je knjižnica JavaScript, zasnovana za enostavno delo z datumi in časi . Omogoča vam ustvarjanje, razčlenjevanje, manipuliranje in prikaz datumov v praktično kateri koli obliki, ki si jo lahko zamislite, s preprosto, a zmogljivo sintakso. Ta knjižnica je že leta glavna rešitev skupnosti za premagovanje omejitev izvornega objekta Date() v JavaScriptu.

Jedro Moment.js se vrti okoli objekta `moment()` , ki lahko konstruira datume iz skoraj vseh veljavnih vhodnih podatkov: besedilnih nizov, objektov Date, časovnih žigov ali neposredno s številskimi argumenti. Zaradi tega je izjemno prilagodljiv in uporaben v vseh vrstah projektov, od majhnih skript do poslovnih aplikacij, ki upravljajo mednarodne časovne pasove ali zgodovinske zapise.

Kaj ga je naredilo tako uspešnega? Njegova zanesljivost, enostavnost uporabe in raznolikost spremljajočih orodij in vtičnikov . Tudi ko je projekt prešel v vzdrževalni način, Moment.js vzdržuje veliko uporabniško bazo in obsežno dokumentacijo , kar utrjuje njegov položaj vodilne rešitve za podatke v JavaScriptu in Node.js.

Ključne značilnosti in prednosti Moment.js

• Preprost in intuitiven APIEna največjih prednosti Moment.js je njegova jasna sintaksa. Z njim lahko v samo nekaj vrsticah izvedete preproste operacije, kot je pridobivanje trenutnega datuma ali pretvorba niza v določeno obliko, ali pa kompleksne izračune in validacije.
• Prilagodljivo razčlenjevanje in oblikovanjeRazčlenjevanje datumskih nizov skoraj katere koli oblike in njihovo pretvarjanje v želeni izhod še nikoli ni bilo lažje. Moment.js omogoča hitro in enostavno oblikovanje datumov v predstavitvah po meri..
• Manipulacija datumovSeštevanje ali odštevanje dni, mesecev, let, tednov ali katere koli druge časovne enote je tako preprosto kot uporaba metod dodaj () y odštej()To je zelo uporabno, kadar morate delati z relativnimi datumi, roki ali časovnimi okviri, ki se dinamično spreminjajo.
• Robustna validacijaČe morate preveriti, ali je datum veljaven oziroma obstaja (na primer 30. februar), vam Moment.js to olajša. Metoda isValid() Sposoben je zaznati subtilne napake v obliki ali logiki datumov.
• Podpora za časovne pasove in lokalizacijoZahvaljujoč vašemu vtičniku trenutek-časovni pasPretvarjanje datumov med različnimi časovnimi pasovi je zelo enostavno. Prikažete lahko tudi datume, prilagojene uporabnikovemu jeziku in regionalnim konvencijam, kar je ključnega pomena pri globalnih aplikacijah.
• Ekosistem vtičnikovPoleg glavne knjižnice obstaja ekosistem vtičnikov za razširitev njene funkcionalnosti (koledar, združljivost z drugimi ogrodji, eksotični formati ...).

Kako začeti uporabljati Moment.js v svojem projektu

Namestitev je zelo preprosta . Datoteko Moment.js lahko vključite v HTML z eno samo vrstico:

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

Če delate z Node.js ali sodobnim razvojnim okoljem, ga je običajno namestiti z npm ali yarn:

npm install moment

Ko je to storjeno, lahko uvozite Moment.js v skladu s sintakso, ki jo uporabljate:

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

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

Ustvarjanje datumov: različni načini in praktični primeri

Preprosto ustvarite datume

Če želite dobiti trenutni datum in čas, preprosto uporabite moment():

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

Določen datum lahko sestavite s podajanjem argumentov:

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

Začnete lahko tudi z danim nizom in obliko zapisa, tudi v strogem načinu:

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

Ali imate izvorni objekt Date?

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

Oblikovanje in prikaz datumov

Moment.js vam omogoča prikaz datumov v poljubni možni obliki . Na primer, za prikaz trenutnega datuma kot dan/mesec/leto:

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

Če želite bolj humanizirano verigo, lahko uporabite:

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

Nekaj ​​uporabnih žetonov za oblikovanje :

• YYYY: 4-mestno leto
• MMmesec
• DD: dan v mesecu
• hh o HH: čas (12-urni ali 24-urni format)
• mmminut
• sssekunde
• a: dopoldne/popoldne

Na primer, če želite prikazati samo čas:

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

Napredno oblikovanje z žetoni in regionalno podporo

Moment.js podpira več lokaliziranih formatov in prevodov . Jezike je mogoče sproti preklapljati, da se imena mesecev in dni prikažejo v drugem jeziku.

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

Manipulacija datumov: seštevanje, odštevanje in primerjava

Delo z relativnimi datumi je ena od prednosti Moment.js.

• Dodajte dneve, mesece ali leta:

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

• Odštevanje enot:

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

• Začetek in konec menstruacije:

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

Preverjanje datumov in odkrivanje napak

Preden začnete z datumi, je ključnega pomena preveriti njihovo pravilnost:

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

To preprečuje nepričakovane napake v aplikacijah, ki prejemajo podatke od uporabnika.

Primerjava datumov: preverite, ali je datum med drugimi

Moment.js vključuje več metod za primerjavo datumov:

• jePred()Preveri, ali je en datum pred drugim.
• jePo(): Preveri, ali je datum poznejši.
• jeMed(): Označuje, ali je datum med dvema podanima datumoma.

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

Obravnavanje časovnih pasov in mednarodnih datumov

Pri delu z uporabniki v različnih delih sveta so lahko časovni pasovi prava nadloga . Z vtičnikom moment-timezone lahko preprosto pretvorite datume med regijami.

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"

Poleg tega lahko Moment.js prikaže datume, prilagojene regionalnim nastavitvam uporabnika , in prikaže pravilno prevedena imena mesecev in dni.

Ključni primeri uporabe in napredni nasveti

Pridobi razlike med datumi

Čas, ki je pretekel med dvema datumoma, lahko izračunate v različnih enotah:

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

Relativni datumi in človeški časi

Moment.js je odličen za prikaz sporočil, kot so "pred 3 dnevi" ali "čez 5 ur":

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

Človeški koledar

Funkcija calendar () prikazuje relativne datume, kot sta »včeraj ob 17:00« in »jutri ob 9:00«, zaradi česar je zelo uporabna za aplikacije koledarja.

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

Podpora za letne skoke in posebne dni

Ali želite vedeti, ali je leto prestopno leto?

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

Metoda isLeapYear() vam da odgovor neposredno.

Napredna prilagoditev: formati, žetoni in strogo razčlenjevanje

Moment.js vam omogoča delo s prilagojenimi nizi in žetoni za ustvarjanje ali branje datumov v neštetih oblikah . Poleg tega strog način zahteva natančna ujemanja, kar preprečuje subtilne napake in neželena presenečenja.

Na primer, za razčlenitev datuma v obliki "dan/mesec/leto":

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

Seznam pogostih žetonov in primerov

• Leto: LLLL (2024), LL (24), LL (-500)
• Mes: MM (01 – 12), MMM (jan), MMMM (januar)
• Día: DD (01 – 31), C (1. – 31.)
• Ura: HH (00–23), hh (01–12), mm (minute), ss (sekunde)
• Časovni pasZ, ZZ

Te žetone je mogoče kombinirati za ustvarjanje popolnoma prilagojenih izhodov. Za celoten seznam in posebne primere glejte dokumentacijo.