[转]Day.js 使用详解与实战笔记
在现代前端开发中，日期和时间的处理是一个常见但容易出错的任务。虽然 JavaScript 内置了 Date 对象，但它功能有限且用法不够直观。Day.js 是一个轻量级（2KB 大小）、快速且与 Moment.js API 完全兼容的日期处理库，深受开发者喜爱。
本文将全面介绍 Day.js 的功能，涵盖基础用法、插件扩展、实战场景和最佳实践。
1. Day.js 的安装
1.1 使用 npm 或 yarn 安装
在 Node.js 项目中可以通过以下方式安装：
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 引入模块
安装后在项目中可以通过以下方式引入：
const dayjs = require('dayjs'); // CommonJS
import dayjs from 'dayjs'; // ES Module
2. Day.js 的核心功能
2.1 创建日期对象
Day.js 提供多种方式创建日期对象：
import dayjs from 'dayjs';
// 当前时间
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
常见的格式化标记包括：
| 标记 | 描述 | 示例 |
|---|---|---|
| YYYY | 四位年份 | 2025 |
| MM | 两位月份（01-12） | 01 |
| DD | 两位日期（01-31） | 21 |
| H | 小时（24 小时制） | 13 |
| h | 小时（12 小时制） | 1 |
| m | 分钟 | 45 |
| A | 上午/下午 | PM |
2.3 日期计算
Day.js 支持链式调用进行日期加减操作：
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 插件扩展
Day.js 的核心功能简单精炼，扩展功能由插件提供。常用插件包括：
3.1 自定义解析格式（Custom Parse Format）
通过插件支持更复杂的日期解析格式：
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 时区支持（UTC）
处理 UTC 时间需要安装并扩展 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）
实现日期的相对时间显示：
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 持续时间（Duration）
计算两个时间点之间的差异：
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. 实战案例
4.1 倒计时功能
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 工作日计算
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 动态显示相对时间
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）远小于 Moment.js（66KB）。
- 性能：Day.js 更快，适合性能敏感的应用场景。
- API：两者的 API 基本一致，Day.js 更简洁。
5.2 与 date-fns 对比
- 功能：Day.js 更加专注于轻量级核心和扩展性，而 date-fns 提供更丰富的函数库。
- 易用性：Day.js 的链式调用和 API 风格更直观。
6. 总结
Day.js 是一个强大而轻量的日期处理工具，提供了直观的 API 和丰富的插件扩展功能，能够满足绝大多数日期和时间的处理需求。 无论是开发大型项目，还是简单的日期处理任务，Day.js 都是一个优秀的选择。
浙公网安备 33010602011771号