Moment.js: Täydellinen selitys ja käytännön esimerkkejä päivämääräkirjastosta

Informatec Digital » Idiootit » Moment.js: Täydellinen selitys ja käytännön esimerkkejä päivämääräkirjastosta

Päivämäärien ja kellonaikojen kanssa työskentely JavaScriptissä voi olla todellinen haaste web-kehittäjille . Onneksi työkalut, kuten Moment.js, yksinkertaistavat tätä prosessia merkittävästi ja helpottavat kaikkea päivämäärän perusmuotoilusta monimutkaisiin käsittely- ja validointioperaatioihin. Jos olet joskus turhautunut yrittäessäsi muuntaa, vertailla tai näyttää päivämääriä oikein projekteissasi, Moment.js on luultavasti ollut yksi parhaista ystävistäsi, tai ainakin sinun kannattaa harkita sen käyttöä.

Tässä artikkelissa kerron kaiken, mitä sinun tarvitsee tietää Moment.js :stä : sen päätoiminnoista ja vähemmän tunnetuista tempuista käytännön esimerkkeihin ja sen integrointiin muihin kirjastoihin, mukaan lukien selkeä selitys sen syntaksista ja tehtävistä, joita sillä voi suorittaa. Tarkastelemme myös sen rajoituksia, viimeaikaisia ​​päivityksiä ja vaihtoehtoja, jos etsit jotain modernimpaa.

Mikä on Moment.js ja miksi siitä on tullut niin suosittu?

Moment.js on JavaScript-kirjasto, joka on suunniteltu tekemään päivämäärien ja kellonaikojen kanssa työskentelystä vaivatonta . Sen avulla voit luoda, jäsentää, käsitellä ja näyttää päivämääriä käytännössä missä tahansa kuviteltavissa olevassa muodossa yksinkertaisen mutta tehokkaan syntaksin avulla. Tämä kirjasto on ollut vuosien ajan yhteisön ensisijainen ratkaisu JavaScriptin natiivin Date()-objektin rajoitusten voittamiseen.

Moment.js:n ydin pyörii `moment()` -objektin ympärillä , joka voi muodostaa päivämääriä lähes mistä tahansa kelvollisesta syötteestä: tekstimerkkijonoista, päivämääräobjekteista, aikaleimoista tai suoraan numeerisista argumenteista. Tämä tekee siitä erittäin joustavan ja hyödyllisen kaikenlaisissa projekteissa pienistä skripteistä yrityssovelluksiin, jotka hallitsevat kansainvälisiä aikavyöhykkeitä tai historiallisia tietoja.

Mikä on tehnyt siitä niin menestyksekkään? Sen luotettavuus, helppokäyttöisyys ja monipuoliset työkalut ja laajennukset . Vaikka projekti olisi siirtynyt ylläpitotilaan, Moment.js:llä on laaja käyttäjäkunta ja kattava dokumentaatio , mikä vahvistaa sen asemaa johtavana dataratkaisuna JavaScriptissä ja Node.js:ssä.

Moment.js:n tärkeimmät ominaisuudet ja edut

• Yksinkertainen ja intuitiivinen APIYksi Moment.js:n suurimmista vahvuuksista on sen selkeä syntaksi. Voit suorittaa yksinkertaisia toimintoja, kuten hakea nykyisen päivämäärän tai muuntaa merkkijonon tiettyyn muotoon, tai tehdä monimutkaisia laskelmia ja validointeja vain muutamalla rivillä.
• Joustava jäsentäminen ja muotoiluLähes minkä tahansa muotoisten päivämäärämerkkijonojen jäsentäminen ja muuntaminen haluttuun muotoon ei ole koskaan ollut helpompaa. Moment.js tekee päivämäärien muotoilusta nopeaa ja vaivatonta mukautetuissa esityksissä..
• Päivämäärän manipulointiPäivien, kuukausien, vuosien, viikkojen tai minkä tahansa muun aikayksikön lisääminen tai vähentäminen on yhtä helppoa kuin menetelmien käyttäminen lisätä() y vähentää()Tämä on erittäin hyödyllistä, kun sinun on työskenneltävä suhteellisten päivämäärien, määräpäivien tai dynaamisesti muuttuvien aikajaksojen kanssa.
• Vankka validointiJos sinun on tarkistettava, onko päivämäärä voimassa tai olemassa (esimerkiksi 30. helmikuuta), Moment.js tekee siitä helppoa. Metodi isValid() Se pystyy havaitsemaan hienovaraisia virheitä päivämäärien muodossa tai logiikassa.
• Tuki aikavyöhykkeille ja lokalisoinnilleKiitos laajennuksellesi hetki-aikavyöhykePäivämäärien muuntaminen eri aikavyöhykkeiden välillä on erittäin helppoa. Voit myös näyttää päivämääriä käyttäjän kieleen ja alueellisiin käytäntöihin mukautettuna, mikä on tärkeää globaaleissa sovelluksissa.
• Plugin-ekosysteemiPääkirjaston lisäksi on olemassa joukko laajennuksia, jotka laajentavat sen toiminnallisuutta (kalenteri, yhteensopivuus muiden sovelluskehysten kanssa, eksoottiset tiedostomuodot...).

Kuinka aloittaa Moment.js:n käyttö projektissasi

Asennus on erittäin suoraviivaista . Voit sisällyttää Moment.js:n HTML-koodiisi yhdellä rivillä:

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

