Moment.js: Penerangan lengkap dan contoh praktikal perpustakaan tarikh

Informatec Digital » Idiom » Moment.js: Penerangan lengkap dan contoh praktikal perpustakaan tarikh

Bekerja dengan tarikh dan masa dalam JavaScript boleh menjadi cabaran sebenar bagi pembangun web . Nasib baik, alat seperti Moment.js memudahkan proses ini dengan ketara, menjadikan segala-galanya daripada pemformatan tarikh asas kepada manipulasi dan operasi pengesahan yang kompleks menjadi lebih mudah. ​​Jika anda pernah berasa kecewa cuba menukar, membandingkan atau memaparkan tarikh dengan betul dalam projek anda, Moment.js mungkin merupakan salah satu rakan baik anda, atau sekurang-kurangnya anda harus mempertimbangkan untuk menggunakannya.

Dalam artikel ini, saya akan memberitahu anda semua yang anda perlu tahu tentang Moment.js : daripada fungsi utamanya dan helah yang kurang dikenali, kepada contoh praktikal dan penyepaduannya dengan pustaka lain, termasuk penjelasan yang jelas tentang sintaksnya dan tugas yang boleh anda capai dengannya. Kami juga akan melihat batasannya, kemas kini terkini dan alternatif yang anda ada jika anda mencari sesuatu yang lebih moden.

Apakah Moment.js dan mengapa ia menjadi begitu popular?

Moment.js ialah pustaka JavaScript yang direka untuk memudahkan kerja dengan tarikh dan masa . Ia membolehkan anda mencipta, menghuraikan, memanipulasi dan memaparkan tarikh dalam hampir semua format yang boleh dibayangkan dengan sintaks yang ringkas tetapi berkuasa. Selama bertahun-tahun, pustaka ini telah menjadi penyelesaian utama komuniti untuk mengatasi batasan objek Date() natif JavaScript.

Teras Moment.js berkisar tentang objek `moment()` , yang boleh membina tarikh daripada hampir semua input yang sah: rentetan teks, objek Tarikh, cap waktu atau secara langsung dengan argumen berangka. Ini menjadikannya sangat fleksibel dan berguna dalam semua jenis projek, daripada skrip kecil hingga aplikasi perusahaan yang mengurus zon waktu antarabangsa atau rekod sejarah.

Apakah yang menjadikannya begitu berjaya? Kebolehpercayaannya, kemudahan penggunaannya dan pelbagai alatan serta plugin yang disertakan . Walaupun projek telah memasuki mod penyelenggaraan, Moment.js mengekalkan pangkalan pengguna yang besar dan dokumentasi yang meluas , mengukuhkan kedudukannya sebagai penyelesaian terbaharu terkemuka dalam JavaScript dan Node.js.

Ciri dan faedah utama Moment.js

• API yang mudah dan intuitifSalah satu kekuatan terbesar Moment.js ialah sintaksnya yang jelas. Anda boleh melakukan operasi mudah, seperti mendapatkan tarikh semasa atau menukar rentetan kepada format tertentu, atau pengiraan dan pengesahan kompleks dalam beberapa baris sahaja.
• Penghuraian dan pemformatan yang fleksibelMenghuraikan rentetan tarikh hampir semua format dan menukarnya kepada output yang diingini tidak pernah semudah ini. Moment.js menjadikannya pantas dan tidak menyakitkan untuk memformat tarikh dalam pembentangan tersuai..
• Manipulasi tarikh: Menambah atau menolak hari, bulan, tahun, minggu atau mana-mana unit masa adalah semudah menggunakan kaedah Tambah() y tolak()Ini sangat berguna apabila anda perlu bekerja dengan tarikh relatif, tarikh akhir atau rangka masa yang berbeza-beza secara dinamik.
• Pengesahan yang mantap: Jika anda perlu menyemak sama ada tarikh itu sah atau wujud (contohnya, 30 Februari), Moment.js memudahkan anda. Kaedahnya ianya sah() Ia mampu mengesan ralat halus dalam format atau logik tarikh.
• Sokongan untuk zon waktu dan penyetempatan: Terima kasih kepada pemalam anda zon masa detikSangat mudah untuk menukar tarikh antara zon waktu yang berbeza. Anda juga boleh memaparkan tarikh yang disesuaikan dengan bahasa pengguna dan konvensyen serantau, yang merupakan kunci dalam aplikasi global.
• Ekosistem pemalam: Selain daripada perpustakaan utama, terdapat ekosistem pemalam untuk melanjutkan fungsinya (kalendar, keserasian dengan rangka kerja lain, format eksotik...).

Cara untuk bermula dengan Moment.js dalam projek anda

Pemasangan adalah sangat mudah . ​​Anda boleh memasukkan Moment.js dalam HTML anda dengan satu baris:

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

