與日期相關(guān)的問題與JavaScript一樣古老。從理論上講，如果不是因?yàn)锳PI的許多弱點(diǎn)，則可以使用JavaScript的date對象執(zhí)行日期計(jì)算。幸運(yùn)的是，有一些有用的庫可以為我們節(jié)省很多工作。其中之一是date-fns。

例如，一個問題是使用date對象處理不同的時區(qū)，因?yàn)镴avaScript使用當(dāng)前系統(tǒng)時區(qū)作為基礎(chǔ)。這可能會導(dǎo)致困難，尤其是涉及跨多個時區(qū)的應(yīng)用程序時。月份的表示形式是JavaScript中date對象的另一特性。例如，一月的值指定為0。但是，當(dāng)涉及到日期和年份時，JavaScript會再次遵循預(yù)期的標(biāo)準(zhǔn)，因此每月5號用數(shù)字5表示。

當(dāng)您實(shí)現(xiàn)一個使用日期值的應(yīng)用程序時，通常會發(fā)現(xiàn)必須創(chuàng)建，修改和輸出它們的問題。使用板載JavaScript工具，可以輕松地進(jìn)行創(chuàng)建和輸出。但是，如果修改了日期，例如，如果您想從日期中減去兩天，則將不再可能。當(dāng)然，您可以獲取日期的時間戳，然后減去相應(yīng)的毫秒數(shù)以達(dá)到目標(biāo)日期。該解決方案不容易閱讀和維護(hù)，或者特別優(yōu)雅。由于這個問題以及更多其他問題，過去已經(jīng)創(chuàng)建了許多庫，以使您可以更輕松地處理JavaScript中的日期值。市場上最廣泛的解決方案之一是Moment.js。不過，前一陣子的競爭對手在競爭激烈：

date-fns與Moment.js有何不同？

最重要的區(qū)別之一是項(xiàng)目名稱，因?yàn)閒ns代表功能。date-fns是允許您使用日期值的功能的集合。

與此相反，Moment.js具有面向?qū)ο蟮姆椒?。在這里，您創(chuàng)建一個瞬間-instance和工作與此對象的方法。當(dāng)然，這會影響包裝尺寸。

Moment.js默認(rèn)包含整個接口。您確實(shí)可以優(yōu)化程序包，但這需要其他步驟。在date-fns中，您僅加載真正需要的功能。

不過，在帶有Node.js的后端應(yīng)用程序中，這無關(guān)緊要，因?yàn)檐浖笮∈且粋€小問題。您可以在前端瀏覽器中像Moment.js一樣使用date-fns。包裝的大小在這里起決定性作用。

date-fns的開發(fā)人員不僅確保將項(xiàng)目劃分為許多小的且很大程度上獨(dú)立的功能，而且還確保這些功能是純功能。例如，您傳遞一個日期對象和要添加到addHours函數(shù)的小時數(shù)。結(jié)果，您得到一個新的日期對象，其中指定的小時數(shù)晚于您輸入的日期。因此，沒有副作用，例如直接修改輸入。

如何安裝date-fns？

像大多數(shù)其他JavaScript庫一樣，date-fns可作為npm軟件包提供，并可通過npm進(jìn)行安裝。在項(xiàng)目中使用命令npm install date-fns進(jìn)行操作。該軟件包將作為依賴項(xiàng)自動添加到您的package.json文件中。同樣，您可以將紗線與紗線 添加日期-fns命令一起使用。

如何使用它？

您可以將date-fns包與CommonJS模塊系統(tǒng)和ES模塊一起使用。在下面的示例中，您使用格式函數(shù)輸出當(dāng)前日期。清單1顯示了如何使用CommonJS模塊系統(tǒng)。

清單1：通過CommonJS模塊化系統(tǒng)集成date-fns

const { format } = require('date-fns');   const date = new Date();   console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

