快捷導(dǎo)航

時間處理工具?dayjs使用示例詳解

更新時間：2022年10月27日 08:38:54 作者：昆吾kw

這篇文章主要為大家介紹了時間處理工具?dayjs使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

特點

在 dayjs 之前，還有一個時間處理工具 moment.js，但是它的體積比較大，即使經(jīng)過壓縮壓縮之后依然有 80kb 左右。而前者 dayjs 只有 2kb 大小，且具備一致的 API ，所以現(xiàn)在大都使用 dayjs。

體積極?。汉诵陌挥?2kb 大小，國際化需要加載對應(yīng)的語言包，可通過插件擴展功能。

簡單易用：和 Moment.js 的 API 設(shè)計保持一致。

不可變：所有的 API 操作都將返回一個新的 Dayjs 對象，避免 bug 產(chǎn)生，節(jié)約調(diào)試時間。

國際化：對國際化支持良好，默認(rèn)為英語環(huán)境。

安裝和使用

在現(xiàn)代前端應(yīng)用中，通過 node 包管理工具安裝，比如：

pnpm add dayjs

dayjs 的基本架構(gòu)

dayjs 包暴露了一個全局方法 dayjs，它是一個工廠函數(shù)，返回 Dayjs 對象的實例，大致結(jié)構(gòu)如下：

function Dayjs () {
    // ...
}
function dayjs () {
    return new Dayjs()
}

所以在使用 dayjs 時，每次調(diào)用 dayjs 方法，其實都是創(chuàng)建了一個 Dayjs 構(gòu)造函數(shù)的實例。

基本用法

JavaScript 原生的 Date 日期對象沒有提供處理格式化日期時間的方法，需要手動封裝，可通過引入 dayjs 對日期格式進行處理。

Dayjs 原型對象上有一個 format 方法，用于格式化日期時間。它支持多種解析方法，比如時間戳，Date 對象實例和合法的日期字符串。

import dayjs from 'dayjs'
// 解析 Date 對象實例
dayjs(new Date()).format('YYYY-MM-HH') // 2022-10-24
// 解析 Unix 時間戳 (毫秒)
dayjs(1666617034000).format('YYYY/MM/DD hh:mm:ss') // 2022/10/24 21:10:34
// 解析 Unix 時間戳 (秒)
dayjs.unix(1666617034).format('YYYY-MM-DD') // 2022-10-24
// 解析符合 ISO 8601 格式的日期字符串
dayjs('2022-10-24T20:00:00.000Z').format('YYYY-MM-HH hh:mm:ss') // 2022-10-25 04:00:00

國際化

dayjs 默認(rèn)語言是英語，只用來展示時間時沒有問題。如果要做一些其他的處理，比如計算相對時間，此時需要手動導(dǎo)入中文語言包，來把一些描述性文字轉(zhuǎn)為中文顯示。

安裝 dayjs 時，會把語言包一并安裝下，位于 dayjs/locale 目錄下。

import dayjs from 'dayjs'
import zhCn from 'dayjs/locale/zh-cn'
dayjs.locale(zhCn)

使用插件

在一些場景下，需要顯示一條數(shù)據(jù)創(chuàng)建的相對時間，而非絕對時間，比如朋友圈里的分享，論壇里的帖子等等。此時可以導(dǎo)入一個插件來實現(xiàn)這個功能。

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
// 距離現(xiàn)在的相對時間
console.log(dayjs().toNow()) // 幾秒前
// 某一個日期距離現(xiàn)在的相對時間
console.log(dayjs().to('2022-10-20')) // 5 天前