Bekerja dengan Date dalam Javascript: new Date() vs Day.js vs Moment.js

Lihat siaran asal https://devaradise.com/date-in-javascript-dayjs-momentjs/ untuk dibaca dengan Jadual Kandungan

Mengendalikan tarikh dan masa ialah tugas biasa dalam pembangunan JavaScript. Walaupun objek Tarikh asli JavaScript menawarkan pelbagai kaedah untuk berfungsi dengan tarikh, terdapat senario yang menggunakan perpustakaan luaran seperti Day.js atau Moment.js boleh memudahkan aliran kerja anda dan menyediakan penyelesaian yang lebih mantap.

Dalam artikel ini, kami akan meneroka kes biasa yang boleh diselesaikan oleh objek Tarikh asli JavaScript dan yang paling baik dikendalikan oleh perpustakaan luaran. Kami juga akan membandingkan Day.js dan Moment.js untuk membantu anda memilih alat yang sesuai untuk keperluan anda.

Kes Biasa Boleh Selesaikan mengikut Tarikh JS Asli

Objek Tarikh JavaScript asli menyediakan pelbagai kaedah untuk bekerja dengan tarikh dan masa. Berikut ialah beberapa kes penggunaan biasa apabila objek Tarikh asli adalah mencukupi:

1. Mencipta Tarikh

const now = new Date(); // Current date and time
const specificDate = new Date('2024-07-16'); // Specific date

2. Mendapatkan Komponen Tarikh dan Masa

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // Months are zero-indexed
const day = now.getDate();

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

3. Menetapkan Komponen Tarikh dan Masa

const now = new Date();

now.setFullYear(2025);
now.setMonth(11); // December
now.setDate(25);

now.setHours(10);
now.setMinutes(11);
now.setSeconds(12);

4. Aritmetik Tarikh

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

5. Memformat Tarikh

const now = new Date();
const dateString = now.toDateString(); // Example: 'Tue Jul 16 2024'
const timeString = now.toTimeString(); // Example: '14:12:34 GMT+0200 (Central European Summer Time)'

6. Menghurai Tarikh

const parsedDate = new Date(Date.parse('2024-07-16T14:12:34Z'));

7. Membandingkan Tarikh

const date1 = new Date('2024-07-16');
const date2 = new Date('2024-07-17');
const isSame = date1.getTime() === date2.getTime(); // false
const isBefore = date1.getTime() < date2.getTime(); // true

8. Mendapatkan Hari dalam Minggu

const dayOfWeek = now.getDay(); // 0 for Sunday, 1 for Monday, etc.

9. Menukar kepada UTC dan ISO String

const now = new Date();
const isoDate = now.toISOString(); // 2024-07-22T11:30:59.827Z
const utcDate = now.toUTCString(); // Mon, 22 Jul 2024 11:30:42 GMT

Mengira Perbezaan Tarikh

const date1 = new Date('2024-01-01');
const date2 = new Date('2024-12-31');
const differenceInTime = date2 - date1;
const differenceInDays = differenceInTime / (1000 * 3600 * 24);
console.log(differenceInDays);

Kes Diselesaikan Terbaik oleh Perpustakaan Luaran Seperti Day.js dan Moment.js

Walaupun objek Tarikh asli merangkumi manipulasi tarikh asas, tugas tertentu dikendalikan dengan lebih cekap oleh perpustakaan luaran seperti Day.js dan Moment.js. Berikut ialah beberapa senario di mana perpustakaan ini cemerlang:

1. Pemformatan Lanjutan

// Day.js
const Day.jsDate = Day.js().format('YYYY-MM-DD HH:mm:ss');

// Moment.js
const momentDate = moment().format('YYYY-MM-DD HH:mm:ss');

2. Masa Relatif

// Day.js
Day.js.extend(relativeTime); // require RelativeTime plugin
Day.js('2024-01-01').from(Day.js('2023-01-01')); // a year ago

// Moment.js
moment('2024-01-01').from(moment('2023-01-01')); // a year ago

3. Pengendalian Zon Masa

Day.js.extend(utc);
Day.js.extend(timezone);
Day.js('2024-07-16 14:12:34').tz('America/New_York');

// Moment.js with moment-timezone
moment.tz('2024-07-16 14:12:34', 'America/New_York');

4. Pengantarabangsaan (i18n)

// Day.js
Day.js.locale('fr');
const frenchDate = Day.js().format('LLLL'); // dimanche 15 juillet 2012 11:01

// Moment.js
moment.locale('fr');
const frenchMomentDate = moment().format('LLLL'); // dimanche 15 juillet 2012 11:01

