时间的魔法师：一个强大的JavaScript时间格式化工具

我们在做项目的时候常常遇见日期格式化的问题，在我还是小白的时候遇见一次写一次...，现在看来真的很low币。在这这篇文章之前，也看到有许多大佬已经封装了日期格式化的东西，但是还是以学习为目的边写边练了，顺便记录一下，仅供参考

1️⃣. 基础

在CV之前应该补充一些JavaScript基础的时间类与方法，自我感觉真的不用记太多，下面代码的这几个就可以了，真实全部要求原生写，那确实很CD，那就直接 console.dir() 看就行了

const currentDate = new Date(); 
console.dir(currentDate);// 获取当前时间 Fri Sep 01 2023 11:50:36 GMT+0800 (中国标准时间)
let year = currentDate.getFullYear() // 获取当前年
let month = currentDate.getMonth() + 1 // 获取当前月(需要注意的是getMonth方法获取的月份会少1)
let day = currentDate.getDate() // 获取当前日
let hour = currentDate.getHours() // 获取当前时
let minute = currentDate.getMinutes() // 获取当前分
let second = currentDate.getSeconds() // 获取当前秒
let week = currentDate.getDay() // 获取当前星期几
let timestamp = currentDate.getTime() // 获取当前时间戳
let weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(`🎉${year}-${month}-${day} ${hour}:${minute}:${second}`);
// 输出结果： 🎉2023-9-1 11:50:36
console.log(`🎉今天${weekList[week]},时间戳是${timestamp}`);
// 输出结果：🎉今天星期五,时间戳是1693540236765

2️⃣. 几种常用的格式化方法

🔴. 整体格式化日期时间

按照一定的格式进行时间的输出，该方法仅支持三种格式：1. 日期时间：yyyy-MM-dd HH:mm:ss ;2. 日期：yyyy-MM-dd ;3.时间：HH:mm:ss

按照自己项目的业务自行进行修改

function formatterDate({date,format = "yyyy-MM-dd HH:mm:ss"}) {
      let currentDate = date || new Date();
      let year = currentDate.getFullYear()
      let month = currentDate.getMonth() + 1
      let day = currentDate.getDate()
      let hour = currentDate.getHours()
      let minute = currentDate.getMinutes()
      let second = currentDate.getSeconds()
      let time = ""
      switch (format) {
        case "yyyy-MM-dd HH:mm:ss":
          time =
            `${year}-${`${month}`.padStart(2,'0')}-${`${day}`.padStart(2,'0')} ${`${hour}`.padStart(2,'0')}:${`${minute}`.padStart(2,'0')}:${`${second}`.padStart(2,'0')}`
          break;
        case "yyyy-MM-dd":
          time =
            `${year}-${`${month}`.padStart(2,'0')}-${`${day}`.padStart(2,'0')}`
          break
        case "HH:mm:ss":
          time =
            `${`${hour}`.padStart(2,'0')}:${`${minute}`.padStart(2,'0')}:${`${second}`.padStart(2,'0')}`
          break
        default:
          break;
      }
      return time
    }

🟣. 格式化星期

按照规定，每周的第一天是星期日，我们只需根据获取到的值进行列表取值即可

function formatWeek(week) {
   let curWeek = week || new Date().getDay()
   let weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
   return weekList[curWeek]
}

🟡. 计算某个时间距离当前时间多久

传入时间戳，计算输入传入时间距离当前时间有多久。

输出结果：刚刚、X分钟前/后、X小时前/后、X天前/后、X月前/后、X年前/后

function timeDistance(timestamp) {
      // 判断传入的是否是时间戳
      if (!timestamp) throw (new Error('Date Error:The timestamp cannot be empty'))
      if (isNaN(timestamp)) throw (new Error('Type Error:A timestamp is not a Number'))
      if (`${timestamp}`.length !== 13) throw (new Error('Length Error:The timestamp length is incorrect'))

      let currentTime = new Date().getTime(); // 获取当前时间戳，可根据业务进行调整，比如距离某一特定时间多久
      let diffTime = currentTime - timestamp; // 获取时间差值
      let flag = diffTime < 0 ? '后' : '前'; // 根据差值判断传入时间是之后的还是以前的
      diffTime = Math.abs(diffTime) // 将时间差值处理成正数

      let minute = 60 * 1000;
      let hour = minute * 60;
      let day = hour * 24;
      let month = day * 30;

      // 获取距离的真正时间
      let ago = ''
      let minuteAgo = parseInt(diffTime / minute)
      let hourAgo = parseInt((diffTime % minute) / hour)
      let dayAgo = parseInt((diffTime % hour) / day)
      let monthAgo = parseInt((diffTime % day) / month)
      if (monthAgo > 11) {
        ago = `${parseInt(monthAgo/12)}年${flag}`
      } else if (monthAgo > 0) {
        ago = `${monthAgo}月${flag}`
      } else if (dayAgo > 0) {
        ago = `${dayAgo}天${flag}`
      } else if (hourAgo > 0) {
        ago = `${hourAgo}小时${flag}`
      } else if (minuteAgo > 0) {
        ago = `${minuteAgo}分钟${flag}`
      } else {
        ago = `刚刚`
      }
      return ago
    }

🟢. 获取当前年有多少天

function getDaysByYear(year) {
   let curYear = Number(year) || new Date().getFullYear()
   return curYear % 4 == 0 ? 366 : 365
}

🔵. 常用的也没有太多，感觉第一个基本上已经足够😂，后续业务遇到再补充吧

3️⃣. 轻量且使用方便的日期格式化库

这里我推荐的使用的是 day.js ，因为真的很好用。

        Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

优点：

                🕒和 Moment.js 相同的 API 和用法

                💪不可变数据 (Immutable)

                🔥支持链式操作 (Chainable)

                🌐国际化 I18n

                📦仅 2kb 大小的微型库

                👫全浏览器兼容

这里仅做基本功能代码展示，更详细的可自行去Day.js官网查看文档~

console.log("🎉", dayjs().year()); // 🎉 2023
console.log("🎉", dayjs().month() + 1); // 🎉 9
console.log("🎉", dayjs().date()); // 🎉 1
console.log("🎉", dayjs().hour()); // 🎉 14
console.log("🎉", dayjs().minute()); // 🎉 9
console.log("🎉", dayjs().second()); // 🎉 41
console.log("🎉", dayjs().format("YYYY-MM-DD HH:mm:ss")); // 🎉 2023-09-01 14:09:41

4️⃣. 写在最后

大家可以发挥想象力，将库二次封装使得更加符合自己项目的业务需求，不过我们项目对于时间格式的要求并木有那么复杂，我就不封装啦🤪，继续努力吧

如果您有任何问题、建议或反馈，欢迎在评论区留言📝，非常愿意听取您的声音。感谢您的阅读，期待与您在未来的博客分享中再次相会🥳！