Moment.js: Kumpletong paliwanag at praktikal na mga halimbawa ng date library

Informatec Digital » Mga wika » Moment.js: Kumpletong paliwanag at praktikal na mga halimbawa ng date library

Ang paggamit ng mga petsa at oras sa JavaScript ay maaaring maging isang tunay na hamon para sa mga web developer . Mabuti na lang, ang mga tool tulad ng Moment.js ay lubos na nagpapadali sa prosesong ito, na ginagawang mas madali ang lahat mula sa pangunahing pag-format ng petsa hanggang sa kumplikadong manipulasyon at mga operasyon sa pagpapatunay. Kung nakaramdam ka na ng pagkadismaya sa pagsisikap na i-convert, ihambing, o ipakita nang tama ang mga petsa sa iyong mga proyekto, ang Moment.js ay malamang na isa sa iyong pinakamatalik na kaibigan, o kahit papaano ay dapat mong isaalang-alang ang paggamit nito.

Sa artikulong ito, sasabihin ko sa iyo ang lahat ng kailangan mong malaman tungkol sa Moment.js : mula sa mga pangunahing tungkulin nito at mga hindi gaanong kilalang trick, hanggang sa mga praktikal na halimbawa at ang integrasyon nito sa iba pang mga library, kabilang ang isang malinaw na paliwanag sa syntax nito at ang mga gawaing magagawa mo gamit ito. Titingnan din natin ang mga limitasyon nito, mga kamakailang update, at kung anong mga alternatibo ang mayroon ka kung naghahanap ka ng mas moderno.

Ano ang Moment.js at bakit ito naging napakasikat?

Ang Moment.js ay isang JavaScript library na idinisenyo upang gawing madali ang pagtatrabaho sa mga petsa at oras . Pinapayagan ka nitong lumikha, mag-parse, manipulahin, at magpakita ng mga petsa sa halos anumang format na maiisip gamit ang simple ngunit makapangyarihang syntax. Sa loob ng maraming taon, ang library na ito ang naging pangunahing solusyon ng komunidad para malampasan ang mga limitasyon ng katutubong Date() object ng JavaScript.

Ang core ng Moment.js ay umiikot sa `moment()` object , na maaaring bumuo ng mga petsa mula sa halos anumang wastong input: mga text string, Date object, timestamp, o direkta gamit ang mga numeric argument. Ginagawa nitong lubos itong flexible at kapaki-pakinabang sa lahat ng uri ng proyekto, mula sa maliliit na script hanggang sa mga enterprise application na namamahala sa mga internasyonal na time zone o mga historical record.

Ano ang dahilan kung bakit ito naging matagumpay? Ang pagiging maaasahan, kadalian ng paggamit, at ang iba't ibang kasamang tool at plugin . Kahit na ang proyekto ay nasa maintenance mode na, ang Moment.js ay nagpapanatili ng malaking user base at malawak na dokumentasyon , na nagpapatibay sa posisyon nito bilang nangungunang solusyon sa JavaScript at Node.js.

Mga pangunahing tampok at benepisyo ng Moment.js

• Simple at intuitive na APIAng isa sa mga pinakamalaking lakas ng Moment.js ay ang malinaw na syntax nito. Maaari kang magsagawa ng mga simpleng operasyon, tulad ng pagkuha ng kasalukuyang petsa o pag-convert ng string sa isang partikular na format, o kumplikadong mga kalkulasyon at pagpapatunay sa ilang linya lamang.
• Flexible na pag-parse at pag-formatAng pag-parse ng mga string ng petsa ng halos anumang format at pag-convert sa mga ito sa nais na output ay hindi kailanman naging mas madali. Ginagawang mabilis at walang sakit ng Moment.js ang pag-format ng mga petsa sa mga custom na presentasyon..
• Pagmamanipula ng petsa: Ang pagdaragdag o pagbabawas ng mga araw, buwan, taon, linggo, o anumang iba pang yunit ng oras ay kasing simple ng paggamit ng mga pamamaraan magdagdag () y ibawas()Ito ay lubhang kapaki-pakinabang kapag kailangan mong magtrabaho kasama ang mga kaugnay na petsa, takdang petsa, o timeframe na dynamic na nag-iiba.
• Matibay na pagpapatunay: Kung kailangan mong tingnan kung valid o umiiral ang isang petsa (halimbawa, ika-30 ng Pebrero), ginagawang madali para sa iyo ng Moment.js. Ang pamamaraan ay pwede() Nagagawa nitong makakita ng mga banayad na error sa format o lohika ng mga petsa.
• Suporta para sa mga time zone at lokalisasyon: Salamat sa iyong plugin sandali-timezoneNapakadaling i-convert ang mga petsa sa pagitan ng iba't ibang time zone. Maaari ka ring magpakita ng mga petsa na inangkop sa wika ng gumagamit at mga rehiyonal na kombensiyon, na susi sa mga pandaigdigang aplikasyon.
• Plugin ecosystem: Bukod sa pangunahing aklatan, mayroong isang ecosystem ng mga plugin upang mapalawak ang paggana nito (kalendaryo, pagiging tugma sa iba pang mga balangkas, kakaibang mga format...).

Paano magsimula sa Moment.js sa iyong proyekto

Napakadali lang ng pag-install . Maaari mong isama ang Moment.js sa iyong HTML gamit ang isang linya lamang:

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

