本文介紹了Day.js的使用方法,Day.js 是一個輕量級的JAVAScript庫,用于解析、驗(yàn)證、操作和格式化日期和時間。Day.js? 的使用方法類似于Moment.js?,但 Day.js? 的大小只有 2KB?,比 Moment.js 更小。
Day.js支持鏈?zhǔn)秸Z法,可以通過插件擴(kuò)展功能,同時 Day.js 還提供了許多有用的功能,如相對時間、時區(qū)支持、本地化等。
Day.js的主要功能包括日期解析、日期格式化、日期操作、相對時間和本地化。日期解析包括字符串解析和日期對象解析,可以將字符串轉(zhuǎn)換為日期對象,也可以將日期對象轉(zhuǎn)換為字符串。日期格式化可以將日期對象格式化為指定的字符串格式。日期操作可以進(jìn)行日期的加減、比較和判斷。相對時間可以將日期轉(zhuǎn)換為相對于當(dāng)前時間的時間差,如“2分鐘前”、“1小時前”等。本地化可以將日期格式化為本地化的格式,包括日期格式、時間格式、相對時間格式等。
總之,Day.js是一個非常有用的JavaScript日期庫,可以幫助開發(fā)人員輕松地處理日期和時間。它具有輕量級、易于使用和擴(kuò)展、支持鏈?zhǔn)秸Z法等優(yōu)點(diǎn)。如果你需要在JavaScript中處理日期和時間,那么Day.js是一個不錯的選擇。
Day.js 是JavaScript中最受推薦的日期和時間格式化庫之一,因?yàn)樗梢杂糜诳蛻舳撕头?wù)器端渲染,并且在這兩種情況下都能完美地工作。
下面是一個圖表,顯示了 Day.js 每月的 NPM 下載量。
下面是一張圖表,顯示了已經(jīng)添加到 Github 上的 Day.js 星標(biāo)。
在本文中,我們將展示如何使用它來可能替代 Moment.js。
為什么要替換 Moment.js?
Moment.js是一個JavaScript包,它使得在JavaScript中解析、驗(yàn)證、操作和顯示日期和時間非常簡單。
自從 Moment.js 團(tuán)隊(duì)發(fā)布了關(guān)于其使用的棄用通知以來,開發(fā)人員被迫遷移到 Day.js 和其他建議的庫。下面列出了 Moment.js 的缺點(diǎn)。
- 與樹搖優(yōu)化不兼容,因?yàn)樗鼤?dǎo)致較大的捆綁包大小和性能問題
- Moment.js存在一個影響可變性的問題。
- 由于其復(fù)雜的API和龐大的捆綁包大小,如果正在開發(fā)需要高性能的Web應(yīng)用程序,則可能會導(dǎo)致顯著的性能損失
Day.js 的好處
使用類似的 API,Day.js 旨在成為 Moment.js 的簡單替代品。Day.js 不是一個完全兼容的替代品;但是,如果你習(xí)慣于使用 Moment 的 API 并且需要快速遷移,請考慮使用 Day.js:
- 使用 Day.js 性能高。
- Day.js比Moment.js更輕,因?yàn)镈ate.js的軟件包大小僅約為232 kB。 Day JS的最新版本為7Kb(已壓縮),大小為2Kb(已壓縮)。
- Day.js可以作為JavaScript文件從CDN或本地文件中包含,同時支持import和require。
不過,有一個缺點(diǎn):
- Day.js 的功能比 Moment.js 少
JavaScript社區(qū)中的Day.js支持
持續(xù)更新工具的需求是開發(fā)人員面臨的問題的觸發(fā)因素。任何 Web 開發(fā)人員都會始終以最大化優(yōu)化為目標(biāo),以生產(chǎn)簡單、快速的應(yīng)用程序。為了保證軟件產(chǎn)品的高性能并維護(hù)其安全性,我們必須定期升級我們的庫和框架到最新版本。
Day.js是一個優(yōu)秀的替代Moment.js的選擇,當(dāng)比較大小和性能時。
快速開始
尋找 Day.js 的 CDN 很簡單,cdnjs.com 提供了一個 Day.js CDN,可用于我們的瀏覽器。CDN 鏈接具有一個腳本標(biāo)簽,可以添加到我們的 html 代碼的頂部或底部。
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
使用 Unpkg:
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
要在Node.js中安裝day,請運(yùn)行下面的代碼。
npm i dayjs
使用以下代碼將 Day.js 作為 Node.js 項(xiàng)目的依賴項(xiàng):
const dayjs = require("dayjs");
使用Babel或ES6:
import Dayjs from "dayjs";
在本教程中,我們將使用Day.js CDN和純JavaScript在瀏覽器中格式化日期和時間。
ISO概述
表達(dá)數(shù)字日歷日期并消除歧義的標(biāo)準(zhǔn)方法是國際標(biāo)準(zhǔn)化組織(ISO)日期格式??梢允褂肑avaScript日期方法toISOString(),它以ISO格式返回新形成的日期,以確認(rèn)此格式。
格式化日期
當(dāng)我們在瀏覽器中運(yùn)行 Day.js 時,.format() 方法會返回一個 ISO 格式的字符串。這與原生 JavaScript 的 toISOString() 日期構(gòu)造函數(shù)方法非常相似。
console.log(dayjs().format())
//Output: 2022-08-17T09:28:20+01:00
在方括號內(nèi)放置轉(zhuǎn)義字符(例如 [MM,DD,YY]):
dayjs().format() // Output: 2022-08-17T09:31:09+01:00
dayjs().format('MM') // Output: 08
dayjs().format('DD') // Output: 17
dayjs().format('YY') // Output: 22
dayjs().format('MMMM') // August
此外,可以定義你希望日期以哪種格式返回:
console.log(dayjs('2022-04-2').format('DD/MM/YYYY')) // Output: 02/04/2022
更多格式化內(nèi)容:
dayjs().format('a') // am
dayjs().format('A') // AM
// @ The offset from UTC, ±HHmm
dayjs().format('ZZ') // +0100
// @ The millisecond, 3-digits
dayjs().format('SSS') // 912
dayjs().format('h:mm A ') // 8:28 AM
dayjs().format('h:mm:ss A') // 8:30:51 AM
dayjs().format('MM/DD/YYYY') // 08/19/2022
dayjs().format('M/D/YYYY') // 8/19/2022
dayjs().format('ddd, hA')
// Output: "Fri, 8AM"
dayjs().format('MMM D, YYYY')
// Aug 19, 2022
我們還可以看到一些高級的日期格式:
dayjs().format('ddd, MMM D, YYYY h:mm A ');
// @ Output: Fri, Aug 19, 2022 8:23 AM
dayjs().format('MMM D, YYYY h:mm A');
// Aug 19, 2022 8:24 AM
dayjs().format('dddd, MMMM D YYYY, h:mm:ss A')
// Output: "Friday, August 19 2022, 8:15:51 AM"
dayjs().format('dddd, MMMM Do YYYY, h:mm:ss A')
// output => "Friday, August 19o 2022, 8:15:51 AM"
RelativeTime 插件
在繼續(xù)其他示例之前,我們來討論一下 RelativeTime 插件。使用 RelativeTime 插件,可以將日期和時間數(shù)字轉(zhuǎn)換為相對語句,例如“5小時前”。
使用CD安裝瀏覽器:我們必須使用Relativetime CDN,然后使用Day.js設(shè)置它,以使RelativeTime插件正常工作。
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"
integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
其次 從cdnjs.com獲取的CDN。
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/relativeTime.min.js"></script>
相對時間插件正在為 Day.js 進(jìn)行設(shè)置:
<script>
dayjs.extend(window.dayjs_plugin_relativeTime)
</script>
Node.js和ES6導(dǎo)入的 RelativeTime 插件
當(dāng)使用 npm i dayjs 時,RelativeTime 插件位于 Day.js 包內(nèi)。只需要Day內(nèi)的RelativeTime 路徑即可使用它。
const dayjs = require('dayjs')
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
ES6 import
import Dayjs from "dayjs";
import relativeTIme from "dayjs/plugin/relativeTime";
Dayjs.extend(relativeTIme);
從 X 獲取時間
提供表示相對于X的時間字符串。相對時間插件將使我們能夠?qū)崿F(xiàn)這一點(diǎn)。
始終確保使用 dayjs.extend 配置相關(guān)插件。您可以閱讀更多關(guān)于 Day.js 插件的信息。
dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a))
// Output: 2 years ago
如果傳遞 true,可以獲得沒有后綴的值。
dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a, true))
// Output: 2 years
從現(xiàn)在開始計(jì)算時間
這將把相對于現(xiàn)在的時間字符串轉(zhuǎn)換出來。現(xiàn)在需要一個RelativeTime插件。
<script>
dayjs.extend(window.dayjs_plugin_relativeTime);
console.log(dayjs('2000-01-01').fromNow())
</script>
來自未來:
<script>
dayjs.extend(window.dayjs_plugin_relativeTime);
console.log(dayjs('2050-01-01').fromNow())
</script>
// Output: in 27 years
沒有后綴:您]可以使用true布爾值提供返回日期字符串。
dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('2000-01-01').fromNow(true) // Output: 23 years
獲取當(dāng)前時間
這將返回一個表示相對時間到現(xiàn)在的字符串。請記住,這取決于相對時間插件。
dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('1980-01-01').toNow() // Output: in 43 years
缺少后綴。
dayjs('1980-01-01').toNow(true) // Output: 43 years
如何生成日期的Unix時間戳
這將給出 Day.js 對象的 Unix 時間戳,即自 Unix 紀(jì)元以來的秒數(shù)。Unix 時間戳對象是 Day.js 中的內(nèi)置對象,因此使用它不需要調(diào)用插件。
沒有毫秒:
dayjs('2019-01-25').unix() // Output: 1548370800
以毫秒為單位:
dayjs('2019-01-25').valueOf() // Output: 1548370800000
根據(jù) Day.js 文檔,始終建議使用 Unix 時間戳。
計(jì)算一個月的天數(shù)
獲取當(dāng)前月份的天數(shù),無需插件:
dayjs('2020-02-04').daysInMonth() // Output: 29
將日期作為對象返回
為了以對象格式返回日期,應(yīng)該使用帶有CDN的toObject插件,或在node.js或ES6導(dǎo)入中要求它。
CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/toObject.min.js"
integrity="sha512-qWOc7v2jfO5Zg34fVOIfnpvDopsqDBilo8Onabl/MHIr5idHpg73tVRUGDMVOQs2dUEsmayiagk75Ihjn6yanA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Node.js:
var dayjs = require('dayjs')
var toObject = require('dayjs/plugin/toObject')
dayjs.extend(toObject)
使用 toObject() 擴(kuò)展 CDN:
<script>
dayjs.extend(window.dayjs_plugin_toObject);
dayjs('2020-01-25').toObject()
</script>
輸出:
{date: 25, hours: 0, milliseconds: 0, minutes: 0, months: 0, seconds: 0, years: 2020}
將日期作為數(shù)組返回
為了以數(shù)組格式返回日期,應(yīng)該使用帶有CDN的 ToArray 插件,或在node.js或ES6導(dǎo)入中要求它。
Node.js:
var toArray = require('dayjs/plugin/toArray')
dayjs.extend(toArray)
dayjs.extend(window.dayjs_plugin_toArray);
dayjs('2022-08-04').toArray() // Output: [2022, 7, 4, 0, 0, 0, 0]
以 JSON 格式獲取時間和日期
將其序列化為 ISO 8601 字符串格式,無需插件:
dayjs('2019-06-25').toJSON() // Output: 2019-06-24T23:00:00.000Z
dayjs('1996-01-11').toJSON() // Output: 1996-01-10T23:00:00.000Z
dayjs('2025-05-10').toJSON() // Output: 2025-05-09T23:00:00.000Z
提供日期和時間作為字符串
返回一個包含日期表示的字符串,不需要插件:
dayjs('2025-03-20').toString() // Output: Wed, 19 Mar 2025 23:00:00 GMT
dayjs('2010-08-08').toString() // Output: Sat, 07 Aug 2010 23:00:00 GMT
dayjs('01-2005-25').toString() // @ Error output: Invalid Date
解析日期
Day.js 對象是不可變的,這意味著所有修改它的 API 操作都會產(chǎn)生一個新的對象實(shí)例。
字符串轉(zhuǎn)日期:檢查以下代碼以解析字符串并以日期格式返回它:
dayjs('2020-08-04T15:00:00.000Z')
一個已存在的本地 JavaScript Date 對象可以用來創(chuàng)建一個 Day.js 對象:
let d = new Date(2021, 02, 11);
let day = dayjs(); // The date returned by the first formatted date is copied in this line
現(xiàn)在使用Parse:請參見下面的代碼,以使用Parse返回當(dāng)前日期
new Date(2021, 02, 11);
// Alternative
dayjs(new Date());
驗(yàn)證
要檢查日期和時間是否有效,請使用 Day.js 中的 .isValid() 方法。該方法會產(chǎn)生一個布爾結(jié)果:
dayjs('1996-05-01').isValid(); // Output: true
dayjs('dummy text').isValid(); // Output: false
dayjs('2005-06-09').isValid(); // Output: true
時區(qū)
Day.js為觀察相同標(biāo)準(zhǔn)時間的地區(qū)提供時區(qū)兼容性。使用Day.js時區(qū)需要一個插件。要在Day.js中使用時區(qū),我們需要同時安裝時區(qū)和UTC插件:
const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)
UTC插件的 CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/utc.min.js"
integrity="sha512-z84O912dDT9nKqvpBnl1tri5IN0j/OEgMzLN1GlkpKLMscs5ZHVu+G2CYtA6dkS0YnOGi3cODt3BOPnYc8Agjg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
時區(qū)插件的 CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/timezone.min.js"
integrity="sha512-fG1tT/Wn/ZOyH6/Djm8HQBuqvztPQdK/vBgNFLx6DQVt3yYYDPN3bXnGZT4z4kAnURzGQwAnM3CspmhLJAD/5Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Day.js 擴(kuò)展時區(qū)和 UTC 插件:
<script>
dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
<script>
事例:
dayjs.tz("2020-06-01 12:00", "America/Toronto")
在控制臺上輸出:
let time = {
$D: 18,
$H: 11,
$L: "en",
$M: 10,
$W: 1,
$d: "Mon Nov 18 2013 11:55:00 GMT+0100 (West Africa Standard Time) {}",
$m: 55,
$ms: 0,
$offset: -300,
$s: 0,
$x: {
$localOffset: -60,
$timezone: "America/Toronto"
}
}
還可以使用 Day.js 中包含的 .toString() 方法,將時區(qū)作為普通字符串返回。
dayjs.tz("2013-11-18 11:55", "America/Toronto").toString()
// Output: Mon, 18 Nov 2013 16:55:00 GMT
區(qū)解析
如果你想解析時區(qū)格式的日期,請使用名為CurrentParseFormate的插件來協(xié)助你解析時區(qū):
Node.js
var customParseFormat = require('dayjs/plugin/customParseFormat')
dayjs.extend(customParseFormat)
dayjs('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z')
// Returns an instance containing '1969-05-02T18:02:03.000Z'
CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/customParseFormat.min.js" integrity="sha512-FM59hRKwY7JfAluyciYEi3QahhG/wPBo6Yjv6SaPsh061nFDVSukJlpN+4Ow5zgNyuDKkP3deru35PHOEncwsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
dayjs.extend(window.dayjs_plugin_customParseFormat);
dayjs.tz("12-25-1995", "MM-DD-YYYY", "America/Toronto").toString()
//Mon, 25 Dec 1995 05:00:00 GMT
轉(zhuǎn)換為時區(qū)
更新偏移量,切換時區(qū),然后返回到 day.js 對象實(shí)例。當(dāng)?shù)诙€參數(shù)傳遞一個 true 值時,只有時區(qū)(和偏移量)被更改,而本地時間保持不變。
<script>
dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
<script>
估計(jì)用戶時區(qū)
dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.guess() //Asia/Calcutta
默認(rèn)時區(qū)設(shè)置
將你喜歡的時區(qū)設(shè)置為默認(rèn)時區(qū),而不是本地時區(qū)。在特定的 dayjs 對象中,仍然可以自定義不同的時區(qū)
Node.js:
var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)
CDN:
dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.setDefault("America/New_York") // Setting the default time
dayjs.tz("2019-08-05 11:00")
總結(jié)
我們首先了解了Day.js及其使用它格式化時間和日期的好處。Day.js簡單地替代了Moment.js。雖然Moment.js不是必需的,但Day.js提供了所有日期格式化、解析、插件和本地化要求。因此,可以使用 dayjs.org 在官方Day.js網(wǎng)站上選擇并查找更多信息。
本文轉(zhuǎn)載自微信公眾號「大遷世界」