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

Informatec Digital » Idiomer » Moment.js: Fullstendig forklaring og praktiske eksempler på datobiblioteket

Å jobbe med datoer og klokkeslett i JavaScript kan være en skikkelig utfordring for webutviklere . Heldigvis forenkler verktøy som Moment.js denne prosessen betraktelig, og gjør alt fra grunnleggende datoformatering til komplekse manipulerings- og valideringsoperasjoner mye enklere. Hvis du noen gang har følt deg frustrert over å prøve å konvertere, sammenligne eller vise datoer riktig i prosjektene dine, har Moment.js sannsynligvis vært en av dine beste venner, eller i det minste bør du vurdere å bruke det.

I denne artikkelen skal jeg fortelle deg alt du trenger å vite om Moment.js : fra hovedfunksjonene og mindre kjente triks, til praktiske eksempler og integrasjon med andre biblioteker, inkludert en tydelig forklaring av syntaksen og oppgavene du kan utføre med den. Vi skal også se på begrensningene, nylige oppdateringer og hvilke alternativer du har hvis du leter etter noe mer moderne.

Hva er Moment.js, og hvorfor har det blitt så populært?

Moment.js er et JavaScript-bibliotek som er utviklet for å gjøre det enkelt å jobbe med datoer og klokkeslett . Det lar deg opprette, analysere, manipulere og vise datoer i praktisk talt alle tenkelige formater med en enkel, men kraftig syntaks. I årevis har dette biblioteket vært fellesskapets primære løsning for å overvinne begrensningene til JavaScripts innebygde Date()-objekt.

Kjernen i Moment.js dreier seg om `moment()` -objektet , som kan konstruere datoer fra nesten alle gyldige input: tekststrenger, datoobjekter, tidsstempler eller direkte med numeriske argumenter. Dette gjør det ekstremt fleksibelt og nyttig i alle slags prosjekter, fra små skript til bedriftsapplikasjoner som administrerer internasjonale tidssoner eller historiske poster.

Hva har gjort det så vellykket? Påliteligheten, brukervennligheten og variasjonen av tilhørende verktøy og plugins . Selv når prosjektet har gått inn i vedlikeholdsmodus, opprettholder Moment.js en stor brukerbase og omfattende dokumentasjon , noe som forsterker posisjonen som en ledende dataløsning i JavaScript og Node.js.

Viktige funksjoner og fordeler med Moment.js

• Enkel og intuitiv APIEn av Moment.js sine største styrker er den tydelige syntaksen. Du kan utføre enkle operasjoner, som å hente gjeldende dato eller konvertere en streng til et bestemt format, eller komplekse beregninger og valideringer på bare noen få linjer.
• Fleksibel parsing og formateringDet har aldri vært enklere å analysere dato-strenger i nesten alle formater og konvertere dem til ønsket utdata. Moment.js gjør det raskt og smertefritt å formatere datoer i tilpassede presentasjoner..
• DatomanipuleringÅ legge til eller trekke fra dager, måneder, år, uker eller andre tidsenheter er like enkelt som å bruke metodene legge til() y subtrahere()Dette er veldig nyttig når du trenger å jobbe med relative datoer, forfallsdatoer eller tidsrammer som varierer dynamisk.
• Robust valideringHvis du trenger å sjekke om en dato er gyldig eller eksisterer (for eksempel 30. februar), gjør Moment.js det enkelt for deg. Metoden er gyldig() Den er i stand til å oppdage subtile feil i formatet eller logikken til datoer.
• Støtte for tidssoner og lokaliseringTakk til plugin-modulen din øyeblikk-tidssoneDet er veldig enkelt å konvertere datoer mellom forskjellige tidssoner. Du kan også vise datoer tilpasset brukerens språk og regionale konvensjoner, noe som er viktig i globale applikasjoner.
• Plugin-økosystemBortsett fra hovedbiblioteket, finnes det et økosystem av plugins for å utvide funksjonaliteten (kalender, kompatibilitet med andre rammeverk, eksotiske formater...).

