快捷導(dǎo)航

時(shí)間處理工具?dayjs使用示例詳解

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

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

特點(diǎn)

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

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

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

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

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

安裝和使用

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

pnpm add dayjs

dayjs 的基本架構(gòu)

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

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

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

基本用法

JavaScript 原生的 Date 日期對(duì)象沒有提供處理格式化日期時(shí)間的方法，需要手動(dòng)封裝，可通過(guò)引入 dayjs 對(duì)日期格式進(jìn)行處理。

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

import dayjs from 'dayjs'
// 解析 Date 對(duì)象實(shí)例
dayjs(new Date()).format('YYYY-MM-HH') // 2022-10-24
// 解析 Unix 時(shí)間戳 (毫秒)
dayjs(1666617034000).format('YYYY/MM/DD hh:mm:ss') // 2022/10/24 21:10:34
// 解析 Unix 時(shí)間戳 (秒)
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

國(guó)際化

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

安裝 dayjs 時(shí)，會(huì)把語(yǔ)言包一并安裝下，位于 dayjs/locale 目錄下。

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

使用插件

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

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