当前位置：首页 > news >正文

[特殊字符] 每日前端宝藏库 | Day.js ⏳✨

news 2025/9/14 10:55:05

🌟 轻量级时间处理王者，6KB 的体积，Moment.js 的 API 风格，真香警告！ 🚨💥

🎯 一句话介绍

Day.js 是一个 2KB 超轻量级的 JavaScript 时间日期处理库 📏⚡，API 完全兼容 Moment.js，但无需改变代码风格，即可享受极速性能和极小体积！🚀💨

💬 “它不是 Moment 的替代品，它是未来的标准。” —— 前端开发者集体认证 ✅

🧰 为什么你需要它？

传统痛点 ❌	Day.js 解法 ✅
Moment.js 体积大（200KB+）📦	仅 2KB！gzip 后更小 🛠️
不支持 Tree-shaking ❌	插件化设计，按需引入 🔌
不可变性缺失 ❌	所有操作返回新实例，安全可靠 🔐
浏览器兼容性差 ❌	支持 IE8+，现代项目无压力 🌐

🚀 快速上手：3 步起飞！

Step 1️⃣：安装它！

npm install dayjs
# 或 yarn
yarn add dayjs

Step 2️⃣：引入并使用！

import dayjs from 'dayjs';// ✅ 当前时间
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); 
// 👉 2025-09-12 11:45:30// ✅ 解析时间
console.log(dayjs('2025-10-01').format('MMM D, YYYY'));
// 👉 Oct 1, 2025// ✅ 时间计算
console.log(dayjs().add(7, 'day').format('dddd, MMMM D'));
// 👉 Friday, September 19

Step 3️⃣：扩展功能（插件系统）🔧

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; // 相对时间
import weekday from 'dayjs/plugin/weekday'; // 星期dayjs.extend(relativeTime);
dayjs.extend(weekday);console.log(dayjs().subtract(3, 'hour').fromNow());
// 👉 3 hours ago 🕐console.log(dayjs().weekday(-7).format('dddd'));
// 👉 Friday (上周五) 📅

💻 在线测试沙盒 🧪

👉 快来动手试试吧！下面是一个可运行的代码编辑器（模拟）：

// ✏️ CDN方式引入
import dayjs from 'https://cdn.skypack.dev/dayjs';// 示例 1：格式化
console.log('今天是：', dayjs().format('dddd, MMMM D, YYYY'));// 示例 2：相对时间
console.log('昨天是：', dayjs().subtract(1, 'day').fromNow());// 示例 3：判断闰年
console.log('2024 是闰年吗？', dayjs('2024-02-29').isValid() ? '✅ 是' : '❌ 否');

🔗 在线测试地址：

StackBlitz - Day.js 示例

🧩 常用插件一览 🎯

插件	功能	引入方式
`relativeTime`	几分钟前、几小时前	`.fromNow()`
`calendar`	昨天、今天、明天	`.calendar()`
`utc`	UTC 时区支持	`.utc()`
`timezone`	时区转换	`.tz('Asia/Shanghai')`
`advancedFormat`	更多格式化符号	`YYYY [年]`

📊 适用场景 🎯

📅 日历组件开发 🗓️
⏰ 倒计时、定时任务 ⏱️
📊 数据可视化中的时间轴 📈
🌍 国际化时间展示 🌐
📱 移动端轻量需求 📱

🏁 总结：Day.js 是你的最佳拍档！💑

评分	内容
🚀 易用性	⭐⭐⭐⭐⭐
📦 体积	⭐⭐⭐⭐⭐
🔄 兼容性	⭐⭐⭐⭐☆
🧩 扩展性	⭐⭐⭐⭐⭐
💡 推荐指数	🔥🔥🔥🔥🔥