React中如何将MongoDB存储的日期转换为自定义人类可读格式

方案1：使用第三方库简化操作（推荐） #

日常开发中最常用的轻量时间处理库是day.js，无需复杂的字符串解析逻辑，几行代码即可满足需求：

• 首先安装dayjs后引入：

import dayjs from 'dayjs'

• 格式化逻辑代码：

const formatCreatedTime = (isoTimeStr) => {
  const time = dayjs(isoTimeStr)
  // 判断是否为今天
  if (time.isSame(dayjs(), 'day')) {
    return time.format('[Today at] hh:mm A')
  }
  // 判断是否为昨天
  if (time.isSame(dayjs().subtract(1, 'day'), 'day')) {
    return time.format('[Yesterday at] hh:mm A')
  }
  // 更早时间
  return time.format('DD/MM/YYYY [at] hh:mm A')
}

// 调用示例
console.log(formatCreatedTime('2021-10-26T12:24:33.433+00:00'))

方案2：原生JavaScript实现（无需引入依赖） #

如果你不想引入第三方库，用原生Date实例完全可以实现，之前遇到的字符串转换问题是因为没有正确处理时区和日期的天级对比逻辑，实现代码如下：

// 辅助方法：获取指定日期当天零点的时间戳，避免时差影响对比
const getDayStartTimestamp = (date) => {
  const targetDate = new Date(date)
  targetDate.setHours(0, 0, 0, 0)
  return targetDate.getTime()
}

// 补零辅助方法
const padZero = (num) => num < 10 ? `0${num}` : num

const formatCreatedTime = (isoTimeStr) => {
  const targetDate = new Date(isoTimeStr)
  // 先校验时间是否合法
  if (isNaN(targetDate.getTime())) {
    return '无效时间'
  }

  const targetDayStart = getDayStartTimestamp(targetDate)
  const todayStart = getDayStartTimestamp(new Date())
  const oneDayMs = 86400 * 1000
  const yesterdayStart = getDayStartTimestamp(new Date(todayStart - oneDayMs))

  // 格式化时间部分（12小时制）
  const hours = targetDate.getHours()
  const minutes = padZero(targetDate.getMinutes())
  const period = hours >= 12 ? 'PM' : 'AM'
  const showHours = padZero(hours % 12 || 12)
  const timePart = `${showHours}:${minutes} ${period}`

  // 按规则返回结果
  if (targetDayStart === todayStart) {
    return `Today at ${timePart}`
  }
  if (targetDayStart === yesterdayStart) {
    return `Yesterday at ${timePart}`
  }
  const day = padZero(targetDate.getDate())
  const month = padZero(targetDate.getMonth() + 1)
  const year = targetDate.getFullYear()
  return `${day}/${month}/${year} at ${timePart}`
}

注意：如果需要展示 UTC 时间而非用户本地时间，把代码中getHours/getDate等本地时间方法替换为getUTCHours/getUTCDate等UTC方法即可。

内容的提问来源于stack exchange，提问作者Caio Gomes