★ FEATURED ARTICLE 1. 为什么需要Day.js核心API速查表在前端开发中日期时间处理是每个开发者都绕不开的痛点。我见过太多项目因为日期处理不当导致的bug时区转换错误、格式化不一致、日期计算偏差...这些问题往往在测试阶段难以发现直到上线后才暴露出来。Day.js作为Moment.js的轻量级替代方案凭借其2KB的超小体积和几乎相同的API设计已经成为现代前端项目的首选日期库。但很多新手开发者容易陷入两个误区过度依赖插件Day.js的插件机制确实强大但90%的日常需求其实用核心API就能解决API使用不规范比如用format(YYYY-MM-DD)却不知道YYYY和yyyy的区别这就是为什么我们需要一份纯净的核心API速查表——它应该像瑞士军刀一样精准实用不包含任何冗余内容让开发者能快速找到最基础的日期操作方法。2. Day.js核心安装与初始化2.1 多种安装方式对比根据项目环境不同Day.js有几种典型的引入方式# npm方式推荐用于现代前端工程 npm install dayjs --save # CDN方式适合传统项目快速引入 script srchttps://unpkg.com/dayjs1.11.10/dayjs.min.js/script # ES Module方式Vite/现代浏览器 import dayjs from dayjs注意在生产环境中务必锁定版本号避免因自动升级导致意外行为。我曾遇到过团队因小版本升级导致isSame方法行为变化的问题。2.2 日期初始化技巧Day.js的构造函数非常灵活以下是6种常用的初始化方式// 1. 当前时间 const now dayjs() // 2. ISO 8601字符串 const fromString dayjs(2024-03-15) // 3. Unix时间戳毫秒 const fromTimestamp dayjs(1678924800000) // 4. Date对象 const fromDateObj dayjs(new Date()) // 5. 数组格式 [年,月(0-11),日] const fromArray dayjs([2024, 2, 15]) // 注意月份是0-based // 6. 克隆现有实例 const cloned dayjs(now)实际开发中最容易踩坑的是时区问题。Day.js默认使用本地时区如果需要UTC时间应该显式声明const utcDate dayjs.utc(2024-03-15)3. 核心API分类详解3.1 解析与获取日期解析方法dayjs(2024-03-15) // 自动解析ISO格式 dayjs(03/15/2024, MM/DD/YYYY) // 自定义格式解析取值方法const date dayjs(2024-03-15) date.year() // 2024 date.month() // 2 (0-based) date.date() // 15 date.day() // 5 (星期五) date.hour() // 0 date.minute() // 0 date.second() // 0 date.millisecond() // 0实用技巧获取季度信息虽然不在核心API中但可以通过简单计算实现const quarter Math.floor(date.month() / 3) 13.2 日期操作与计算不可变性原则Day.js所有操作都返回新实例符合函数式编程原则const original dayjs(2024-03-15) const modified original.add(1, day) console.log(original.format()) // 不变 console.log(modified.format()) // 新实例常用计算方法// 加法 date.add(7, day) date.add(2, month) // 减法 date.subtract(3, year) // 设置特定值 date.set(month, 5) // 设置为6月 date.startOf(month) // 当月第一天 date.endOf(week) // 当周最后时刻日期差计算const date1 dayjs(2024-03-15) const date2 dayjs(2024-03-20) date2.diff(date1) // 默认毫秒差 date2.diff(date1, day) // 5 (天数差)3.3 日期比较与查询比较方法date1.isBefore(date2) // true date1.isAfter(date2) // false date1.isSame(date2) // false date1.isSame(date2, month) // 同年同月比较范围查询const start dayjs(2024-03-01) const end dayjs(2024-03-31) const target dayjs(2024-03-15) target.isBetween(start, end) // true target.isBetween(start, end, day, []) // 包含边界常见陷阱isSame的第二个参数是精度单位很多人会误传格式字符串。3.4 格式化输出基础格式化date.format() // 2024-03-15T00:00:0008:00 date.format(YYYY-MM-DD) // 2024-03-15 date.format(dddd, MMMM D) // Friday, March 15常用格式标记标记示例说明YYYY20244位年YY242位年MMMMMarch月份全称MMMMar月份缩写MM03月份(01-12)M3月份(1-12)DDDD075年天数DD15日(01-31)D15日(1-31)ddddFriday星期全称dddFri星期缩写HH08时(00-23)hh08时(01-12)mm05分(00-59)ss30秒(00-59)AAM上午/下午aam上午/下午(小写)关键区别YYYYvsyyyy- 在Day.js中两者等效但有些库中yyyy是严格公历年YYYY是周年ISO标准。建议统一使用YYYY。4. 实战应用技巧4.1 表单日期处理处理表单日期时的最佳实践// 从input[typedate]获取值 const inputDate dayjs(e.target.value) // 显示友好格式 inputDate.format(YYYY年M月D日) // 验证日期有效性 if (!inputDate.isValid()) { alert(请输入有效日期) }4.2 数据过滤与聚合按时间维度聚合数据的典型模式const orders [ { id: 1, amount: 100, date: 2024-03-15 }, { id: 2, amount: 200, date: 2024-03-16 }, // ... ] // 按日聚合 const dailySummary orders.reduce((acc, order) { const day dayjs(order.date).format(YYYY-MM-DD) acc[day] (acc[day] || 0) order.amount return acc }, {})4.3 性能优化建议避免重复创建实例在循环中复用Dayjs对象// 不好 items.forEach(item { const date dayjs(item.timestamp) // ... }) // 好 const parseDate dayjs items.forEach(item { const date parseDate(item.timestamp) // ... })谨慎使用链式调用长链式会创建多个中间对象// 不推荐 const result dayjs() .add(1, day) .startOf(month) .format() // 推荐 const date dayjs().add(1, day) const result date.startOf(month).format()5. 常见问题排查5.1 无效日期处理Day.js对无效日期的处理是静默的这可能导致隐蔽的bugconst invalid dayjs(2024-02-30) // 2月没有30号 console.log(invalid.isValid()) // false console.log(invalid.format()) // 仍然会输出但结果不可靠安全做法是总是检查有效性function safeParse(dateStr) { const date dayjs(dateStr) if (!date.isValid()) { throw new Error(Invalid date: ${dateStr}) } return date }5.2 时区陷阱即使不使用插件时区问题也可能出现// 假设本地时区是UTC8 const date dayjs(2024-03-15T00:00:00Z) // UTC时间 console.log(date.format()) // 在UTC8时区会显示为08:00解决方案是明确时区意图// 明确使用UTC const utcDate dayjs.utc(2024-03-15T00:00:00Z) // 或转换为本地时间 const localDate dayjs(2024-03-15T00:00:00Z).local()5.3 浏览器兼容问题虽然Day.js支持所有现代浏览器但在旧版IE中可能需要polyfill// 需要先加载以下polyfill // - Array.prototype.includes // - Object.assign // - Promise6. 进阶技巧不依赖插件6.1 工作日计算计算两个日期之间的工作日天数不考虑节假日function getWeekdaysBetween(start, end) { let count 0 let current dayjs(start) const endDate dayjs(end) while (current.isBefore(endDate, day)) { if (current.day() ! 0 current.day() ! 6) { count } current current.add(1, day) } return count }6.2 相对时间显示实现3天前这样的相对时间显示function formatRelativeTime(date) { const now dayjs() const diffDays now.diff(date, day) if (diffDays 0) return 今天 if (diffDays 1) return 昨天 if (diffDays 7) return ${diffDays}天前 const diffWeeks now.diff(date, week) if (diffWeeks 4) return ${diffWeeks}周前 return date.format(YYYY年M月D日) }6.3 自定义语言环境即使不使用locale插件也可以实现简单本地化const weekdays [周日, 周一, 周二, 周三, 周四, 周五, 周六] function formatChinese(date) { return ${date.year()}年${date.month() 1}月${date.date()}日 ${weekdays[date.day()]} }经过多年在前端项目中使用Day.js的经验我发现90%的日期处理需求其实都不需要插件。核心API已经覆盖了绝大多数场景关键是深入理解这些基础方法的组合运用。这份速查表应该成为你日常开发的得力助手而不是束之高阁的参考文档。建议将它打印出来贴在工位旁边或者保存为代码片段随时查阅。
阅读完成 · 觉得有帮助？
