日期運(yùn)算是 JavaScript 中的常見任務(wù)，原生 Date 物件提供了一些基本功能。但是，處理日期可能很複雜且容易出錯(cuò)，且 Date 缺乏執(zhí)行這些常見任務(wù)所需的功能。為了使日期處理變得更容易、更可靠，開發(fā)人員必須依賴第三方程式庫(kù)。 JavaScript 生態(tài)系統(tǒng)中有很多可用的，但 date-fns 脫穎而出，成為事實(shí)上的標(biāo)準(zhǔn)。它是一個(gè)用於解析、格式化和操作日期的輕量級(jí)實(shí)用程式庫(kù)。

在本教程中，我們將探索使用 date-fns 的基礎(chǔ)知識(shí)，並涵蓋處理日期的最常用函數(shù)。最後，您將深入了解如何將 date-fns 合併到 JavaScript 專案中以有效處理日期。

安裝 date-fns

date-fns 是一個(gè) Node 套件。因此，如果您使用 NPM、Babel 或 Webpack 等工具堆疊，則可以使用下列 npm 命令安裝 date-fns：

npm install date-fns --save

如果您對(duì)其中任何一個(gè)感到陌生，請(qǐng)不要擔(dān)心；您也可以在瀏覽器中使用 date-fns！只需將以下 <script/> 元素新增到您的 HTML 中即可：

<script type="module">
    import * as dateFns from 'https://cdn.jsdelivr.net/npm/date-fns/+esm';
</script>

這是一個(gè) JavaScript 模組，從 jsdelivr 網(wǎng)路匯入最新版本的 date-fns 函式庫(kù)。透過此導(dǎo)入，所有 date-fns 函數(shù)和實(shí)用程式都可以透過 dateFns 物件存取。請(qǐng)注意，要成功運(yùn)行本教程中的所有程式碼，程式碼必須包含在導(dǎo)入 date-fns 的相同模組中。

格式化日期

處理日期時(shí)的主要任務(wù)之一是將其格式化為人類可讀的字串。 JavaScript 的 Date 物件對(duì)格式化日期有基本支持，但缺乏對(duì)自訂格式的支援。 date-fns 為此提供了格式化函數(shù)。

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

在此範(fàn)例中，我們建立一個(gè)新的 Date 對(duì)象，表示目前日期。然後，我們使用 format() 函數(shù)根據(jù)提供的格式字串格式化日期。格式字串使用佔(zhàn)位符，例如 dd 表示兩位數(shù)的日期，MMMM 表示完整的月份名稱，yyyy 表示全年。

第二次呼叫 format() 使用 yyyy-MM-dd 格式。 MM 佔(zhàn)位符指的是兩位數(shù)月份。

format() 函數(shù)也可以輕鬆格式化時(shí)間。使用h 或hh 佔(zhàn)位符輸出一位或兩位數(shù)的小時(shí)，mm 輸出兩位數(shù)的分鐘，a 輸出AM/PM 指示器。例如：

const formattedDateAndTime = dateFns.format(today, 'yyyy-MM-dd h:mm a');
console.log(formattedDateAndTime); // Output: 2023-07-29 12:50 PM

您可以使用許多佔(zhàn)位符來(lái)設(shè)定日期和時(shí)間的格式。下表列出了一些內(nèi)容，但請(qǐng)務(wù)必訪問文件以獲取完整清單。

解析日期

在處理用戶輸入或來(lái)自外部源的數(shù)據(jù)時(shí)，我們通常需要解析字符串中的日期。 date-fns 為此提供了 parse() 函數(shù)。

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 解析來(lái)自 dateString 的日期，該格式對(duì)應(yīng)于提供的日期字符串。第三個(gè)參數(shù)是用于計(jì)算解析日期的基準(zhǔn)日期。在本例中，我們使用當(dāng)前日期作為基準(zhǔn)。

添加和減去日期

通過添加或減去時(shí)間間隔來(lái)操作日期是日期處理中的常見要求。 date-fns 提供了一組方便的函數(shù)來(lái)輕松執(zhí)行這些操作。

以下示例演示了 addDays() 和 subDays() 函數(shù)：

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() 函數(shù)計(jì)算 5 天后的日期，并使用 subDays( ) 函數(shù)查找 3 天前的日期。

除了添加和減去天數(shù)之外，date-fns 還提供了添加和減去月份和年份的函數(shù)。正如您所期望的，它們被命名為 addMonths()、subMonths()、addYears() 和 subYears()。

操作日期時(shí)，必須注意邊緣情況。例如，當(dāng)減去月份或年份時(shí)，結(jié)果日期可能不存在（例如 2 月 30 日），而 date-fns 通過調(diào)整日期來(lái)智能處理這種情況。

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 日開始，添加一個(gè)月結(jié)果為 2023 年 2 月 28 日，因?yàn)?2 月沒有第 31 天。

查找日期之間的差異

JavaScript 的 Date 對(duì)象完全缺乏查找兩個(gè) Date 對(duì)象之間差異的能力。值得慶幸的是，date-fns 有幾個(gè)函數(shù)可以用來(lái)查找兩個(gè) Dates 之間的差異。其中一些是：

還有許多其他“差異”函數(shù)，因此請(qǐng)務(wù)必檢查文檔。

考慮以下示例：

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() 函數(shù)來(lái)計(jì)算 startDate 和 endDate。輸出為 7。

使用時(shí)區(qū)

使用時(shí)區(qū)可能是使用日期和時(shí)間時(shí)最令人沮喪的方面之一，但 date-fns 使用 utcToZonedTime() 和 formatDistanceToNow() 等函數(shù)使之變得更容易?？紤]以下示例：

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() 函數(shù)將 utcDate 轉(zhuǎn)換為 America/New_York 時(shí)區(qū)。然后我們使用 formatDistanceToNow() 函數(shù)來(lái)獲取分區(qū)日期和當(dāng)前時(shí)間之間的時(shí)差。

處理無(wú)效日期

我們永遠(yuǎn)不能信任來(lái)自用戶的數(shù)據(jù)，并且通常最好不要信任任何您無(wú)法控制的數(shù)據(jù)。因此，我們需要能夠檢查 Date 是否有效，并且 date-fns 為此提供了 isValid() 函數(shù)。例如：

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

此示例創(chuàng)建了有效和無(wú)效的 Date 對(duì)象。然后我們使用 isValid() 函數(shù)來(lái)確定它們是否是有效日期。

結(jié)論

date-fns 是一個(gè)功能強(qiáng)大且易于使用的庫(kù)，可以在 JavaScript 中處理日期時(shí)為您節(jié)省大量時(shí)間和精力。本教程僅觸及該庫(kù)功能的表面，因此請(qǐng)務(wù)必通過查看官方文檔來(lái)探索其功能和可用選項(xiàng)。

以上是使用 date-fns 簡(jiǎn)化日期操作的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！