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

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

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

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

最重要的區(qū)別之一是項(xiàng)目名稱，因?yàn)閒ns代表功能。日期FNS的功能，它允許您使用日期值的集合。
與此相反，Moment.js具有面向?qū)ο蟮姆椒āＴ谶@里，您創(chuàng)建一個(gè)瞬間 -instance和工作與此對(duì)象的方法。當(dāng)然，這會(huì)影響包裝尺寸。
Moment.js默認(rèn)包含整個(gè)界面。您確實(shí)可以優(yōu)化程序包，但這需要其他步驟。在date-fns中，您僅加載真正需要的功能。
不過(guò)，在帶有Node.js的后端應(yīng)用程序中，這無(wú)關(guān)緊要，因?yàn)檐浖笮∈且粋€(gè)小問(wèn)題。您可以使用日期FNS就像Moment.js，在前端的瀏覽器。包裝的大小在這里起決定性作用。

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

如何安裝日期FNS？

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

如何使用它？

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

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

1個(gè)

2

3

4

5

const { format } = require('date-fns');

const date = new Date();

console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

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

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

1個(gè)

2

3

import { format } from 'date-fns/format';

const date = new Date();

console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

格式化日期值

使用格式，您已經(jīng)學(xué)習(xí)了格式化日期值的最重要功能。
您可以使用格式字符串來(lái)指定要格式化日期的哪一部分以及如何格式化。
您可以在https://date-fns.org/docs/format中找到可以在格式字符串中使用的各個(gè)令牌的全面參考。

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

日期算術(shù)

已經(jīng)提到的JavaScript中對(duì)象日期的漏洞是缺少對(duì)日期算術(shù)的支持。因此，事不宜遲地執(zhí)行加法或減法。
date-fns為此提供了許多輔助功能。這些功能通常有一個(gè)統(tǒng)一的命名方案：首先，你指定的操作，其次是要與工作單位。
這將導(dǎo)致函數(shù)名稱，例如addMinutes或subYears。此類(lèi)別的所有函數(shù)都將日期對(duì)象作為第一個(gè)參數(shù)，將數(shù)字作為第二個(gè)參數(shù)表示要添加或減去的單位數(shù)。例如，在一個(gè)小時(shí)的四分之三添加到當(dāng)前為止，你可以從清單3使用的代碼。

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

1個(gè)

2

3

4

5

const { addMinutes, addHours, format } = require('date-fns');

const date = addMinutes(addHours(new Date(), 1), 45);

console.log(format(date, 'DD.MM.YYYY HH:mm'));

比較

日期FNS的比較功能也非常有幫助，在他們的幫助，你可以決定是否一個(gè)謊言日期之前或之后另一個(gè)，還是在某個(gè)日期在于未來(lái)或過(guò)去。清單4使用isAfter和isFuture函數(shù)作為示例來(lái)說(shuō)明它們的用法。

清單4：wit dat-fns的比較

1個(gè)

2

3

4

5

6

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)一步的操作

該日期FNS包為您提供不僅是簡(jiǎn)單的操作，如加，但也更復(fù)雜的操作，如areRangesOverlapping功能，你可以用它來(lái)確定兩個(gè)時(shí)間跨度是否重疊。

隨著最小和最大的功能，你可以找到一系列的日期值的最早或最晚日期。

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

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

1個(gè)

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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之類(lèi)的許多程序包都提供了，您也可以使用本機(jī)JavaScript來(lái)實(shí)現(xiàn)。但是，在這些情況下，源代碼的可讀性受到很大影響。除了更正JavaScript 日期對(duì)象的特性之外，這是支持使用這些庫(kù)的最重要的論據(jù)之一。

這里顯示的日期FNS的可能性僅代表庫(kù)中的一小部分，并只給你這個(gè)庫(kù)的功能范圍的味道。有了眾多擴(kuò)展，并為應(yīng)用程序的國(guó)際化提供了很好的支持，您下次確定一個(gè)應(yīng)用程序的日期庫(kù)時(shí)，至少應(yīng)將date-fns入圍。

最后，開(kāi)發(fā)這么多年我也總結(jié)了一套學(xué)習(xí)Java的資料與面試題，如果你在技術(shù)上面想提升自己的話，可以關(guān)注我，私信發(fā)送領(lǐng)取資料或者在評(píng)論區(qū)留下自己的聯(lián)系方式，有時(shí)間記得幫我點(diǎn)下轉(zhuǎn)發(fā)讓跟多的人看到哦。

總結(jié)

以上是生活随笔為你收集整理的Dreamwear如何创建javascript_JavaScript还可以处理日期？你只需要这样做的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。