„Moment.js“: išsamus datų bibliotekos paaiškinimas ir praktiniai pavyzdžiai

Informatec Digital » Idiomos » „Moment.js“: išsamus datų bibliotekos paaiškinimas ir praktiniai pavyzdžiai

Darbas su datomis ir laiku „JavaScript“ kalboje gali būti tikras iššūkis žiniatinklio kūrėjams . Laimei, tokios priemonės kaip „Moment.js“ gerokai supaprastina šį procesą, palengvindamos viską – nuo ​​pagrindinio datos formatavimo iki sudėtingų manipuliavimo ir patvirtinimo operacijų. Jei kada nors jautėtės nusivylę bandydami teisingai konvertuoti, palyginti ar rodyti datas savo projektuose, „Moment.js“ tikriausiai buvo vienas geriausių jūsų draugų arba bent jau turėtumėte apsvarstyti galimybę jį naudoti.

Šiame straipsnyje papasakosiu viską, ką reikia žinoti apie „Moment.js“ : nuo pagrindinių funkcijų ir mažiau žinomų gudrybių iki praktinių pavyzdžių ir integracijos su kitomis bibliotekomis, įskaitant aiškų sintaksės paaiškinimą ir užduotis, kurias galite su ja atlikti. Taip pat apžvelgsime jos apribojimus, naujausius atnaujinimus ir alternatyvas, jei ieškote kažko modernesnio.

Kas yra „Moment.js“ ir kodėl jis tapo toks populiarus?

„Moment.js“ yra „JavaScript“ biblioteka, sukurta tam, kad darbas su datomis ir laiku būtų lengvas . Ji leidžia kurti, analizuoti, manipuliuoti ir rodyti datas praktiškai bet kokiu įsivaizduojamu formatu, naudojant paprastą, bet galingą sintaksę. Jau daugelį metų ši biblioteka yra pagrindinis bendruomenės sprendimas, siekiant įveikti „JavaScript“ gimtojo „Date()“ objekto apribojimus.

„Moment.js“ pagrindas sukasi apie `moment()` objektą , kuris gali konstruoti datas iš beveik bet kokios galiojančios įvesties: teksto eilučių, datos objektų, laiko žymų arba tiesiogiai su skaitiniais argumentais. Tai daro jį itin lanksčiu ir naudingu įvairiuose projektuose – nuo ​​mažų scenarijų iki įmonių programų, kurios tvarko tarptautines laiko juostas ar istorinius įrašus.

Kas lėmė jo sėkmę? Patikimumas, naudojimo paprastumas ir įvairių pridedamų įrankių bei papildinių . Net ir projektui perėjus prie priežiūros režimo, „Moment.js“ palaiko didelę vartotojų bazę ir išsamią dokumentaciją , taip sustiprindama savo, kaip pirmaujančio duomenų apdorojimo sprendimo „JavaScript“ ir „Node.js“ srityse , poziciją.

Pagrindinės „Moment.js“ savybės ir privalumai

• Paprasta ir intuityvi APIVienas didžiausių „Moment.js“ privalumų yra aiški sintaksė. Vos keliomis eilutėmis galite atlikti paprastas operacijas, pvz., gauti dabartinę datą, konvertuoti eilutę į konkretų formatą arba sudėtingus skaičiavimus ir patvirtinimus.
• Lankstus analizavimas ir formatavimasDar niekada nebuvo taip paprasta analizuoti beveik bet kokio formato datos eilutes ir konvertuoti jas į norimą išvestį. „Moment.js“ leidžia greitai ir neskausmingai formatuoti datas pasirinktinėse pateiktyse..
• Datos manipuliavimasDienų, mėnesių, metų, savaičių ar bet kurio kito laiko vieneto pridėjimas arba atimimas yra toks pat paprastas, kaip naudojant metodus papildyti() y atimti()Tai labai naudinga, kai reikia dirbti su santykinėmis datomis, terminais ar laiko intervalais, kurie dinamiškai kinta.
• Patikimas patvirtinimasJei reikia patikrinti, ar data galioja arba egzistuoja (pavyzdžiui, vasario 30 d.), „Moment.js“ tai palengvina. Metodas galiojantis() Jis geba aptikti subtilias datų formato ar logikos klaidas.
• Laiko juostų ir lokalizacijos palaikymasDėka jūsų įskiepio momentinė laiko juostaLabai lengva konvertuoti datas tarp skirtingų laiko juostų. Taip pat galite rodyti datas, pritaikytas prie vartotojo kalbos ir regioninių konvencijų, o tai yra labai svarbu pasaulinėse programose.
• Įskiepių ekosistemaBe pagrindinės bibliotekos, yra ir įskiepių ekosistema, skirta išplėsti jos funkcionalumą (kalendorių, suderinamumą su kitomis sistemomis, egzotiškus formatus...).

Kaip pradėti naudoti „Moment.js“ savo projekte

Diegimas labai paprastas . „Moment.js“ galite įtraukti į HTML kodą viena eilute:

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

