深入了解dayjs官网

Day.js是一个轻量级的 JavaScript 时间库，具有和 moment.js 一样的 API ，但却没有 1.5MB 大小的尺寸。 本文将以Day.js官网为中心，对Day.js的使用、特点、插件等方面进行详细阐述。

一、Day.js特点

Day.js拥有和moment.js一样的API，但同时Day.js在很多方面反而更加方便实用。比如，它一些很好用的API函数：

//获取当天的起始时间
dayjs().startOf('day');

//计算两个日期之间的天数
dayjs().diff(dayjs('2019-12-13'), 'day');

//获取某月的天数
dayjs().daysInMonth();

Day.js内置了一些默认格式和解析器的实现，比如：’YYYY-MM-DD’、’YYYY/MM/DD’，统一了各个API对日期格式的要求，解决了传参、转换和输出的问题。

Day.js支持链式语法，即一个Day.js实例调用完一个方法之后，返回的仍然是一个Day.js实例，方便链式调用。

Day.js的API扩展性也很强，可以对格式进行随意定制。

二、Day.js的使用与语法

引入Day.js库之后，创建一个dayjs实例，并在其中传入日期或时间字符：

const dayjs = require('dayjs');
dayjs("2019-12-13")

// OR
dayjs(new Date())

// OR
dayjs(1579715221832)

Day.js可以解析ISO8601，RFC2822和Unix Timestamp等格式：

dayjs('2019-01-01')                // 日期
dayjs().year(2019).month(0).date(1) // 日期
dayjs('2019')                      // 年份
dayjs('2019-001')                  // ISOWeek
dayjs('2019-W01-1')                // ISOWeek
dayjs('2019-05-06T03:04:05')       // 时间戳
dayjs('20190506')                  // 自定义

最后，Day.js还支持格式化输出，比如：

dayjs().format()                     // 默认格式（2022-02-14T20:30:54+08:00）
dayjs().format('YYYY-MM-DD')          // '2019-01-01'
dayjs().format('h:mm:ss A')           // '12:00:00 PM'(采用12小时制)
dayjs().format('[Today is] DDDo [day of the year]')   //'Today is 1st day of the year'

三、Day.js插件——duration & utc

Day.js还有一些像moment.js一样的插件。其中duration插件可以方便地计算两个时间之间的差值，如下所示：

// 获取两个时间相差的毫秒数
const oneHour = dayjs.duration(1, "hour").asMilliseconds();
const duration = dayjs('2022-02-14 21:30:00').diff(dayjs('2022-02-14 20:30:00'));   // 3600000

// 获取两个时间相差的具体时间（小时/分钟）
const diffHour = dayjs.duration(duration).asHours();  // 1
const diffMinute = dayjs.duration(duration).asMinutes(); // 60

而utc插件则可以方便地进行UTC时间与本地时间的转换，如下所示：

dayjs.utc('2019-01-01T00:00:00Z').local().format()   // UTC时间 -> 本地时间

四、Day.js插件——calendar & relativeTime

Day.js的calendar插件可以将日期转换成一些常用的表示形式，如下所示：

dayjs().calendar(null, {
  // 如果与当前时刻相差不超过3天以上，则显示在具体的星期几
  sameDay: '[Today]',
  nextDay: '[Tomorrow]',
  lastDay: '[Yesterday]',
  nextWeek: 'dddd',
  lastWeek: 'dddd',
  sameElse: 'YYYY/MM/DD'
});

而relativeTime插件也可将日期根据时间差值转换成一些表示形式，方便日常使用：

// 获取当前日期就是多久之前
dayjs().startOf('day').fromNow();    // 'a day ago'

// 获取未来某一日期与现在的时间相差多少
dayjs('2019-06-08').fromNow();      // '6 months ago'

// 获取未来某一日期到现在的时间差值
dayjs('2019-06-08').toNow();      // 'in 6 months'

五、Day.js插件——updateLocale

Day.js的locale插件可以对本地语言格式和解析进行扩展。例如下面的代码可以扩展中文支持，使得中国的用户可以更方便的使用Day.js：

// 扩展中文语言包
dayjs.locale('zh-cn', {
  weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  monthsShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
});

这样，当我们使用dayjs.format(‘e’)的时候，输出的就是’周三’而不是默认的’Wed’。

六、Day.js插件——businessDay

Day.js的businessDay插件可以方便地获取下一个工作日/下一个周末。使用businessDay插件需要首先引入businessDay插件和businessTime插件（该插件用于指定一个起始时间点，它可以告诉我们当天的工作时间），具体的可以查看Day.js官网的文档。

const dayjs = require('dayjs');
const businessDay = require('dayjs/plugin/businessDay');
const businessTime = require('dayjs/plugin/businessTime');
dayjs.extend(businessDay);
dayjs.extend(businessTime);

// 找到下一个工作日
dayjs().nextBusinessDay();

// 找到下一个周末
dayjs().nextBusinessWeekend();

七、Day.js的优劣对比分析

Day.js和moment.js都是非常成熟的时间库，而Day.js又有着类似于moment.js的API，使用方法上二者并没有太大的不同。但经过对比之后，Day.js更加轻量化、易用性强，而且自带TypeScript支持，使得我们在编程过程中可以更多地专注于业务逻辑的构建和开发效率的提升。

八、总结

Day.js作为轻量级的 JavaScript 时间库，具有和moment.js一样的 API，但具有较小的尺寸，在实际应用中非常方便实用。Day.js在编写过程中的使用方法、特点和插件等方面可以满足不同开发者的需求。相信随着Day.js在前端开发中的更多应用，会为广大用户带来更多的便利。