使用 date-fns 簡化日期操作

日期運算是 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/> 元素新增到您的 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 中处理日期时为您节省大量时间和精力。本教程仅触及该库功能的表面，因此请务必通过查看官方文档来探索其功能和可用选项。

以上是使用 date-fns 簡化日期操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！