JavaScript日期處理不再難！Day.js帶你飛！_視焦點(diǎn)訊

本文介紹了Day.js的使用方法，Day.js是一個(gè)輕量級的JavaScript庫，用于解析、驗(yàn)證、操作和格式化日期和時(shí)間。Day.js?的使用方法類似于Moment.js?，但Day.js?的大小只有2KB?，比Moment.js更小。

(資料圖)

Day.js支持鏈?zhǔn)秸Z法，可以通過插件擴(kuò)展功能，同時(shí) Day.js 還提供了許多有用的功能，如相對時(shí)間、時(shí)區(qū)支持、本地化等。

Day.js的主要功能包括日期解析、日期格式化、日期操作、相對時(shí)間和本地化。日期解析包括字符串解析和日期對象解析，可以將字符串轉(zhuǎn)換為日期對象，也可以將日期對象轉(zhuǎn)換為字符串。日期格式化可以將日期對象格式化為指定的字符串格式。日期操作可以進(jìn)行日期的加減、比較和判斷。相對時(shí)間可以將日期轉(zhuǎn)換為相對于當(dāng)前時(shí)間的時(shí)間差，如“2分鐘前”、“1小時(shí)前”等。本地化可以將日期格式化為本地化的格式，包括日期格式、時(shí)間格式、相對時(shí)間格式等。

總之，Day.js是一個(gè)非常有用的JavaScript日期庫，可以幫助開發(fā)人員輕松地處理日期和時(shí)間。它具有輕量級、易于使用和擴(kuò)展、支持鏈?zhǔn)秸Z法等優(yōu)點(diǎn)。如果你需要在JavaScript中處理日期和時(shí)間，那么Day.js是一個(gè)不錯(cuò)的選擇。

Day.js 是JavaScript中最受推薦的日期和時(shí)間格式化庫之一，因?yàn)樗梢杂糜诳蛻舳撕头?wù)器端渲染，并且在這兩種情況下都能完美地工作。

下面是一個(gè)圖表，顯示了 Day.js 每月的 NPM 下載量。

下面是一張圖表，顯示了已經(jīng)添加到 GitHub 上的 Day.js 星標(biāo)。

在本文中，我們將展示如何使用它來可能替代Moment.js。

為什么要替換 Moment.js？

Moment.js是一個(gè)JavaScript包，它使得在JavaScript中解析、驗(yàn)證、操作和顯示日期和時(shí)間非常簡單。

自從 Moment.js 團(tuán)隊(duì)發(fā)布了關(guān)于其使用的棄用通知以來，開發(fā)人員被迫遷移到 Day.js 和其他建議的庫。下面列出了 Moment.js 的缺點(diǎn)。

與樹搖優(yōu)化不兼容，因?yàn)樗鼤?dǎo)致較大的捆綁包大小和性能問題Moment.js存在一個(gè)影響可變性的問題。由于其復(fù)雜的API和龐大的捆綁包大小，如果正在開發(fā)需要高性能的Web應(yīng)用程序，則可能會導(dǎo)致顯著的性能損失Day.js 的好處