5. Mengendalikan Tarikh Tidak Sah

// Day.js
const invalidDay.js = Day.js('invalid date');
if (!invalidDay.js.isValid()) {
    console.log('Invalid date');
}

// Moment.js
const invalidMoment = moment('invalid date');
if (!invalidMoment.isValid()) {
    console.log('Invalid date');
}

6. Menghuraikan Format Tarikh Kompleks

// Day.js with customParseFormat plugin
Day.js.extend(customParseFormat);
const complexDate = Day.js('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

// Moment.js
const complexMoment = moment('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

7. Bekerja dengan Tempoh

// Day.js
Day.js.extend(duration);
const durationDay.js = Day.js.duration(5000); // 5 seconds
console.log(durationDay.js.asMinutes()); // 0.083333...
const humanizedDurationDay.js = Day.js.duration(5000).humanize(); // 'a few seconds'

// Moment.js
const durationMoment = moment.duration(5000); // 5 seconds
console.log(durationMoment.asMinutes()); // 0.083333...
const humanizedDurationMoment = moment.duration(5000).humanize(); // 'a few seconds'

Day.js vs Moment.js: Perbandingan Terperinci

Day.js dan Moment.js ialah dua perpustakaan popular untuk manipulasi tarikh dalam JavaScript. Walaupun kedua-duanya mempunyai tujuan yang sama, mereka mempunyai perbezaan yang berbeza dari segi prestasi, ciri dan kebolehgunaan. Perbandingan ini akan membantu anda memutuskan perpustakaan mana yang lebih sesuai untuk projek anda.

Day.js

Kebaikan

• Ringan: Day.js hanya bersaiz 2KB, jauh lebih kecil daripada Moment.js, yang menjadikannya sesuai untuk aplikasi sensitif prestasi.
• Kekal: Day.js menggalakkan kebolehubah, bermakna setiap operasi mengembalikan kejadian baharu, mengurangkan pepijat yang berkaitan dengan manipulasi tarikh.
• Seni Bina Plugin: Day.js mempunyai sistem pemalam modular, membolehkan anda memasukkan hanya fungsi yang anda perlukan. Ini memastikan saiz berkas anda minimum.
• Sintaks Moden: Day.js mengikuti sintaks JavaScript moden, menjadikannya lebih mudah untuk disepadukan dengan pangkalan kod moden.
• Keserasian: Day.js direka bentuk untuk menjadi pengganti drop-in untuk Moment.js, dengan API yang serupa.

Keburukan

• Kurang Ciri Terbina dalam: Day.js mempunyai lebih sedikit ciri terbina dalam berbanding Moment.js. Fungsi lanjutan memerlukan pemalam tambahan.
• Sokongan Zon Waktu Terhad: Day.js bergantung pada pemalam pihak ketiga untuk sokongan zon waktu yang komprehensif, manakala Moment.js mempunyai Zon Waktu Momen.
• Ekosistem Kurang Matang: Sebagai perpustakaan yang lebih baharu, Day.js mempunyai kurang penyepaduan dan sokongan komuniti berbanding Moment.js yang mantap.

Moment.js

Kebaikan

• Kaya Ciri: Moment.js menyediakan set ciri yang komprehensif untuk hampir mana-mana tugas manipulasi tarikh dan masa.
• Ekosistem Matang: Moment.js telah wujud sejak 2011, menghasilkan sokongan komuniti, pemalam dan penyepaduan yang meluas.
• Pengendalian Zon Waktu: Moment.js, dengan pemalam Zon Waktu Moment, menawarkan sokongan zon waktu yang teguh, menjadikannya sesuai untuk aplikasi yang perlu mengendalikan berbilang zon waktu.
• Dokumentasi Terperinci: Moment.js mempunyai dokumentasi yang terperinci dan diselenggara dengan baik, memudahkan pembangun mencari bantuan dan contoh.

Keburukan

• Saiz Besar: Moment.js jauh lebih besar daripada Day.js, yang boleh memberi kesan kepada prestasi, terutamanya dalam aplikasi sebelah pelanggan.
• Operasi Boleh Diubah: Operasi Moment.js memutasi objek tarikh asal, yang boleh membawa kepada gelagat yang tidak dijangka jika tidak diurus dengan teliti.
• Ditamatkan: Pasukan Moment.js telah menghentikan penggunaan perpustakaan, mengesyorkan alternatif seperti Day.js untuk projek baharu.

Jadual Perbandingan

Atas ialah kandungan terperinci Bekerja dengan Date dalam Javascript: new Date() vs Day.js vs Moment.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!