Jei dirbate su „Node.js“ arba modernia kūrimo aplinka, įprasta ją įdiegti naudojant „npm“ arba „yarn“:

npm install moment

Kai tai bus padaryta, galėsite importuoti „Moment.js“ pagal naudojamą sintaksę:

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

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

Datų kūrimas: skirtingi būdai ir praktiniai pavyzdžiai

Lengvai sukurkite datas

Norėdami gauti dabartinę datą ir laiką, tiesiog naudokite moment():

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

Konkrečią datą galite sudaryti pateikdami argumentus:

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

Taip pat galite pradėti nuo nurodytos eilutės ir formato, net ir griežtuoju režimu:

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

Ar turite vietinį datos objektą?

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

Datų formatavimas ir rodymas

„Moment.js“ leidžia rodyti datas bet kokiu įsivaizduojamu formatu . Pavyzdžiui, norint rodyti dabartinę datą kaip diena/mėnuo/metai:

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

Jei norite labiau humanizuotos grandinės, galite naudoti:

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

Keletas naudingų formatavimo ženklų :

• YYYY4 skaitmenų metai
• MMmėnuo
• DDmėnesio diena
• hh o HHlaikas (12 val. arba 24 val. formatu)
• mmminutės
• sssekundės
• arytas/po pietų

Pavyzdžiui, norint rodyti tik laiką:

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

Išplėstinis formatavimas su žetonais ir regioniniu palaikymu

„Moment.js“ palaiko kelis lokalizuotus formatus ir vertimus . Galima akimirksniu perjungti kalbas, kad mėnesių ir dienų pavadinimai būtų rodomi kita kalba.

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

Datos manipuliavimas: sudėtis, atimtis ir palyginimas

Darbas su santykinėmis datomis yra vienas iš „Moment.js“ privalumų.

• Pridėti dienas, mėnesius arba metus:

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

• Atimti vienetus:

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

• Laikotarpių pradžia ir pabaiga:

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

Patvirtinkite datas ir aptikite klaidas

Prieš pradedant dirbti su datomis, labai svarbu patikrinti, ar jos teisingos:

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

Tai apsaugo nuo netikėtų klaidų programose, kurios gauna datas iš vartotojo.

Datų palyginimas: patikrinkite, ar data yra tarp kitų

„Moment.js“ apima kelis datų palyginimo metodus:

• yraPrieš(): Tikrina, ar viena data yra ankstesnė už kitą.
• isAfter (): Tikrina, ar data yra vėlesnė.
• yra tarp(): Nurodo, ar data yra tarp dviejų nurodytų datų.

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

Laiko juostų ir tarptautinių datų tvarkymas

Dirbant su vartotojais iš skirtingų pasaulio šalių, laiko juostos gali būti tikras galvos skausmas . Naudodami „ moment-timezone“ papildinį , galite lengvai konvertuoti datas tarp regionų.

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"

Be to, „Moment.js“ gali rodyti datas, pritaikytas prie vartotojo regioninių nustatymų , rodydamas teisingai išverstus mėnesių ir dienų pavadinimus.

Svarbiausi naudojimo pavyzdžiai ir pažangūs patarimai

Gaukite skirtumus tarp datų

Galite apskaičiuoti laiką, praėjusį tarp dviejų datų, skirtingais vienetais:

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

Santykinės datos ir žmonių laikas

„Moment.js“ puikiai tinka rodyti tokius pranešimus kaip „prieš 3 dienas“ arba „po 5 valandų“:

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

Žmogaus kalendorius

Funkcija „ calendar ()“ rodo santykines datas, pvz., „vakar 17:00“, „rytoj 9:00“, todėl ją labai patogu naudoti kalendoriaus programėlėse.

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

Palaikymas metų šuoliams ir ypatingoms dienoms

Ar norite sužinoti, ar metai yra keliamieji?

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

„ isLeapYear()“ metodas pateikia atsakymą tiesiogiai.

Išplėstinis pritaikymas: formatai, žetonai ir griežta analizė

„Moment.js“ leidžia dirbti su pasirinktinėmis eilutėmis ir žetonais, kad būtų galima kurti arba skaityti datas įvairiais formatais . Be to, griežtas režimas reikalauja tikslių atitikmenų, taip išvengiant smulkių klaidų ir nepageidaujamų netikėtumų.

Pavyzdžiui, norint išanalizuoti datą formatu „diena/mėnuo/metai“:

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

Įprastų žetonų ir pavyzdžių sąrašas

• Metai: YYYY (2024), YY (24), Y (-500)
• Mėnuo: MM (01–12), MMM (sausis), MMMM (sausis)
• ŠventėDD (01–31), C (1–31)
• Hora: HH (00–23), hh (01–12), mm (minutės), ss (sekundės)
• Laiko juostaZ, ZZ

Šiuos žetonus galima sujungti, kad būtų sukurti visiškai pritaikyti rezultatai. Visą sąrašą ir specialius atvejus rasite dokumentacijoje.