dayjs时间转换，模糊时间、精确时间

前言

1. 关于dayjs:
   https://dayjs.fenxianglu.cn/category/#typescript
2. 关于模糊时间、精确时间

---

---

模糊时间、精确时间

---

---

模糊时间需求：

时间区间	区间	时间显示格式	举例
< 1min	[0, 1m]	刚刚	Just Now
< 1hour	[1m, 1h)	N分钟前	16m ago
<= 6hour	[1h, 6h]	N小时前	6h ago
isToday		N小时前	23h ago
isYesterday		昨天HH:mm	Yesterday 12:12
isThisYear		MM/DD HH:mm	01/31 23:59
other		MM/DD/YYYY HH:mm	02/11/2022 00:00
注意: 按顺序满足条件

---

---

精确时间需求：

时间区间	区间	时间显示格式	举例
isToday		HH:mm	14:14
isYesterday		昨天HH:mm	Yesterday 12:12
isThisYear		MM/DD HH:mm	01/31 23:59
other		MM/DD/YYYY HH:mm	02/11/2022 00:00
注意: 按顺序满足条件

---

---

思维图：

---

---

代码实现

// 判断日期的状态
const checkAndGetDateState = (timestamp: number, currTimestamp: number) => {
  const year = window.dayjs(timestamp).year();
  const month = window.dayjs(timestamp).month();
  const date = window.dayjs(timestamp).date();

  const nowYear = window.dayjs(currTimestamp).year();
  const nowMonth = window.dayjs(currTimestamp).month();
  const nowDate = window.dayjs(currTimestamp).date();

  return {
    isToday: year === nowYear && month === nowMonth && date === nowDate,
    isYesterday: year === nowYear && month === nowMonth && date === nowDate - 1,
    isThisYear: year === nowYear,
  };
};

const getMoreYesterdayDate = (timestamp: number, currTimestamp: number, isZh: boolean = false) => {
  // 获取是否是今天、昨天、今年
  const { isYesterday, isThisYear } = checkAndGetDateState(timestamp, currTimestamp);

  if (isYesterday) {
    // 昨天
    return `${isZh ? '昨天' : 'Yesterday '}${window.dayjs(timestamp).format('HH:mm')}`;
  } else if (isThisYear) {
    // 今年
    return `${window.dayjs(timestamp).format('MM/DD HH:mm')}`;
  } else {
    // 往年
    return `${window.dayjs(timestamp).format('MM/DD/YYYY HH:mm')}`;
  }
};

// 精确时间转换
const preciseDateTimeTransfer = ({
  timestamp,
  currTimestamp,
  isZh = false,
}: {
  timestamp: number;
  currTimestamp: number;
  isZh?: boolean;
}) => {
  // 获取是否是今天、昨天、今年
  const { isToday } = checkAndGetDateState(timestamp, currTimestamp);

  if (isToday) {
    // 今天
    return window.dayjs(timestamp).format('HH:mm');
  } else {
    return getMoreYesterdayDate(timestamp, currTimestamp, isZh);
  }
};

const MILLISECONDS = 1000;
const SECONDS = 60;
const MINUTES = 60;
const SIX_HOURS = 6;
// 非精确时间转换
const inPreciseDateTimeTransfer = ({
  timestamp,
  currTimestamp,
  isZh = false,
}: {
  timestamp: number;
  currTimestamp: number;
  isZh?: boolean;
}) => {
  // 获取是否是今天、昨天、今年
  const { isToday } = checkAndGetDateState(timestamp, currTimestamp);
  // 60s内
  const isLessSixtySeconds = currTimestamp - timestamp < MILLISECONDS * SECONDS;
  // 60mins内
  const isLessSixtyMinutes = currTimestamp - timestamp < MILLISECONDS * SECONDS * MINUTES;
  // 6h内
  const isLessSixHours = currTimestamp - timestamp < MILLISECONDS * SECONDS * MINUTES * SIX_HOURS;

  if (isLessSixtySeconds) {
    // 60s内
    return isZh ? '刚刚' : 'Just now';
  } else if (isLessSixtyMinutes) {
    // 60mins内
    const mins = window.parseInt(`${(currTimestamp - timestamp) / MILLISECONDS / SECONDS}`);
    return `${mins}${isZh ? '分钟前' : 'm ago'}`;
  } else if (isLessSixHours || isToday) {
    // 6h内 or 今天
    const hours = window.parseInt(
      `${(currTimestamp - timestamp) / MILLISECONDS / SECONDS / MINUTES}`
    );
    return `${hours}${isZh ? '小时前' : 'h ago'}`;
  } else {
    return getMoreYesterdayDate(timestamp, currTimestamp, isZh);
  }
};

// 时间转换
export const dateTimeTransfer = ({
  timestamp,
  timestampDiff = 0,
  isZh = false,
  isPrecise = true,
}: {
  timestamp: number;
  timestampDiff?: number;
  isZh?: boolean;
  isPrecise?: boolean;
}) => {
  // 当前服务器时间戳
  const currTimestamp = new Date().getTime() + timestampDiff;

  if (isPrecise) {
    return preciseDateTimeTransfer({ timestamp, currTimestamp, isZh });
  }
  return inPreciseDateTimeTransfer({ timestamp, currTimestamp, isZh });
};