日期操作是 JavaScript 中的常見任務，原生 date 對象提供了一些基本功能。但是，處理日期可能很復雜且容易出錯，并且 Date 缺乏執行這些常見任務所需的功能。為了使日期處理變得更容易、更可靠，開發人員必須依賴第三方庫。 JavaScript 生態系統中有很多可用的，但 date-fns 脫穎而出，成為事實上的標準。它是一個用于解析、格式化和操作日期的輕量級實用程序庫。
在本教程中，我們將探索使用 date-fns 的基礎知識，并涵蓋處理日期的最常用函數。最后，您將深入了解如何將 date-fns 合并到 JavaScript 項目中以有效處理日期。
安裝 date-fns
date-fns 是一個 Node 包。因此，如果您使用 npm、Babel 或 webpack 等工具堆棧，則可以使用以下 npm 命令安裝 date-fns：
npm install date-fns --save
如果您對其中任何一個感到陌生，請不要擔心；您也可以在瀏覽器中使用 date-fns！只需將以下 <script></script> 元素添加到您的 html 中即可：
<script type="module"> import * as dateFns from 'https://cdn.jsdelivr.net/npm/date-fns/+esm'; </script>
這是一個 JavaScript 模塊，從 jsdelivr 網絡導入最新版本的 date-fns 庫。通過此導入，所有 date-fns 函數和實用程序都可以通過 dateFns 對象訪問。請注意，要成功運行本教程中的所有代碼，代碼必須包含在導入 date-fns 的同一模塊中。
格式化日期
處理日期時的主要任務之一是將其格式化為人類可讀的字符串。 JavaScript 的 Date 對象對格式化日期具有基本支持，但缺乏對自定義格式的支持。 date-fns 為此提供了格式化函數。
const today = new Date(); const formattedDate1 = dateFns.format(today, 'dd MMMM yyyy'); console.log(formattedDate1); // Output: "29 July 2023" const formattedDate2 = dateFns.format(today, 'yyyy-MM-dd'); console.log(formattedDate2); // Output: 2023-07-29
在此示例中，我們創建一個新的 Date 對象，表示當前日期。然后，我們使用 format() 函數根據提供的格式字符串格式化日期。格式字符串使用占位符，例如 dd 表示兩位數的日期，MMMM 表示完整的月份名稱，yyyy 表示全年。
第二次調用 format() 使用 yyyy-MM-dd 格式。 MM 占位符指的是兩位數月份。
format() 函數還可以輕松格式化時間。使用 h 或 hh 占位符輸出一位或兩位數的小時，mm 輸出兩位數的分鐘，a 輸出 AM/PM 指示器。例如：
const formattedDateAndTime = dateFns.format(today, 'yyyy-MM-dd h:mm a'); console.log(formattedDateAndTime); // Output: 2023-07-29 12:50 PM
您可以使用許多占位符來設置日期和時間的格式。下表列出了一些內容，但請務必訪問文檔以獲取完整列表。
| 單位 | 占位符 | 結果示例 |
|---|---|---|
| 日歷年（2 位數字） | 年 | 23 |
| 日歷年（4 位數字） | 年 | 2023 |
| 月份（1 位數字） | 中號 | 7 |
| 月份（2 位數字） | 毫米 | 07 |
| 月份（簡稱） | MMM | 一月、二月、十二月 |
| 月份（全名） | MMMM | 一月、二月 |
| 一月中的某天（1 位數字） | d | 5, 23 |
| 月份中的日期（2 位數字） | dd | 05, 23 |
| 星期幾（縮短） | E | 周一、周二、周三 |
| 星期幾（全名） | EEEE | 周一、周二 |
| 上午、下午 | 一個 | 上午、下午 |
| 小時（12 小時制，1 位數字） | 小時 | 1,2,10 |
| 小時（12 小時制，2 位數字） | 呵呵 | 01,02,10 |
| 小時（24 小時制，1 位數字） | 小時 | 1、2、10、23 |
| 小時（24 小時制，2 位數字） | 呵呵 | 01,02,10,23 |
| 分鐘（1 位數字） | 中號 | 1、2、3、25、30、58 |
| 分鐘（2 位數字） | 毫米 | 01,02,03,24,56 |
| 第二位（1 位數字） | s | 1、2、3、10、58 |
| 第二個（2 位數字） | SS | 01,02,10,45 |
解析日期
在處理用戶輸入或來自外部源的數據時，我們通常需要解析字符串中的日期。 date-fns 為此提供了 parse() 函數。
const dateString = '2023-07-15'; const parsedDate = dateFns.parse(dateString, 'yyyy-MM-dd', new Date()); console.log(parsedDate); // Output: Date object representing July 15, 2023
在此代碼中，我們使用格式 yyyy-MM-dd 解析來自 dateString 的日期，該格式對應于提供的日期字符串。第三個參數是用于計算解析日期的基準日期。在本例中，我們使用當前日期作為基準。
添加和減去日期
通過添加或減去時間間隔來操作日期是日期處理中的常見要求。 date-fns 提供了一組方便的函數來輕松執行這些操作。
以下示例演示了 addDays() 和 subDays() 函數：
const startDate = new Date(2023, 6, 15); // July 15, 2023 const fiveDaysLater = dateFns.addDays(startDate, 5); console.log(fiveDaysLater); // Output: Date object representing July 20, 2023 const threeDaysAgo = dateFns.subDays(startDate, 3); console.log(threeDaysAgo); // Output: Date object representing July 12, 2023
在此示例中，我們從給定的 2023 年 7 月 15 日的 startDate 開始。然后使用 addDays() 函數計算 5 天后的日期，并使用 subDays( ) 函數查找 3 天前的日期。
除了添加和減去天數之外，date-fns 還提供了添加和減去月份和年份的函數。正如您所期望的，它們被命名為 addMonths()、subMonths()、addYears() 和 subYears()。
操作日期時，必須注意邊緣情況。例如，當減去月份或年份時，結果日期可能不存在（例如 2 月 30 日），而 date-fns 通過調整日期來智能處理這種情況。
const startDate = new Date(2023, 0, 31); // January 31, 2023 const oneMonthLater = dateFns.addMonths(startDate, 1); console.log(oneMonthLater); // Output: Date object representing February 28, 2023
在此示例中，從 2023 年 1 月 31 日開始，添加一個月結果為 2023 年 2 月 28 日，因為 2 月沒有第 31 天。
查找日期之間的差異
JavaScript 的 Date 對象完全缺乏查找兩個 Date 對象之間差異的能力。值得慶幸的是，date-fns 有幾個函數可以用來查找兩個 Dates 之間的差異。其中一些是：
| 函數名稱 | 目的 |
|---|---|
| differenceInMilliseconds() | 獲取給定日期之間的毫秒數。 |
| differenceInSeconds() | 獲取給定日期之間的秒數。 |
| differenceInMinutes() | 獲取給定日期之間的分鐘數。 |
| differenceInHours() | 獲取給定日期之間的小時數。 |
| differenceInBusinessDays() | 獲取給定日期之間的工作日數。 |
| differenceInDays() | 獲取給定日期之間的完整天數。 |
| differenceInMonths() | 獲取給定日期之間的月數。 |
| differenceInYears() | 獲取給定日期之間的年數。 |
還有許多其他“差異”函數，因此請務必檢查文檔。
考慮以下示例：
const startDate = new Date(2023, 6, 15); // July 15, 2023 const endDate = new Date(2023, 6, 22); // July 22, 2023 const daysDifference = dateFns.differenceInDays(endDate, startDate); console.log(daysDifference); // Output: 7
在本例中，我們使用 differenceInDays() 函數來計算 startDate 和 endDate。輸出為 7。
使用時區
使用時區可能是使用日期和時間時最令人沮喪的方面之一，但 date-fns 使用 utcToZonedTime() 和 formatDistanceToNow() 等函數使之變得更容易。考慮以下示例：
const utcDate = new Date(Date.UTC(2023, 6, 15, 12, 0, 0)); const timezone = 'America/New_York'; const zonedDate = dateFns.utcToZonedTime(utcDate, timezone); console.log(dateFns.formatDistanceToNow(zonedDate)); // Output: "6 months"
在此示例中，我們使用 utcToZonedTime() 函數將 utcDate 轉換為 America/New_York 時區。然后我們使用 formatDistanceToNow() 函數來獲取分區日期和當前時間之間的時差。
處理無效日期
我們永遠不能信任來自用戶的數據，并且通常最好不要信任任何您無法控制的數據。因此，我們需要能夠檢查 Date 是否有效，并且 date-fns 為此提供了 isValid() 函數。例如：
const validDate = new Date(2023, 1, 30); // February 30, 2023 is not a valid date const invalidDate = new Date(NaN); // Invalid date console.log(dateFns.isValid(validDate)); // Output: true console.log(dateFns.isValid(invalidDate)); // Output: false
此示例創建了有效和無效的 Date 對象。然后我們使用 isValid() 函數來確定它們是否是有效日期。
結論
date-fns 是一個功能強大且易于使用的庫，可以在 JavaScript 中處理日期時為您節省大量時間和精力。本教程僅觸及該庫功能的表面，因此請務必通過查看官方文檔來探索其功能和可用選項。
