Moment.js: Fullständig förklaring och praktiska exempel på datumbiblioteket

Informatec Digital » Idiom » Moment.js: Fullständig förklaring och praktiska exempel på datumbiblioteket

Att arbeta med datum och tider i JavaScript kan vara en riktig utmaning för webbutvecklare . Lyckligtvis förenklar verktyg som Moment.js denna process avsevärt, vilket gör allt från grundläggande datumformatering till komplexa manipulations- och valideringsoperationer mycket enklare. Om du någonsin har känt dig frustrerad över att försöka konvertera, jämföra eller visa datum korrekt i dina projekt har Moment.js förmodligen varit en av dina bästa vänner, eller åtminstone bör du överväga att använda det.

I den här artikeln berättar jag allt du behöver veta om Moment.js : från dess huvudfunktioner och mindre kända knep, till praktiska exempel och dess integration med andra bibliotek, inklusive en tydlig förklaring av dess syntax och de uppgifter du kan utföra med den. Vi kommer också att titta på dess begränsningar, senaste uppdateringar och vilka alternativ du har om du letar efter något mer modernt.

Vad är Moment.js och varför har det blivit så populärt?

Moment.js är ett JavaScript-bibliotek utformat för att göra det enkelt att arbeta med datum och tider . Det låter dig skapa, analysera, manipulera och visa datum i praktiskt taget alla tänkbara format med en enkel men kraftfull syntax. I åratal har detta bibliotek varit communityns främsta lösning för att övervinna begränsningarna med JavaScripts inbyggda Date()-objekt.

Kärnan i Moment.js kretsar kring objektet `moment()` , som kan konstruera datum från nästan vilken giltig indata som helst: textsträngar, Date-objekt, tidsstämplar eller direkt med numeriska argument. Detta gör det extremt flexibelt och användbart i alla typer av projekt, från små skript till företagsapplikationer som hanterar internationella tidszoner eller historiska poster.

Vad har gjort det så framgångsrikt? Dess tillförlitlighet, användarvänlighet och de många tillhörande verktygen och plugin-programmen . Även när projektet har gått in i underhållsläge har Moment.js en stor användarbas och omfattande dokumentation , vilket stärker dess position som en ledande datalösning inom JavaScript och Node.js.

Viktiga funktioner och fördelar med Moment.js

• Enkelt och intuitivt APIEn av Moment.js största styrkor är dess tydliga syntax. Du kan utföra enkla operationer, som att hämta aktuellt datum eller konvertera en sträng till ett specifikt format, eller komplexa beräkningar och valideringar på bara några få rader.
• Flexibel parsning och formateringAtt analysera datumsträngar i nästan vilket format som helst och konvertera dem till önskad utdata har aldrig varit enklare. Moment.js gör det snabbt och smärtfritt att formatera datum i anpassade presentationer..
• DatummanipulationAtt lägga till eller subtrahera dagar, månader, år, veckor eller någon annan tidsenhet är lika enkelt som att använda metoderna Lägg till() y subtrahera()Detta är mycket användbart när du behöver arbeta med relativa datum, förfallodatum eller tidsramar som varierar dynamiskt.
• Robust valideringOm du behöver kontrollera om ett datum är giltigt eller existerar (till exempel 30 februari) gör Moment.js det enkelt för dig. Metoden är giltig() Den kan upptäcka subtila fel i datumformatet eller logiken.
• Stöd för tidszoner och lokaliseringTack vare ditt plugin ögonblick-tidszonDet är väldigt enkelt att konvertera datum mellan olika tidszoner. Du kan också visa datum anpassade till användarens språk och regionala konventioner, vilket är viktigt i globala applikationer.
• Plugin-ekosystemFörutom huvudbiblioteket finns det ett ekosystem av plugins för att utöka dess funktionalitet (kalender, kompatibilitet med andra ramverk, exotiska format...).

Hur man kommer igång med Moment.js i sitt projekt

Installationen är mycket enkel . Du kan inkludera Moment.js i din HTML med en enda rad:

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

