前端日期处理的多种方式

  • 方案一:new Date(dateString)
// 格式一:YYYY-MM-DD
const date1 = new Date('2025-07-15'); 
// 在多数现代浏览器中,这会被解析为 UTC 时间的零点:
// "Tue Jul 15 2025 08:00:00 GMT+0800 (中国标准时间)"

// 格式二:YYYY/MM/DD
const date2 = new Date('2025/07/15');
// 这通常会被解析为本地时间的零点:
// "Tue Jul 15 2025 00:00:00 GMT+0800 (中国标准时间)"

缺点:

1.不可靠的字符串解析 

                仅仅是分隔符 - 和 / 的区别,new Date() 的解析策略就完全不同。前者(YYYY-MM-DD)被当作 UTC 时间,而后者(YYYY/MM/DD)被当作本地时间

2.对象的可变性 

const today=new Date();   // 假设是 2025-07-15
function getTomorrow(date){
    date.setDate(date.getDate()+1);// 直接修改了传入的 date 对象
    return date
)
const tomorrow = getTomorrow(today);

console.log('明天是:',tomorrow); //正确

console.log('今天还是:',today); //!!!这里也被修改了,变成了明天

方案二:现代日期库:day.js

  • 优点:体积小巧(压缩后仅 2KB),API 设计与曾经的王者 Moment.js 极其相似,学习成本低。它支持链式调用,代码写起来非常流畅。
  • 特点:默认不可变(需要插件支持,但强烈建议使用)、功能通过插件体系扩展(按需加载)。
  • import dayjs from 'dayjs';
    
    // 1. 可靠的解析
    const date = dayjs('2025-07-15'); // 无论什么格式,解析行为都稳定一致
    
    // 2. 不可变性
    const today = dayjs();
    const tomorrow = today.add(1, 'day'); // .add() 返回一个新的 dayjs 对象
    
    console.log(today.format());    // 原始对象不变
    console.log(tomorrow.format()); // 新的对象
    
    // 3. 优雅的 API
    // 格式化
    console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // "2025-07-15 15:30:00"
    
    // 获取月份 (从 1 开始)
    console.log(dayjs().month() + 1); 
    
    // 计算
    console.log(dayjs().add(7, 'day').format('YYYY-MM-DD')); // 7天后
    console.log(dayjs().subtract(1, 'month').format('YYYY-MM-DD')); // 1个月前

 方案三:未来的希望:Temporal API

值得一提的是,JavaScript 自身也在进化。新的 Temporal API 旨在从根本上取代 Date 对象,提供一个全新的、设计精良的日期/时间处理方案。它内置了不可变性、无歧义的 API 和完善的时区支持。(注: 该方案正在讨论中)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值