时间格式及其处理方法

前端常用的时间格式及其处理方法总结

---

1. 完整日期时间格式

• 示例: 2025-03-31 10:39:00
• 适用场景: 显示完整的日期和时间，比如日志记录、订单时间等。
• 处理方法:
  • 使用 JavaScript 的 Date 对象进行格式化：

    const now = new Date();
    const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    console.log(formattedDateTime); // 输出类似 "2025-03-31 10:39:00"
    

  • 或者使用第三方库如 day.js、moment.js（已进入维护模式）：

    const formattedDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
    console.log(formattedDateTime);
    

---

2. 仅日期格式

• 示例: 2025-03-31
• 适用场景: 只需要显示日期，比如生日、预约日期等。
• 处理方法:
  • 使用 Date 对象：

    const now = new Date();
    const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    console.log(formattedDate); // 输出类似 "2025-03-31"
    

  • 使用 day.js：

    const formattedDate = dayjs().format('YYYY-MM-DD');
    console.log(formattedDate);
    

---

3. 仅时间格式

• 示例: 10:39:00
• 适用场景: 只需要显示时间，比如倒计时、打卡时间等。
• 处理方法:
  • 使用 Date 对象：

    const now = new Date();
    const formattedTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    console.log(formattedTime); // 输出类似 "10:39:00"
    

  • 使用 day.js：

    const formattedTime = dayjs().format('HH:mm:ss');
    console.log(formattedTime);
    

---

4. 相对时间格式

• 示例: 3分钟前、昨天、上周三
• 适用场景: 社交媒体动态、评论时间等。
• 处理方法:
  • 自定义逻辑实现：

    function formatRelativeTime(date) {
      const now = new Date();
      const diffInSeconds = Math.floor((now - date) / 1000);
    
      if (diffInSeconds < 60) return `${diffInSeconds}秒前`;
      if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}分钟前`;
      if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}小时前`;
      if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}天前`;
      return '更早之前';
    }
    
    console.log(formatRelativeTime(new Date(Date.now() - 180000))); // 输出类似 "3分钟前"
    

  • 使用第三方库：
    • day.js 的插件 relativeTime：

      dayjs.extend(window.dayjs_plugin_relativeTime);
      const relativeTime = dayjs().from(dayjs('2025-03-30'));
      console.log(relativeTime); // 输出类似 "一天前"
      

---

5. 友好型日期格式

• 示例: 今天 10:39、昨天 15:20、2025年3月30日
• 适用场景: 需要更贴近用户习惯的时间展示，比如聊天记录、通知等。
• 处理方法:
  • 自定义逻辑实现：

    function formatFriendlyDate(date) {
      const now = new Date();
      const target = new Date(date);
      const isToday = now.toDateString() === target.toDateString();
      const isYesterday = new Date(now.setDate(now.getDate() - 1)).toDateString() === target.toDateString();
    
      if (isToday) return `今天 ${String(target.getHours()).padStart(2, '0')}:${String(target.getMinutes()).padStart(2, '0')}`;
      if (isYesterday) return `昨天 ${String(target.getHours()).padStart(2, '0')}:${String(target.getMinutes()).padStart(2, '0')}`;
      return `${target.getFullYear()}年${target.getMonth() + 1}月${target.getDate()}日`;
    }
    
    console.log(formatFriendlyDate(new Date())); // 输出类似 "今天 10:39"
    

---

6. ISO 时间格式

• 示例: 2025-03-31T10:39:00.000Z
• 适用场景: 数据传输、API 请求/响应中的时间字段。
• 处理方法:
  • 使用 Date 对象的 toISOString() 方法：

    const isoTime = new Date().toISOString();
    console.log(isoTime); // 输出类似 "2025-03-31T10:39:00.000Z"
    

---

7. 自定义时间格式

• 示例: 2025年3月31日 星期一 10:39
• 适用场景: 需要特定格式的时间展示，比如报表、证书等。
• 处理方法:
  • 使用 Date 对象结合自定义逻辑：

    const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const now = new Date();
    const customFormat = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${daysOfWeek[now.getDay()]} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
    console.log(customFormat); // 输出类似 "2025年3月31日 星期一 10:39"
    

  • 使用 day.js：

    const customFormat = dayjs().format('YYYY年M月D日 dddd HH:mm');
    console.log(customFormat);