深入了解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在前端開發中的更多應用，會為廣大用戶帶來更多的便利。