Dreamwear如何创建javascript_JavaScript还可以处理日期?你只需要这样做
與日期相關(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ū)ο蟮姆椒āT谶@里,您創(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)題。
- 上一篇: python怎么用pip_python怎
- 下一篇: spring cloud config动