較新版本的Node.js還支持關(guān)鍵字import和export，以便分別導(dǎo)入和導(dǎo)出模塊。此時，您可以導(dǎo)入整個date-fns軟件包并訪問所需的功能，也可以利用每個功能在單獨(dú)的文件中可用的事實(shí)，因此可以單獨(dú)導(dǎo)入格式功能。您可以在清單2中看到它的工作方式。

清單2：將date-fns與ES模塊一起使用

import { format } from 'date-fns/format'; const date = new Date(); console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

格式化日期值

使用格式，您已經(jīng)了解了格式化日期值的最重要功能。

您可以使用格式字符串來指定要格式化日期的哪一部分以及如何格式化。

您可以在https://date-fns.org/docs/format中找到可以在格式字符串中使用的各個令牌的全面參考。

除此功能外，您還可以訪問其他輔助功能，例如distanceInWords函數(shù)，該函數(shù)以可讀形式輸出兩個日期值之間的差。

日期算術(shù)

已經(jīng)提到的JavaScript中對象日期的漏洞是缺少對日期算術(shù)的支持。因此，事不宜遲地執(zhí)行加法或減法。

date-fns為此提供了許多輔助功能。這些功能通常具有統(tǒng)一的命名方案：首先指定操作，然后指定要使用的單元。

這將導(dǎo)致函數(shù)名稱，例如addMinutes或subYears。該類別的所有函數(shù)都將日期對象作為第一個參數(shù)，將數(shù)字作為第二個參數(shù)表示要添加或減去的單位數(shù)。例如，要將當(dāng)前日期增加四分之三小時，可以使用清單3中的代碼。

清單3：使用date-fns的日期算術(shù)

const { addMinutes, addHours, format } = require('date-fns');   const date = addMinutes(addHours(new Date(), 1), 45);   console.log(format(date, 'DD.MM.YYYY HH:mm'));

比較

date-fns的比較功能也非常有用，借助它們的幫助，您可以確定某個日期是在另一個日期之前還是之后，或者某個日期是在將來還是過去。清單4使用isAfter和isFuture函數(shù)作為示例來說明它們的用法。

清單4：wit dat-fns的比較

const { isAfter, isFuture, addHours } = require('date-fns');   const date1 = new Date(); const date2 = addHours(new Date(), 5); console.log(`Date1 is ${isAfter(date1, date2) ? 'after' : 'before'} Date2`); console.log(`Date2 is ${isFuture(date2) ? 'not' : ''} in the past`);

進(jìn)一步的操作

date-fns軟件包不僅為您提供諸如加法之類的簡單操作，還為您提供諸如areRangesOverlapping函數(shù)之類的更復(fù)雜的操作，您可以使用它們來確定兩個時間跨度是否重疊。

使用最小值和最大值功能，您可以找到一系列日期值的最早或最晚日期。

借助compareAsc和compareDsc函數(shù)，您還可以對具有日期值的數(shù)組進(jìn)行排序。該函數(shù)作為比較函數(shù)傳遞給數(shù)組的sort方法。清單5是一個例子。

清單5：對日期值進(jìn)行排序

const { compareAsc } = require('date-fns');     const sortedDates = [   new Date(2001, 1, 1),   new Date(2003, 3, 3),   new Date(2002, 2, 2),   ].sort(compareAsc);     console.log(sortedDates);

結(jié)論

Moment.js或date-fns之類的許多程序包都提供了，您也可以使用本機(jī)JavaScript來實(shí)現(xiàn)。但是，在這些情況下，源代碼的可讀性受到很大影響。除了更正JavaScript日期對象的特性之外，這是支持使用這些庫的最重要的論據(jù)之一。

此處顯示的date-fns的可能性僅代表該庫的一小部分，并且只能使您對該庫的功能范圍有所了解。憑借眾多擴(kuò)展功能以及對應(yīng)用程序國際化的良好支持，您下次確定一個應(yīng)用程序的日期庫時，至少應(yīng)將date-fns入圍。