JavaScript中如何将ISO日期格式化为3rd of Jan 2019样式？

你需要输出的3rd of Jan 2019属于英文场景下的友好短日期格式，核心是带序数词后缀的日期 + 英文月份三字母缩写 + 四位年份，没有强制的官方规范称谓。下面给两种可直接落地的实现：

方案1：无第三方依赖 原生JS实现 #

不需要引入额外包，自己写工具函数即可，兼容性覆盖所有主流浏览器：

// 计算日期对应的序数词后缀
const getDayWithOrdinal = (day) => {
  // 11~20的日期统一加th
  if (day > 3 && day < 21) return `${day}th`
  const suffixMap = { 1: 'st', 2: 'nd', 3: 'rd' }
  return `${day}${suffixMap[day % 10] || 'th'}`
}

// 日期格式化主函数
const formatDate = (isoString) => {
  const date = new Date(isoString)
  if (Number.isNaN(date.getTime())) return ''
  const monthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  // 如果需要按UTC时区取值，把下面三个方法换成getUTCMonth/getUTCDate/getUTCFullYear
  const month = monthList[date.getMonth()]
  const dayStr = getDayWithOrdinal(date.getDate())
  const year = date.getFullYear()
  return `${dayStr} of ${month} ${year}`
}

React中直接封装成组件使用即可：

const FormattedDate = ({ isoDate }) => {
  return <span>{formatDate(isoDate)}</span>
}

// 调用示例：传入原始日期字符串即可输出目标格式
// <FormattedDate isoDate="2019-01-02T03:04:05" />

方案2：基于date-fns实现（项目已有日期处理库推荐） #

如果项目已经在使用date-fns（轻量、支持tree-shaking，是目前React生态最常用的日期工具库之一），不需要自己写序数词逻辑，直接用内置格式化能力即可：

import { format, parseISO } from 'date-fns'

const formatDate = (isoString) => {
  const date = parseISO(isoString)
  // 格式化占位符说明：do=带序数词的日期，MMM=英文月份三字母缩写，yyyy=四位年份
  return format(date, "do 'of' MMM yyyy")
}

注意事项 #

• 不建议用原生toLocaleDateString实现，不同浏览器、不同系统语言设置下输出结果不可控，没法稳定输出固定格式。
• 如果原始日期是UTC时间，记得把取值方法换成UTC对应API，避免时区偏差导致日期显示错误。

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