原生 Date 有设计缺陷,推荐用 date-fns(轻量、纯函数)或 dayjs(Moment 替代,仅 2KB);Moment.js 已不建议新项目使用。

JavaScript 原生 Date 对象够用,但写法繁琐、易出错;生产项目推荐用 date-fns(轻量、函数式)或 dayjs(API 类似 Moment,体积小),Moment.js 已不建议新项目使用。
原生 Date 的坑怎么绕开?
原生 Date 构造行为不一致、时区处理反直觉、月份从 0 开始、getMonth() 和 getDay() 容易混淆——这些不是“用法问题”,是设计缺陷。
-
new Date('2023-10-01')在 Safari 和部分安卓 WebView 中解析为 UTC 时间,而在 Chrome 中可能按本地时区解析;统一改用new Date(2023, 9, 1)(注意:月份是 0–11) - 格式化必须手写拼接,比如
${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} - 计算“7 天后”不能直接
d.setDate(d.getDate() + 7),因为会修改原对象且跨月时逻辑脆弱;应先克隆:const next = new Date(d); next.setDate(d.getDate() + 7);
date-fns 为什么适合大多数场景?
它按需引入、无副作用、类型友好(自带 TypeScript 支持),所有函数都是纯函数,不会修改原始 Date 对象。
- 安装:
npm install date-fns - 常用操作示例(ESM 方式导入):
import { addDays, format, parseISO, isAfter, differenceInCalendarDays } from 'date-fns';
const d = parseISO('2023-10-01');
const tomorrow = addDays(d, 1);
console.log(format(tomorrow, 'yyyy-MM-dd')); // '2023-10-02'
console.log(differenceInCalendarDays(new Date(), d)); // 距离今天多少整天
- 注意:不要 import 整个包(
import * as dateFns from 'date-fns'),否则会打包全部函数,体积暴增 - 时区相关操作(如转 UTC、显示用户本地时间)需配合
date-fns-tz插件
dayjs 和 Moment.js 怎么选?
dayjs 是 Moment 的轻量替代,API 高度兼容,压缩后仅 2KB;Moment.js 已进入维护模式,官方明确建议迁移到 dayjs 或 date-fns。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
立即学习“Java免费学习笔记(深入)”;
-
dayjs默认不带插件,如需相对时间(fromNow)、时区支持,要显式引入:import 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); -
Moment.js的moment().add(1, 'days')看似简洁,但内部 mutates 原对象,且包体积超 300KB,Tree-shaking 无效 - 若项目已重度依赖 Moment,可先用
moment-timezone+moment,但新功能开发请避免再加 Moment 代码
真正难的不是“选哪个库”,而是统一团队对时区的处理策略:后端传的时间戳是否含时区?前端展示要不要转成本地时间?日历组件选中日期要不要归零时分秒?这些比函数调用更影响稳定性。