Jos työskentelet Node.js:n tai modernin kehitysympäristön kanssa, on yleistä asentaa se npm:n tai yarnin avulla:

npm install moment

Kun tämä on tehty, voit tuoda Moment.js:n käyttämäsi syntaksin mukaisesti:

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

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

Päivämäärien luominen: eri tapoja ja käytännön esimerkkejä

Luo päivämääriä helposti

Saadaksesi nykyisen päivämäärän ja kellonajan, käytä yksinkertaisesti moment():

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

Voit muodostaa tietyn päivämäärän antamalla argumentteja:

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

Voit myös aloittaa tietystä merkkijonosta ja muodosta, jopa tiukassa tilassa:

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

Onko sinulla natiivi Date-objekti?

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

Päivämäärien muotoilu ja näyttäminen

Moment.js:n avulla voit näyttää päivämääriä missä tahansa kuviteltavissa olevassa muodossa . Esimerkiksi nykyisen päivämäärän näyttämiseksi muodossa päivä/kuukausi/vuosi:

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

Jos haluat inhimillisemmän ketjun, voit käyttää:

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

Joitakin hyödyllisiä muotoilumerkkejä :

• YYYY4-numeroinen vuosi
• MMkuukausi
• DD: kuukauden päivä
• hh o HHaika (12 tai 24 tunnin muoto)
• mmminuuttia
• sssekuntia
• a: aamupäivällä/iltapäivällä

Esimerkiksi vain ajan näyttämiseksi:

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

Edistynyt muotoilu tokeneilla ja alueellisella tuella

Moment.js tukee useita lokalisoituja formaatteja ja käännöksiä . Kieltä voi vaihtaa lennossa, jolloin kuukausien ja päivien nimet näytetään toisella kielellä.

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

Päivämäärän manipulointi: yhteen-, vähennys- ja vertailulasku

Suhteellisten päivämäärien kanssa työskentely on yksi Moment.js:n vahvuuksista.

• Lisää päiviä, kuukausia tai vuosia:

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

• Vähennä yksiköitä:

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

• Jaksojen alku ja loppu:

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

Vahvista päivämäärät ja havaitse virheet

Ennen päivämäärien kanssa työskentelyä on tärkeää varmistaa, että ne ovat oikein:

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

Tämä estää odottamattomia virheitä sovelluksissa, jotka vastaanottavat päivämääriä käyttäjältä.

Päivämäärävertailu: tarkista, onko päivämäärä muiden joukossa

Moment.js sisältää useita menetelmiä päivämäärien vertailuun:

• onEnnen(): Tarkistaa, onko yksi päivämäärä ennen toista.
• onJälkeen(): Tarkistaa, onko päivämäärä myöhäisempi.
• onVälillä(): Ilmaisee, onko päivämäärä kahden annetun päivämäärän välissä.

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

Aikavyöhykkeiden ja kansainvälisten päivämäärien käsittely

Kun työskentelet eri puolilla maailmaa olevien käyttäjien kanssa, aikavyöhykkeet voivat olla todellinen päänsärky . Moment-timezone- laajennuksen avulla voit helposti muuntaa päivämääriä alueiden välillä.

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"

Lisäksi Moment.js pystyy näyttämään päivämäärät käyttäjän alueellisten asetusten mukaan ja näyttämään oikein käännettyjen kuukausien ja päivien nimet.

Tärkeimmät käyttöesimerkit ja edistyneet vinkit

Hae päivämäärien välisiä eroja

Voit laskea kahden päivämäärän välisen ajan eri yksiköissä:

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

Suhteelliset päivämäärät ja ihmisen ajat

Moment.js on loistava näyttämään viestejä, kuten "3 päivää sitten" tai "5 tunnin kuluttua":

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

Ihmisen kalenteri

calendar () -funktio näyttää suhteellisia päivämääriä, kuten "eilen klo 17.00", "huomenna klo 9.00", mikä tekee siitä erittäin käyttökelpoisen kalenterisovelluksissa.

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

Tuki vuodenvaihteille ja erityispäiville

Haluatko tietää, onko vuosi karkausvuosi?

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

isLeapYear() -metodi antaa vastauksen suoraan.

Edistynyt mukauttaminen: muodot, tunnukset ja tarkka jäsentäminen

Moment.js:n avulla voit työskennellä mukautettujen merkkijonojen ja tokeneiden kanssa luodaksesi tai lukeaksesi päivämääriä lukemattomissa muodoissa . Lisäksi tiukka tila vaatii tarkkoja osumia, mikä estää hienovaraiset virheet ja ei-toivotut yllätykset.

Esimerkiksi päivämäärän jäsentämiseksi muodossa "päivä/kuukausi/vuosi":

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

Luettelo yleisistä tokeneista ja esimerkeistä

• Vuosi: VVVV (2024), VV (24), V (-500)
• Kuukausi: KK (01–12), KKK (Tammikuu), KKK (Tammikuu)
• Päivä: DD (01–31), C (1.–31.)
• aika: HH (00–23), hh (01–12), mm (minuutit), ss (sekunnit)
• AikavyöhykeZ, ZZ

Näitä tokeneita voidaan yhdistää täysin räätälöityjen tulosteiden luomiseksi. Katso täydellinen luettelo ja erikoistapaukset dokumentaatiosta.