Moment.js: Komplet forklaring og praktiske eksempler på datobiblioteket

Informatic Digital » Idiomer » Moment.js: Komplet forklaring og praktiske eksempler på datobiblioteket

Det kan være en reel udfordring for webudviklere at arbejde med datoer og klokkeslæt i JavaScript . Heldigvis forenkler værktøjer som Moment.js denne proces betydeligt, hvilket gør alt fra grundlæggende datoformatering til komplekse manipulations- og valideringsoperationer meget nemmere. Hvis du nogensinde har følt dig frustreret over at forsøge at konvertere, sammenligne eller vise datoer korrekt i dine projekter, har Moment.js sandsynligvis været en af ​​dine bedste venner, eller i det mindste bør du overveje at bruge det.

I denne artikel fortæller jeg dig alt, hvad du behøver at vide om Moment.js : fra dens hovedfunktioner og mindre kendte tricks til praktiske eksempler og dens integration med andre biblioteker, inklusive en klar forklaring af dens syntaks og de opgaver, du kan udføre med den. Vi vil også se på dens begrænsninger, seneste opdateringer og hvilke alternativer du har, hvis du leder efter noget mere moderne.

Hvad er Moment.js, og hvorfor er det blevet så populært?

Moment.js er et JavaScript-bibliotek designet til at gøre det nemt at arbejde med datoer og klokkeslæt . Det giver dig mulighed for at oprette, analysere, manipulere og vise datoer i stort set alle tænkelige formater med en simpel, men kraftfuld syntaks. I årevis har dette bibliotek været fællesskabets primære løsning til at overvinde begrænsningerne i JavaScripts native Date()-objekt.

Kernen i Moment.js drejer sig om `moment()` -objektet , som kan konstruere datoer fra næsten ethvert gyldigt input: tekststrenge, datoobjekter, tidsstempler eller direkte med numeriske argumenter. Dette gør det ekstremt fleksibelt og nyttigt i alle slags projekter, fra små scripts til virksomhedsapplikationer, der administrerer internationale tidszoner eller historiske poster.

Hvad har gjort det så succesfuldt? Dets pålidelighed, brugervenlighed og de mange tilhørende værktøjer og plugins . Selv når projektet er gået i vedligeholdelsestilstand, opretholder Moment.js en stor brugerbase og omfattende dokumentation , hvilket styrker dets position som en førende dataløsning i JavaScript og Node.js.

Nøglefunktioner og fordele ved Moment.js

• Enkel og intuitiv APIEn af Moment.js' største styrker er dens klare syntaks. Du kan udføre simple operationer, såsom at hente den aktuelle dato eller konvertere en streng til et bestemt format, eller komplekse beregninger og valideringer på blot et par linjer.
• Fleksibel parsing og formateringDet har aldrig været nemmere at analysere dato-strenge i næsten ethvert format og konvertere dem til det ønskede output. Moment.js gør det hurtigt og nemt at formatere datoer i brugerdefinerede præsentationer..
• DatomanipulationDet er lige så simpelt at tilføje eller trække dage, måneder, år, uger eller enhver anden tidsenhed fra som at bruge metoderne tilføje() y trække fra()Dette er meget nyttigt, når du har brug for at arbejde med relative datoer, forfaldsdatoer eller tidsrammer, der varierer dynamisk.
• Robust valideringHvis du har brug for at kontrollere, om en dato er gyldig eller eksisterer (for eksempel 30. februar), gør Moment.js det nemt for dig. Metoden er gyldig() Den er i stand til at opdage subtile fejl i formatet eller logikken bag datoer.
• Understøttelse af tidszoner og lokaliseringTakket være dit plugin øjeblik-tidszoneDet er meget nemt at konvertere datoer mellem forskellige tidszoner. Du kan også vise datoer tilpasset brugerens sprog og regionale konventioner, hvilket er vigtigt i globale applikationer.
• Plugin-økosystemUdover hovedbiblioteket er der et økosystem af plugins til at udvide dets funktionalitet (kalender, kompatibilitet med andre frameworks, eksotiske formater...).

Sådan kommer du i gang med Moment.js i dit projekt

Installationen er meget ligetil . Du kan inkludere Moment.js i din HTML med en enkelt linje:

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