Kung nagtatrabaho ka sa Node.js o isang modernong development environment, karaniwan itong i-install gamit ang npm o yarn:

npm install moment

Kapag tapos na ito, maaari kang mag-import ng Moment.js ayon sa syntax na iyong ginagamit:

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

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

Paglikha ng mga petsa: iba't ibang paraan at praktikal na mga halimbawa

Lumikha ng mga petsa nang madali

Upang makuha ang kasalukuyang petsa at oras, gamitin lang moment():

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

Maaari kang bumuo ng isang tiyak na petsa sa pamamagitan ng pagpasa ng mga argumento:

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

Maaari ka ring magsimula mula sa isang ibinigay na string at format, kahit na sa mahigpit na mode:

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

Mayroon ka bang katutubong bagay na Petsa?

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

Pag-format at pagpapakita ng mga petsa

Binibigyang-daan ka ng Moment.js na ipakita ang mga petsa sa anumang maiisip na format . Halimbawa, para ipakita ang kasalukuyang petsa bilang araw/buwan/taon:

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

Kung gusto mo ng mas humanized na chain, maaari mong gamitin ang:

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

Ilang kapaki-pakinabang na token para sa pag-format :

• YYYY: 4-digit na taon
• MM: aking
• DD: araw ng buwan
• hh o HH: oras (12h o 24h na format)
• mm: minuto
• ss: segundo
• a: am/pm

Halimbawa, upang ipakita lamang ang oras:

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

Advanced na pag-format gamit ang mga token at suporta sa rehiyon

Sinusuportahan ng Moment.js ang maraming naisalokal na format at pagsasalin . Posibleng magpalit ng wika nang mabilisan upang maipakita ang mga pangalan ng buwan at araw sa ibang wika.

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

Pagmamanipula ng petsa: pagdaragdag, pagbabawas, at paghahambing

Ang pagtatrabaho sa mga kamag-anak na petsa ay isa sa mga lakas ng Moment.js.

• Magdagdag ng mga araw, buwan o taon:

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

• Magbawas ng mga yunit:

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

• Simula at pagtatapos ng mga regla:

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

I-validate ang mga petsa at tuklasin ang mga error

Bago gamitin ang mga petsa, mahalagang patunayan na tama ang mga ito:

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

Pinipigilan nito ang mga hindi inaasahang bug sa mga application na tumatanggap ng mga petsa mula sa user.

Paghahambing ng petsa: tingnan kung kasama ang isang petsa

Kasama sa Moment.js ang ilang paraan para sa paghahambing ng mga petsa:

• isBefore(): Sinusuri kung ang isang petsa ay bago ang isa pa.
• isAfter(): Tinitingnan kung ang isang petsa ay mamaya.
• isBetween(): Isinasaad kung ang isang petsa ay nasa pagitan ng dalawang ibinigay na petsa.

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

Pangangasiwa sa mga time zone at internasyonal na petsa

Kapag nakikipagtulungan sa mga user sa iba't ibang bahagi ng mundo, ang mga time zone ay maaaring maging isang tunay na sakit ng ulo . Gamit ang moment-timezone plugin , madali mong mako-convert ang mga petsa sa pagitan ng mga rehiyon.

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"

Bukod pa rito, nagagawa ng Moment.js na ipakita ang mga petsang iniangkop sa mga setting ng rehiyon ng gumagamit , na nagpapakita ng wastong pagkasalin ng mga pangalan ng buwan at araw.

Mga halimbawa ng pangunahing paggamit at advanced na tip

Kumuha ng mga pagkakaiba sa pagitan ng mga petsa

Maaari mong kalkulahin ang oras na lumipas sa pagitan ng dalawang petsa sa magkaibang unit:

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

Mga kamag-anak na petsa at panahon ng tao

Mahusay ang Moment.js para sa pagpapakita ng mga mensahe tulad ng "3 araw ang nakalipas" o "sa 5 oras":

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

Kalendaryo ng tao

Ang calendar() function ay nagpapakita ng mga relatibong petsa tulad ng "kahapon ng 17:00 PM", "bukas ng 9:00 AM", kaya napakagamit nito para sa mga calendar app.

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

Suporta para sa mga pagtalon sa taon at mga espesyal na araw

Gusto mo bang malaman kung ang isang taon ay isang taon ng paglukso?

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

Ang pamamaraang isLeapYear() ay direktang nagbibigay sa iyo ng sagot.

Advanced na pag-customize: mga format, token, at mahigpit na pag-parse

Binibigyang-daan ka ng Moment.js na gumamit ng mga custom na string at token para lumikha o magbasa ng mga petsa sa napakaraming format . Bukod pa rito, ang strict mode ay nangangailangan ng eksaktong mga tugma, na pumipigil sa mga banayad na error at hindi kanais-nais na mga sorpresa.

Halimbawa, para mag-parse ng petsa sa format na "araw/buwan/taon":

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

Listahan ng mga karaniwang token at mga halimbawa

• Taon: YYYY (2024), YY (24), Y (-500)
• Buwan: MM (01 – 12), MMM (Ene), MMMM (Enero)
• Dia: DD (01 – 31), C (1st – 31st)
• Oras: HH (00 – 23), hh (01 – 12), mm (minuto), ss (segundo)
• Time zone: Z, ZZ

Ang mga token na ito ay maaaring pagsamahin upang lumikha ng ganap na customized na mga output. Tingnan ang dokumentasyon para sa buong listahan at mga espesyal na kaso.