Jika anda bekerja dengan Node.js atau persekitaran pembangunan moden, adalah perkara biasa untuk memasangnya menggunakan npm atau benang:

npm install moment

Setelah ini selesai, anda boleh mengimport Moment.js mengikut sintaks yang anda gunakan:

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

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

Mencipta tarikh: cara yang berbeza dan contoh praktikal

Buat tarikh dengan mudah

Untuk mendapatkan tarikh dan masa semasa, guna sahaja moment():

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

Anda boleh membina tarikh tertentu dengan menghantar argumen:

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

Anda juga boleh bermula dari rentetan dan format yang diberikan, walaupun dalam mod ketat:

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

Adakah anda mempunyai objek Tarikh asli?

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

Memformat dan memaparkan tarikh

Moment.js membolehkan anda memaparkan tarikh dalam sebarang format yang boleh dibayangkan . Contohnya, untuk memaparkan tarikh semasa sebagai hari/bulan/tahun:

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

Jika anda mahukan rantaian yang lebih berperikemanusiaan, anda boleh menggunakan:

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

Beberapa token berguna untuk pemformatan :

• YYYY: tahun 4 digit
• MM: saya
• DD: hari dalam bulan
• hh o HH: masa (format 12j atau 24j)
• mm: minit
• ss: saat
• a: pagi/petang

Sebagai contoh, untuk memaparkan masa sahaja:

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

Pemformatan lanjutan dengan token dan sokongan serantau

Moment.js menyokong pelbagai format dan terjemahan setempat . Anda boleh menukar bahasa dengan pantas untuk memaparkan nama bulan dan hari dalam bahasa lain.

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

Manipulasi tarikh: penambahan, penolakan dan perbandingan

Bekerja dengan tarikh relatif adalah salah satu kekuatan Moment.js.

• Tambah hari, bulan atau tahun:

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

• Tolak unit:

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

• Mula dan akhir haid:

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

Sahkan tarikh dan mengesan ralat

Sebelum beroperasi dengan tarikh adalah penting untuk mengesahkan bahawa tarikh itu betul:

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

Ini menghalang pepijat yang tidak dijangka dalam aplikasi yang menerima tarikh daripada pengguna.

Perbandingan tarikh: semak sama ada tarikh adalah antara lain

Moment.js termasuk beberapa kaedah untuk membandingkan tarikh:

• isBefore(): Menyemak sama ada satu tarikh sebelum tarikh lain.
• isAfter(): Menyemak jika tarikhnya lewat.
• isBetween(): Menunjukkan sama ada tarikh adalah antara dua tarikh yang diberikan.

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

Mengendalikan zon waktu dan tarikh antarabangsa

Apabila bekerja dengan pengguna di bahagian yang berbeza di dunia, zon waktu boleh menjadi satu masalah . Dengan pemalam moment-timezone , anda boleh menukar tarikh antara rantau dengan mudah.

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"

Di samping itu, Moment.js dapat memaparkan tarikh yang disesuaikan dengan tetapan serantau pengguna , menunjukkan nama bulan dan hari yang diterjemahkan dengan betul.

Contoh penggunaan utama dan petua lanjutan

Dapatkan perbezaan antara tarikh

Anda boleh mengira masa berlalu antara dua tarikh dalam unit yang berbeza:

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

Tarikh relatif dan masa manusia

Moment.js bagus untuk memaparkan mesej seperti "3 hari lalu" atau "dalam 5 jam":

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

kalendar manusia

Fungsi calendar () memaparkan tarikh relatif seperti "semalam pada pukul 17:00 PTG", "esok pada pukul 9:00 PG", menjadikannya sangat berguna untuk aplikasi kalendar.

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

Sokongan untuk lompat tahun dan hari istimewa

Adakah anda ingin tahu sama ada setahun adalah tahun lompat?

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

Kaedah isLeapYear() memberikan anda jawapan secara langsung.

Penyesuaian lanjutan: format, token dan penghuraian yang ketat

Moment.js membolehkan anda menggunakan rentetan dan token tersuai untuk mencipta atau membaca tarikh dalam pelbagai format . Tambahan pula, mod ketat memerlukan padanan tepat, mencegah ralat halus dan kejutan yang tidak diingini.

Contohnya, untuk menghuraikan tarikh dalam format "hari/bulan/tahun":

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

Senarai token biasa dan contoh

• Tahun: YYYY (2024), YY (24), Y (-500)
• Bulan: MM (01 – 12), MMM (Jan), MMMM (Januari)
• DIA: DD (01 – 31), C (1 – 31)
• Hora: HH (00 – 23), hh (01 – 12), mm (minit), ss (saat)
• Zon waktu: Z, ZZ

Token ini boleh digabungkan untuk mencipta output tersuai sepenuhnya. Lihat dokumentasi untuk senarai penuh dan kes khas.