Hvis du arbejder med Node.js eller et moderne udviklingsmiljø, er det almindeligt at installere det ved hjælp af npm eller yarn:

npm install moment

Når dette er gjort, kan du importere Moment.js i henhold til den syntaks, du bruger:

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

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

Oprettelse af datoer: forskellige måder og praktiske eksempler

Opret datoer nemt

For at få den aktuelle dato og tid, simpelthen brug moment():

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

Du kan konstruere en specifik dato ved at bruge argumenter:

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

Du kan også starte fra en given streng og format, selv i streng tilstand:

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

Har du et native Date-objekt?

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

Formatering og visning af datoer

Moment.js giver dig mulighed for at vise datoer i ethvert tænkeligt format . For eksempel, for at vise den aktuelle dato som dag/måned/år:

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

Hvis du ønsker en mere humaniseret kæde, kan du bruge:

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

Nogle nyttige tokens til formatering :

• YYYY: 4-cifret årstal
• MM: min
• DD: dag i måneden
• hh o HHtid (12-timers eller 24-timers format)
• mmminutter
• sssekunder
• a: formiddag/eftermiddag

For eksempel, for kun at vise tiden:

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

Avanceret formatering med tokens og regional understøttelse

Moment.js understøtter flere lokaliserede formater og oversættelser . Det er muligt at skifte sprog undervejs for at vise måneds- og dagsnavne på et andet sprog.

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

Datomanipulation: addition, subtraktion og sammenligning

At arbejde med relative datoer er en af Moment.js' styrker.

• Tilføj dage, måneder eller år:

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

• Træk enheder fra:

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

• Start og slut af perioder:

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

Valider datoer og opdag fejl

Før man arbejder med datoer, er det vigtigt at kontrollere, at de er korrekte:

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

Dette forhindrer uventede fejl i applikationer, der modtager datoer fra brugeren.

Datosammenligning: tjek om en dato er blandt andre

Moment.js indeholder flere metoder til at sammenligne datoer:

• erFør(): Kontrollerer om én dato er før en anden.
• erEfter(): Kontrollerer om en dato er senere.
• erMellem()Angiver, om en dato ligger mellem to givne datoer.

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

Håndtering af tidszoner og internationale datoer

Når man arbejder med brugere i forskellige dele af verden, kan tidszoner være en reel hovedpine . Med moment-timezone -pluginnet kan du nemt konvertere datoer mellem regioner.

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"

Derudover kan Moment.js vise datoer tilpasset brugerens regionale indstillinger og vise korrekt oversatte måneds- og dagsnavne.

Vigtige brugseksempler og avancerede tips

Få forskelle mellem datoer

Du kan beregne den forløbne tid mellem to datoer i forskellige enheder:

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

Relative datoer og menneskelig tid

Moment.js er fantastisk til at vise beskeder som "for 3 dage siden" eller "om 5 timer":

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

Menneskelig kalender

Funktionen calendar () viser relative datoer såsom "i går kl. 17:00", "i morgen kl. 9:00", hvilket gør den meget brugbar til kalenderapps.

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

Støtte til årsskift og særlige dage

Vil du vide, om et år er et skudår?

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

Metoden isLeapYear() giver dig svaret direkte.

Avanceret tilpasning: formater, tokens og streng parsing

Moment.js giver dig mulighed for at arbejde med brugerdefinerede strenge og tokens for at oprette eller læse datoer i utallige formater . Derudover kræver strict mode nøjagtige matches, hvilket forhindrer subtile fejl og uønskede overraskelser.

For eksempel, for at analysere en dato i formatet "dag/måned/år":

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

Liste over almindelige tokens og eksempler

• ÅrÅÅÅÅ (2024), ÅÅ (24), Å (-500)
• Måned: MM (01 – 12), MMM (jan), MMMM (januar)
• DíaDD (01 – 31), C (1. – 31.)
• Tid: TT (00 – 23), tt (01 – 12), mm (minutter), ss (sekunder)
• TidszoneZ, ZZ

Disse tokens kan kombineres for at skabe fuldstændig tilpassede output. Se dokumentationen for den fulde liste og særlige tilfælde.