使用類似的 API，Day.js 旨在成為 Moment.js 的簡單替代品。Day.js 不是一個(gè)完全兼容的替代品；但是，如果你習(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或本地文件中包含，同時(shí)支持import和require。

不過，有一個(gè)缺點(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是一個(gè)優(yōu)秀的替代Moment.js的選擇，當(dāng)比較大小和性能時(shí)。

快速開始

尋找 Day.js 的 CDN 很簡單，cdnjs.com 提供了一個(gè) Day.js CDN，可用于我們的瀏覽器。CDN 鏈接具有一個(gè)腳本標(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在瀏覽器中格式化日期和時(shí)間。

ISO概述

表達(dá)數(shù)字日歷日期并消除歧義的標(biāo)準(zhǔn)方法是國際標(biāo)準(zhǔn)化組織（ISO）日期格式?？梢允褂肑avaScript日期方法toISOString()，它以ISO格式返回新形成的日期，以確認(rèn)此格式。

格式化日期

當(dāng)我們在瀏覽器中運(yùn)行 Day.js 時(shí)，.format()方法會返回一個(gè) 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: 08dayjs().format("DD") // Output: 17dayjs().format("YY") // Output: 22dayjs().format("MMMM") // August

此外，可以定義你希望日期以哪種格式返回：

console.log(dayjs("2022-04-2").format("DD/MM/YYYY")) // Output: 02/04/2022

更多格式化內(nèi)容：

dayjs().format("a") // amdayjs().format("A") // AM// @ The offset from UTC, ±HHmmdayjs().format("ZZ") // +0100// @ The millisecond, 3-digitsdayjs().format("SSS") // 912dayjs().format("h:mm A  ") // 8:28 AM  dayjs().format("h:mm:ss A") // 8:30:51 AM dayjs().format("MM/DD/YYYY") // 08/19/2022dayjs().format("M/D/YYYY") // 8/19/2022dayjs().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 AMdayjs().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í)間數(shù)字轉(zhuǎn)換為相對語句，例如“5小時(shí)前”。

使用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>

相對時(shí)間插件正在為 Day.js 進(jìn)行設(shè)置:

<script>    dayjs.extend(window.dayjs_plugin_relativeTime)    </script>

Node.js和ES6導(dǎo)入的 RelativeTime 插件

當(dāng)使用npm i dayjs時(shí)，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 獲取時(shí)間

提供表示相對于X的時(shí)間字符串。相對時(shí)間插件將使我們能夠?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ì)算時(shí)間

這將把相對于現(xiàn)在的時(shí)間字符串轉(zhuǎn)換出來?，F(xiàn)在需要一個(gè)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)前時(shí)間

這將返回一個(gè)表示相對時(shí)間到現(xiàn)在的字符串。請記住，這取決于相對時(shí)間插件。

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時(shí)間戳

這將給出 Day.js 對象的 Unix 時(shí)間戳，即自 Unix 紀(jì)元以來的秒數(shù)。Unix 時(shí)間戳對象是 Day.js 中的內(nèi)置對象，因此使用它不需要調(diào)用插件。

沒有毫秒:

dayjs("2019-01-25").unix() // Output: 1548370800

以毫秒為單位：

dayjs("2019-01-25").valueOf() // Output: 1548370800000

根據(jù) Day.js 文檔，始終建議使用 Unix 時(shí)間戳。

計(jì)算一個(gè)月的天數(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 格式獲取時(shí)間和日期

將其序列化為 ISO 8601 字符串格式，無需插件：

dayjs("2019-06-25").toJSON() // Output: 2019-06-24T23:00:00.000Zdayjs("1996-01-11").toJSON() // Output: 1996-01-10T23:00:00.000Zdayjs("2025-05-10").toJSON() // Output: 2025-05-09T23:00:00.000Z

提供日期和時(shí)間作為字符串

返回一個(gè)包含日期表示的字符串，不需要插件:

dayjs("2025-03-20").toString() // Output: Wed, 19 Mar 2025 23:00:00 GMTdayjs("2010-08-08").toString() // Output: Sat, 07 Aug 2010 23:00:00 GMTdayjs("01-2005-25").toString() // @ Error output: Invalid Date

解析日期

Day.js 對象是不可變的，這意味著所有修改它的 API 操作都會產(chǎn)生一個(gè)新的對象實(shí)例。

字符串轉(zhuǎn)日期：檢查以下代碼以解析字符串并以日期格式返回它：

dayjs("2020-08-04T15:00:00.000Z")

一個(gè)已存在的本地 JavaScript Date 對象可以用來創(chuàng)建一個(gè) 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);// Alternativedayjs(new Date());

驗(yàn)證

要檢查日期和時(shí)間是否有效，請使用 Day.js 中的 .isValid() 方法。該方法會產(chǎn)生一個(gè)布爾結(jié)果:

dayjs("1996-05-01").isValid(); // Output: truedayjs("dummy text").isValid(); // Output: falsedayjs("2005-06-09").isValid(); // Output: true

時(shí)區(qū)

Day.js為觀察相同標(biāo)準(zhǔn)時(shí)間的地區(qū)提供時(shí)區(qū)兼容性。使用Day.js時(shí)區(qū)需要一個(gè)插件。要在Day.js中使用時(shí)區(qū)，我們需要同時(shí)安裝時(shí)區(qū)和UTC插件:

const dayjs = require("dayjs")const utc = require("dayjs/plugin/utc")const timezone = require("dayjs/plugin/timezone") // dependent on utc plugindayjs.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>

時(shí)區(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ò)展時(shí)區(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()方法，將時(shí)區(qū)作為普通字符串返回。

dayjs.tz("2013-11-18 11:55", "America/Toronto").toString()// Output: Mon, 18 Nov 2013 16:55:00 GMT

區(qū)解析

如果你想解析時(shí)區(qū)格式的日期，請使用名為CurrentParseFormate的插件來協(xié)助你解析時(shí)區(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)換為時(shí)區(qū)

更新偏移量，切換時(shí)區(qū)，然后返回到 day.js 對象實(shí)例。當(dāng)?shù)诙€(gè)參數(shù)傳遞一個(gè)true值時(shí)，只有時(shí)區(qū)（和偏移量）被更改，而本地時(shí)間保持不變。

<script>    dayjs.extend(window.dayjs_plugin_utc)    dayjs.extend(window.dayjs_plugin_timezone);<script>

估計(jì)用戶時(shí)區(qū)

dayjs.extend(window.dayjs_plugin_utc)dayjs.extend(window.dayjs_plugin_timezone);dayjs.tz.guess()  //Asia/Calcutta

默認(rèn)時(shí)區(qū)設(shè)置

將你喜歡的時(shí)區(qū)設(shè)置為默認(rèn)時(shí)區(qū)，而不是本地時(shí)區(qū)。在特定的 dayjs 對象中，仍然可以自定義不同的時(shí)區(qū)

Node.js：

var utc = require("dayjs/plugin/utc")var timezone = require("dayjs/plugin/timezone") // dependent on utc plugindayjs.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 timedayjs.tz("2019-08-05 11:00")

總結(jié)

我們首先了解了Day.js及其使用它格式化時(shí)間和日期的好處。Day.js簡單地替代了Moment.js。雖然Moment.js不是必需的，但Day.js提供了所有日期格式化、解析、插件和本地化要求。因此，可以使用 dayjs.org 在官方Day.js網(wǎng)站上選擇并查找更多信息。

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

標(biāo)簽：