[轉(zhuǎn)]Day.js 使用詳解與實(shí)戰(zhàn)筆記
原文地址:Day.js 使用詳解與實(shí)戰(zhàn)筆記 - 知乎
在現(xiàn)代前端開發(fā)中，日期和時間的處理是一個常見但容易出錯的任務(wù)。雖然 JavaScript 內(nèi)置了 Date 對象，但它功能有限且用法不夠直觀。Day.js 是一個輕量級（2KB 大小）、快速且與 Moment.js API 完全兼容的日期處理庫，深受開發(fā)者喜愛。
本文將全面介紹 Day.js 的功能，涵蓋基礎(chǔ)用法、插件擴(kuò)展、實(shí)戰(zhàn)場景和最佳實(shí)踐。
1. Day.js 的安裝
1.1 使用 npm 或 yarn 安裝
在 Node.js 項(xiàng)目中可以通過以下方式安裝：
npm install dayjs
# 或者
yarn add dayjs1.2 在瀏覽器中使用
可以通過 CDN 鏈接直接引入：
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
<script>
console.log(dayjs().format());
</script>1.3 引入模塊
安裝后在項(xiàng)目中可以通過以下方式引入：
const dayjs = require('dayjs'); // CommonJS
import dayjs from 'dayjs'; // ES Module
2. Day.js 的核心功能
2.1 創(chuàng)建日期對象
Day.js 提供多種方式創(chuàng)建日期對象：
import dayjs from 'dayjs';
?
// 當(dāng)前時間
console.log(dayjs().format()); // 2025-01-21T13:45:00+00:00
?
// 指定日期
console.log(dayjs('2025-01-01').format()); // 2025-01-01T00:00:00+00:00
?
// 使用 JavaScript 的 Date 對象
console.log(dayjs(new Date(2025, 0, 1)).format()); // 2025-01-01T00:00:00+00:00
2.2 格式化日期
Day.js 提供了豐富的日期格式化功能：
console.log(dayjs().format('YYYY-MM-DD')); // 2025-01-21
console.log(dayjs().format('dddd, MMMM D, YYYY h:mm A')); // Tuesday, January 21, 2025 1:45 PM
常見的格式化標(biāo)記包括：
| 標(biāo)記 | 描述 | 示例 |
|---|---|---|
| YYYY | 四位年份 | 2025 |
| MM | 兩位月份（01-12） | 01 |
| DD | 兩位日期（01-31） | 21 |
| H | 小時（24 小時制） | 13 |
| h | 小時（12 小時制） | 1 |
| m | 分鐘 | 45 |
| A | 上午/下午 | PM |
2.3 日期計(jì)算
Day.js 支持鏈?zhǔn)秸{(diào)用進(jìn)行日期加減操作：
console.log(dayjs().add(1, 'day').format('YYYY-MM-DD')); // 明天
console.log(dayjs().subtract(1, 'month').format('YYYY-MM-DD')); // 上個月
支持的單位包括：
| 單位 | 描述 |
|---|---|
| year | 年 |
| month | 月 |
| week | 周 |
| day | 天 |
| hour | 小時 |
| minute | 分鐘 |
| second | 秒 |
2.4 日期比較
const date1 = dayjs('2025-01-01');
const date2 = dayjs('2025-01-21');
?
console.log(date1.isBefore(date2)); // true
console.log(date1.isSame(date2)); // false
console.log(date1.isAfter(date2)); // false
3. Day.js 插件擴(kuò)展
Day.js 的核心功能簡單精煉，擴(kuò)展功能由插件提供。常用插件包括：
3.1 自定義解析格式（Custom Parse Format）
通過插件支持更復(fù)雜的日期解析格式：
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
?
const date = dayjs('21-01-2025', 'DD-MM-YYYY');
console.log(date.format()); // 2025-01-21T00:00:00+00:00
3.2 時區(qū)支持（UTC）
處理 UTC 時間需要安裝并擴(kuò)展 UTC 插件：
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
?
const utcTime = dayjs.utc().format();
console.log(utcTime); // 2025-01-21T13:45:00Z
3.3 相對時間（Relative Time）
實(shí)現(xiàn)日期的相對時間顯示：
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
?
console.log(dayjs().to(dayjs('2025-01-25'))); // in 4 days
console.log(dayjs().from(dayjs('2025-01-15'))); // 6 days ago
3.4 持續(xù)時間（Duration）
計(jì)算兩個時間點(diǎn)之間的差異：
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);
?
const diff = dayjs.duration(dayjs('2025-01-25').diff(dayjs('2025-01-21')));
console.log(diff.days()); // 4
4. 實(shí)戰(zhàn)案例
4.1 倒計(jì)時功能
function countdown(targetDate) {
const now = dayjs();
const target = dayjs(targetDate);
const diff = dayjs.duration(target.diff(now));
?
return `${diff.days()} 天 ${diff.hours()} 小時 ${diff.minutes()} 分鐘 ${diff.seconds()} 秒`;
}
?
console.log(countdown('2025-01-25'));
4.2 工作日計(jì)算
function isWorkday(date) {
const day = dayjs(date).day();
return day !== 0 && day !== 6; // 0 是周日, 6 是周六
}
?
console.log(isWorkday('2025-01-21')); // true
console.log(isWorkday('2025-01-25')); // false
4.3 動態(tài)顯示相對時間
function showRelativeTime(date) {
return dayjs().to(dayjs(date));
}
?
console.log(showRelativeTime('2025-01-25')); // in 4 days
5. Day.js 和其他日期庫對比
5.1 與 Moment.js 對比
- 大小：Day.js（2KB）遠(yuǎn)小于 Moment.js（66KB）。
- 性能：Day.js 更快，適合性能敏感的應(yīng)用場景。
- API：兩者的 API 基本一致，Day.js 更簡潔。
5.2 與 date-fns 對比
- 功能：Day.js 更加專注于輕量級核心和擴(kuò)展性，而 date-fns 提供更豐富的函數(shù)庫。
- 易用性：Day.js 的鏈?zhǔn)秸{(diào)用和 API 風(fēng)格更直觀。
6. 總結(jié)
Day.js 是一個強(qiáng)大而輕量的日期處理工具，提供了直觀的 API 和豐富的插件擴(kuò)展功能，能夠滿足絕大多數(shù)日期和時間的處理需求。 無論是開發(fā)大型項(xiàng)目，還是簡單的日期處理任務(wù)，Day.js 都是一個優(yōu)秀的選擇。
浙公網(wǎng)安備 33010602011771號