Rumah > Artikel > hujung hadapan web > 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.
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:
const now = new Date(); // Current date and time const specificDate = new Date('2024-07-16'); // Specific date
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();
const now = new Date(); now.setFullYear(2025); now.setMonth(11); // December now.setDate(25); now.setHours(10); now.setMinutes(11); now.setSeconds(12);
const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
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)'
const parsedDate = new Date(Date.parse('2024-07-16T14:12:34Z'));
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
const dayOfWeek = now.getDay(); // 0 for Sunday, 1 for Monday, etc.
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
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);
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:
// 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');
// 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
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');
// 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
// 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'); }
// 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');
// 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 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.
Feature | Day.js | Moment.js |
---|---|---|
Size | ~2KB | ~70KB |
Immutability | Yes | No |
Plugin Architecture | Yes | Limited |
Feature Set | Basic (extensible via plugins) | Comprehensive |
Timezone Support | Limited (via plugins) | Extensive (Moment Timezone) |
Ecosystem | Growing | Mature |
Documentation | Good | Extensive |
Modern Syntax | Yes | No |
API Compatibility | Similar to Moment.js | N/A |
Status | Actively maintained | Deprecated |
Seni Bina Plugin
Set Ciri
Ekosistem
Keserasian API
Apabila bekerja dengan tarikh dalam JavaScript, adalah penting untuk memilih alat yang sesuai untuk tugas itu. Objek Tarikh JavaScript asli mencukupi untuk tugas manipulasi tarikh asas, tetapi untuk operasi yang lebih maju, perpustakaan seperti Day.js dan Moment.js menawarkan ciri yang hebat dan mudah.
Apabila membuat keputusan antara Day.js dan Moment.js, pertimbangkan keperluan khusus projek anda.
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!