Slik kommer du i gang med Moment.js i prosjektet ditt

Installasjonen er veldig enkel . Du kan inkludere Moment.js i HTML-koden din med én enkelt linje:

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

Hvis du jobber med Node.js eller et moderne utviklingsmiljø, er det vanlig å installere det ved hjelp av npm eller yarn:

npm install moment

Når dette er gjort, kan du importere Moment.js i henhold til syntaksen du bruker:

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

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

Lage datoer: forskjellige måter og praktiske eksempler

Lag datoer enkelt

For å få gjeldende dato og klokkeslett, bare bruk moment():

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

Du kan konstruere en spesifikk dato ved å sende argumenter:

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

Du kan også starte fra en gitt streng og format, selv i streng modus:

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

Har du et innebygd Date-objekt?

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

Formatering og visning av datoer

Moment.js lar deg vise datoer i alle tenkelige formater . For eksempel, for å vise gjeldende dato som dag/måned/år:

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

Hvis du ønsker en mer humanisert kjede, kan du bruke:

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

Noen nyttige symboler for formatering :

• YYYY: 4-sifret årstall
• MM: min
• DD: dag i måneden
• hh o HH: tid (12-timers eller 24-timers format)
• mmminutter
• sssekunder
• a: am/pm

For eksempel, for å bare vise tiden:

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

Avansert formatering med tokener og regional støtte

Moment.js støtter flere lokaliserte formater og oversettelser . Det er mulig å bytte språk underveis for å vise måneds- og dagnavn på et annet språk.

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

Datomanipulering: addisjon, subtraksjon og sammenligning

Å jobbe med relative datoer er en av Moment.js' styrker.

• Legg til dager, måneder eller år:

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

• Trekk fra enheter:

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

• Start og slutt på 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 oppdag feil

Før du bruker datoer, er det viktig å bekrefte at de er riktige:

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

Dette forhindrer uventede feil i applikasjoner som mottar datoer fra brukeren.

Datosammenligning: sjekk om en dato er blant andre

Moment.js inneholder flere metoder for å sammenligne datoer:

• erFør(): Sjekker om én dato er før en annen.
• erEtter(): Sjekker om en dato er senere.
• erMellom(): Angir om en dato er mellom to gitte datoer.

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

Håndtering av tidssoner og internasjonale datoer

Når du jobber med brukere i forskjellige deler av verden, kan tidssoner være en skikkelig hodepine . Med moment-timezone -pluginen kan du enkelt konvertere datoer mellom 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"

I tillegg kan Moment.js vise datoer tilpasset brukerens regionale innstillinger , og viser korrekt oversatte måneds- og dagnavn.

Viktige brukseksempler og avanserte tips

Få forskjeller mellom datoer

Du kan beregne tiden som har gått mellom to datoer i forskjellige enheter:

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 flott for å vise meldinger som «for 3 dager siden» eller «om 5 timer»:

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

Menneskelig kalender

calendar () -funksjonen viser relative datoer som «i går kl. 17.00» og «i morgen kl. 09.00», noe som gjør den svært anvendelig for kalenderapper.

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

Støtte for årshopp og spesielle dager

Vil du vite om et år er et skuddår?

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

Metoden isLeapYear() gir deg svaret direkte.

Avansert tilpasning: formater, tokens og streng parsing

Moment.js lar deg jobbe med tilpassede strenger og tokens for å opprette eller lese datoer i utallige formater . I tillegg krever strict-modus eksakte samsvar, noe som forhindrer subtile feil og uønskede overraskelser.

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

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

Liste over vanlige tokens og eksempler

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

Disse tokenene kan kombineres for å lage fullstendig tilpassede resultater. Se dokumentasjonen for en fullstendig liste og spesialtilfeller.