Om du arbetar med Node.js eller en modern utvecklingsmiljö är det vanligt att installera det med hjälp av npm eller yarn:

npm install moment

När detta är klart kan du importera Moment.js enligt den syntax du använder:

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

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

Skapa datum: olika sätt och praktiska exempel

Skapa datum enkelt

För att få aktuellt datum och tid, helt enkelt använda moment():

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

Du kan konstruera ett specifikt datum genom att skicka argument:

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

Du kan också börja från en given sträng och format, även i strict-läge:

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

Har du ett nativt Date-objekt?

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

Formatering och visning av datum

Med Moment.js kan du visa datum i alla tänkbara format . Till exempel, för att visa aktuellt datum som dag/månad/år:

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

Om du vill ha en mer humaniserad kedja kan du använda:

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

Några användbara tokens för formatering :

• YYYY: 4-siffrigt årtal
• MM: min
• DD: dag i månaden
• hh o HHtid (12-timmars- eller 24-timmarsformat)
• mmminuter
• sssekunder
• afm/em

Till exempel, för att bara visa tiden:

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

Avancerad formatering med tokens och regionalt stöd

Moment.js stöder flera lokaliserade format och översättningar . Det är möjligt att byta språk direkt för att visa månads- och dagnamn på ett annat språk.

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

Datummanipulation: addition, subtraktion och jämförelse

Att arbeta med relativa datum är en av Moment.js styrkor.

• Lägg till dagar, månader eller år:

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

• Subtrahera enheter:

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

• Början och slutet av 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

Validera datum och upptäck fel

Innan man arbetar med datum är det viktigt att kontrollera att de är korrekta:

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

Detta förhindrar oväntade buggar i applikationer som tar emot datum från användaren.

Datumjämförelse: kontrollera om ett datum finns bland andra

Moment.js innehåller flera metoder för att jämföra datum:

• ärFöre(): Kontrollerar om ett datum ligger före ett annat.
• ärEfter(): Kontrollerar om ett datum är senare.
• ärMellan(): Anger om ett datum ligger mellan två givna datum.

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

Hantering av tidszoner och internationella datum

När man arbetar med användare i olika delar av världen kan tidszoner vara ett riktigt huvudbry . Med moment-timezone -pluginet kan du enkelt konvertera datum mellan 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"

Dessutom kan Moment.js visa datum anpassade till användarens regionala inställningar , med korrekt översatta månads- och dagnamn.

Viktiga användningsexempel och avancerade tips

Få skillnader mellan datum

Du kan beräkna tiden som förflutit mellan två datum i olika 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

Relativa datum och mänsklig tid

Moment.js är utmärkt för att visa meddelanden som "3 dagar sedan" eller "om 5 timmar":

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

Mänsklig kalender

Funktionen calendar () visar relativa datum som "igår kl. 17:00", "imorgon kl. 9:00", vilket gör den mycket användbar för kalenderappar.

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

Stöd för årshopp och speciella dagar

Vill du veta om ett år är ett skottår?

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

Metoden isLeapYear() ger dig svaret direkt.

Avancerad anpassning: format, tokens och strikt parsning

Med Moment.js kan du arbeta med anpassade strängar och tokens för att skapa eller läsa datum i otaliga format . Dessutom kräver strict-läget exakta matchningar, vilket förhindrar subtila fel och oönskade överraskningar.

Till exempel, för att analysera ett datum i formatet "dag/månad/år":

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

Lista över vanliga tokens och exempel

• ÅrÅÅÅÅ (2024), ÅÅ (24), Å (-500)
• Månad: MM (01–12), MMM (jan), MMMM (januari)
• DíaDD (01–31), C (1:a–31:a)
• Tid: HH (00–23), hh (01–12), mm (minuter), ss (sekunder)
• TidszonZ, ZZ

Dessa tokens kan kombineras för att skapa helt anpassade utdata. Se dokumentationen för en fullständig lista och specialfall.