在 Javascript 中使用日期：new Date() vs Day.js vs Moment.js

看原始貼文 https://devaradise.com/date-in-javascript-dayjs-momentjs/ 以閱讀目錄

處理日期和時間是 JavaScript 開發中的常見任務。雖然 JavaScript 的原生 Date 物件提供了多種處理日期的方法，但在某些情況下，使用 Day.js 或 Moment.js 等外部程式庫可以簡化您的工作流程並提供更強大的解決方案。

在本文中，我們將探討可以透過 JavaScript 的本機 Date 物件解決的常見情況以及最適合由外部程式庫處理的情況。我們也會比較 Day.js 和 Moment.js，以幫助您選擇適合您需求的工具。

原生 JS 可解決的常見情況 Date

原生 JavaScript Date 物件提供了一系列處理日期和時間的方法。以下是一些常見的用例，其中原生 Date 物件就足夠了：

1. 建立日期

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

2. 取得日期和時間組件

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. 設定日期和時間組件

const now = new Date();

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

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

4. 日期算術

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

5. 格式化日期

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. 解析日期

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

7. 比較日期

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. 取得星期幾

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

9. 轉換為UTC和ISO字串

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);

最好透過 Day.js 和 Moment.js 等外部函式庫解決的情況

雖然原生 Date 物件涵蓋了基本的日期操作，但某些任務可以透過 Day.js 和 Moment.js 等外部函式庫更有效地處理。以下是這些庫表現出色的一些場景：

1. 高級格式化

// 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. 相對時間

// 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. 時區處理

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.國際化（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. 處理無效日期

// 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. 解析複雜的日期格式

// 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. 使用持續時間

// 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 與 Moment.js：詳細比較

Day.js 和 Moment.js 是 JavaScript 中兩個流行的日期操作庫。雖然兩者俱有相同的用途，但它們在性能、功能和可用性方面存在明顯差異。這種比較將幫助您決定哪個庫更適合您的專案。

Day.js

優點

• 輕量級：Day.js 只有 2KB，明顯小於 Moment.js，這使得它非常適合效能敏感的應用程式。
• 不可變：Day.js 促進不變性，這意味著每個操作都會傳回一個新實例，減少與日期操作相關的錯誤。
• 外掛程式架構：Day.js 有一個模組化插件系統，讓您只包含您需要的功能。這可以使您的捆綁包尺寸最小化。
• 現代語法：Day.js 遵循現代 JavaScript 語法，使其更容易與現代程式碼庫整合。
• 相容性：Day.js 被設計為 Moment.js 的直接替代品，具有類似的 API。

缺點

• 內建功能更少：與 Moment.js 相比，Day.js 的內建功能較少。進階功能需要額外的插件。
• 有限時區支援：Day.js 依賴第三方插件來提供全面的時區支持，而 Moment.js 具有 Moment 時區。
• 不太成熟的生態系統：作為一個較新的函式庫，與成熟的 Moment.js 相比，Day.js 的整合和社群支援較少。

Moment.js

優點

• 功能豐富：Moment.js 為幾乎所有日期和時間操作任務提供了一套全面的功能。
• 成熟的生態系統：Moment.js 自 2011 年以來一直存在，帶來了廣泛的社群支援、插件和整合。
• 時區處理：Moment.js 及其 Moment Timezone 外掛提供了強大的時區支持，使其成為需要處理多個時區的應用程式的理想選擇。
• 詳細文檔：Moment.js 擁有詳細且維護良好的文檔，使開發人員更容易找到幫助和範例。

缺點

• 大尺寸：Moment.js 明顯大於 Day.js，這會影響效能，尤其是在客戶端應用程式中。
• 可變操作：Moment.js 操作會改變原始日期對象，如果不仔細管理，可能會導致意外行為。
• 已棄用：Moment.js 團隊已棄用該函式庫，為新專案推薦 Day.js 等替代方案。

比較表

功能 Day.js Moment.js 標題>

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

尺寸 ~2KB ~70KB

不變性

是 否

外掛架構

是 有限

功能集

基本（可透過插件擴充） 綜合

時區支援

有限（透過插件） 廣泛（時刻時區）

生態系

成長 成熟 文檔 好 廣泛 現代語法

是 否

API 相容性

類似於Moment.js 不適用 狀態 積極維護 已棄用 表> 結論

在 JavaScript 中處理日期時，為任務選擇正確的工具至關重要。原生 JavaScript Date 物件足以完成基本的日期操作任務，但對於更進階的操作，Day.js 和 Moment.js 等程式庫提供了強大且方便的功能。

在 Day.js 和 Moment.js 之間做出選擇時，請考慮您專案的特定需求。

如果您需要一個具有模組化功能的輕量級、現代且不可變的函式庫，請選擇 Day.js。它非常適合性能敏感的應用程式和項目，不需要大量開箱即用的時區處理。 如果您需要一個功能豐富的函式庫，具有全面的時區支援和成熟的生態系統，請選擇 Moment.js。但是，請記住 Moment.js 已被棄用，對於新項目，建議考慮 Day.js 等替代方案。 最終，這兩個函式庫都有自己的優勢並且適合不同類型的專案。仔細評估您的專案要求以做出明智的決定。嘗試將這些工具整合到您的下一個專案中，體驗在 JavaScript 中處理日期的便利性。 編碼愉快！

以上是在 Javascript 中使用日期：new Date() vs Day.js vs Moment.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！