JavaScript日期操作需警惕时区陷阱:new Date()返回本地时间,ISO字符串默认UTC解析;避免字符串解析歧义,推荐数值构造或补全时间;格式化应手动拼接而非依赖toLocaleDateString();日期加减优先用毫秒计算;相对时间显示推荐Intl.RelativeTimeFormat。

JavaScript 日期对象创建和时区陷阱
直接用 new Date() 得到的是本地时区时间,不是 UTC;服务器时间、API 返回的 ISO 字符串(如 "2024-05-20T13:45:30Z")默认按 UTC 解析。不注意这点,跨时区用户会发现日期“差一天”或“时间对不上”。
-
new Date("2024-05-20")在 Safari 和部分旧 Chrome 中解析为 UTC 时间(即本地时区的前一日),应改用new Date(2024, 4, 20)(注意月份是 0 起始)或显式补全时间:new Date("2024-05-20T00:00:00") - 从后端拿到 ISO 字符串(含
Z或+0800)时,new Date(str)能正确处理时区偏移,无需手动转换 - 想无歧义地表示“今天零点”,别写
new Date().setHours(0,0,0,0)——它修改的是本地时区时间;更稳妥的是:const todayStart = new Date(new Date().toDateString());
手写格式化函数比 toLocaleDateString 更可控
toLocaleDateString() 看似方便,但输出受用户系统语言、区域设置影响,中文用户可能得到“2024年5月20日”,英文用户却是“5/20/2024”,不适合展示给所有用户看的固定格式。
- 需要
"YYYY-MM-DD":用date.getFullYear()+String(date.getMonth() + 1).padStart(2, '0')拼接,避免依赖toISOString().slice(0,10)(它返回的是 UTC 零点,不是本地日期) - 需要带时分秒的
"YYYY-MM-DD HH:mm:ss":可封装一个函数function formatDateTime(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ` + `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`; } - 不要用
date.toString().match(/.../)正则提取——不同浏览器返回字符串格式不一致,不可靠
日期加减必须用毫秒计算,不能直接改年月日
看似简单地 date.setDate(date.getDate() + 7) 可以加 7 天,但遇到月末(如 1 月 31 日 + 1 天 → 2 月 1 日)是安全的;而 date.setMonth(date.getMonth() + 1) 在 1 月 31 日执行会变成 3 月 3 日(因为 2 月没有 31 日,自动溢出),这是最常踩的坑。
- 加减天数:用
date.getTime() + days * 24 * 60 * 60 * 1000再 new Date(),完全避开月份逻辑 - 加减月份:推荐用
date.setMonth(date.getMonth() + n),但之后要立刻校验并修正日期,例如const d = new Date(2024, 0, 31); // Jan 31 d.setMonth(d.getMonth() + 1); // now Feb 31 → auto becomes Mar 3 if (d.getDate() !== 31) d.setDate(0); // 回退到最后一天
- 计算两个日期相差多少天:
const diffDays = Math.floor((date2 - date1) / (1000 * 60 * 60 * 24));
注意结果是整数,向下取整
不要自己实现“X 天前”逻辑,用 Intl.RelativeTimeFormat
“2 小时前”“昨天”这类相对时间显示,手写 if-else 容易漏边界(比如跨月、夏令时切换),而且难做国际化。
立即学习“Java免费学习笔记(深入)”;
- 现代浏览器支持
Intl.RelativeTimeFormat,一行搞定:const rtf = new Intl.RelativeTimeFormat('zh-CN'); rtf.format(-2, 'hour'); // → "2 小时前" rtf.format(1, 'day'); // → "明天" - 注意它只接受数字 + 单位(
second/minute/hour/day/week/month/year),不接受 Date 对象;需先算好差值:const diffMs = dateNow - dateTarget; const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24)); rtf.format(diffDays, 'day');
- IE 不支持,如需兼容,可用
dayjs或date-fns的formatDistance替代
日期操作真正麻烦的从来不是“怎么写”,而是“什么时候该用本地时间、什么时候该用 UTC、哪一步隐含了时区转换”。哪怕只是显示一个生日,如果用户在东京注册、你在纽约查数据,没对齐时区基准,就可能把 5 月 20 日错成 5 月 19 日。











