dayjs使用分享

两段代码对比

1. 时间操作

1
setTimeout(() => {
2
  // xxx代码逻辑
3
}, 60 * 60 * 1000)

2. 用Dayjs操作

1
const oneHour = dayjs.duration(1, 'hours').asMilliseconds()
2

3
setTimeout(() => {
4
    // xxx代码逻辑
5
}, oneHour)

哪段代码更容易理解？

显然，第二段代码更加的语义化，一眼就能看懂定时器的时长。

dayjs介绍

dayjs是一个core只有2kb的包，用于替代庞大的momentjs。它提供了相似的API，便于从momentjs迁移代码。

dayjs也设计了插件体系，一些不太常用的大体积功能可以用插件的方式引入。

dayjs的方法名直观表达意图，参数结构符合自然思维，并支持链式调用，可以减少出错的可能，推荐使用它替换代码中的手写时间日期操作代码。

常用场景介绍

从字符串parse时间

字符串需要满足ISO 8601标准。

1
dayjs('2018-04-04T16:00:00.000Z')
2
dayjs('2018-04-13 19:18:17.040+02:00')
3
dayjs('2018-04-13 19:18')

JS Date & dayjs格式互转

1
var d = new Date(2018, 8, 18)
2
var day = dayjs(d)
3

4
var date = day.toDate()

时间的读 & 写

1
dayjs().valueOf() // 获取当前时间戳
2

3
dayjs().second(30) // 设置秒为30
4
dayjs().second() // 读取秒

时间格式化

1
dayjs().format('YYYY-MM-DD HH:mm:ss')

时间差异

1
const date1 = dayjs('2019-01-25')
2
const date2 = dayjs('2018-06-05')
3
date1.diff(date2) // 返回毫秒数 20217600000
4

5

6
// 计算在具体的单位上时间差异
7
const date1 = dayjs('2019-01-25')
8
// 去除小数部分
9
date1.diff('2018-06-05', 'month') // 7
10
// => 精确小数
11
date1.diff('2018-06-05', 'month', true) // 7.645161290322581

时间前后比较

isAfter

1
// 默认从毫秒开始比较
2
dayjs().isAfter(dayjs('2024-11-03')) // true
3
// 例如从月开始比（月 + 年） => 第二个参数传入比较的最低单位
4
dayjs().isAfter(dayjs('2024-11-03'), 'month') // false

isBefore、isSame API用法相同。

isSameOrAfter、isSameOrBefore => 包含比较的边界，需要额外引入IsSameOrBefore插件使用。

isBetween: 判断是否在两个时间的中间，需要额外引入 IsBetween插件使用。也支持传入比较的最低单位。

1
dayjs.extend(isBetween)
2
dayjs('2010-10-20').isBetween('2010-10-19', dayjs('2010-10-25'))  // true
3

4
dayjs('2010-10-20').isBetween('2010-10-19', '2010-10-25', 'month') // false

时间加减

例如从一个固定时间获取一个小时后的时间，可以用add、subtract实现。

1
var a = dayjs('2024-11-03')
2
a.add(2, 'day') // => 对象变为2024-11-05的值
3
a.substract(1, 'day') // => 对象变为2024-11-04的值

时长对象

1
dayjs.extend(duration)
2

3
dayjs.duration({ months: 12 })
4
dayjs.duration(12, 'm'); // 和上面对象形式等价

支持时长的加减

1
var a = dayjs.duration(1, 'd');
2
var b = dayjs.duration(2, 'd');
3

4
a.add(b).days(); // 3
5
a.add({ days: 2 } ).days();
6
a.substract(2, 'days');

时间对象支持加减时长

1
var a = dayjs('2024-11-03')
2
var b = dayjs.duration(2, 'd')
3

4
a.add(b).date(); // 5