React Native中如何拆分日期、时间、星期并带标题渲染？

问题现状 #

• 接口返回UTC标准格式时间字符串：
  
• 当前使用原生Date方法拼接日期，输出数字月/日/年、24小时制时间，未做格式优化：
  
  当前实现代码：

let d = new Date(item.starts_on);
let date = `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
let time = `${d.getHours()}:${d.getMinutes()}`;

• 目标输出格式为英文月份缩写+带序数后缀的日期+四位年份，搭配12小时制带AM/PM的时间：
  

具体实现 #

核心调整点 #

• 月份替换为英文3位缩写，不再输出数字
• 日期数字后增加st/nd/rd/th序数后缀
• 时间从24小时制转为12小时制，增加AM/PM标识，分钟数不足2位时补前导零
• 按需选择时区：如果业务要求展示接口返回的UTC标准时间，把所有getXxx方法替换为getUTCXxx即可，避免不同时区用户看到的时间不一致；如果需要展示用户本地时区时间，直接用默认getXxx方法即可。

完整代码 #

// 日期序数后缀生成工具
const getOrdinalSuffix = (day) => {
  const suffixList = ['th', 'st', 'nd', 'rd'];
  const remainder = day % 100;
  return suffixList[(remainder - 20) % 10] || suffixList[remainder] || suffixList[0];
};
// 英文月份缩写映射
const monthAbbrList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

/**
 * 格式化接口返回的时间
 * @param {string} dateStr 接口返回的时间字符串
 * @param {boolean} useUtc 是否使用UTC时区输出，默认false使用本地时区
 */
const formatDateTime = (dateStr, useUtc = false) => {
  const d = new Date(dateStr);
  // 按时区配置选择取值方法
  const getMonth = useUtc ? d.getUTCMonth.bind(d) : d.getMonth.bind(d);
  const getDate = useUtc ? d.getUTCDate.bind(d) : d.getDate.bind(d);
  const getFullYear = useUtc ? d.getUTCFullYear.bind(d) : d.getFullYear.bind(d);
  const getHours = useUtc ? d.getUTCHours.bind(d) : d.getHours.bind(d);
  const getMinutes = useUtc ? d.getUTCMinutes.bind(d) : d.getMinutes.bind(d);

  // 拼接日期部分
  const month = monthAbbrList[getMonth()];
  const day = getDate();
  const year = getFullYear();
  const dateStrFormatted = `${month} ${day}${getOrdinalSuffix(day)}, ${year}`;

  // 拼接时间部分
  let hours = getHours();
  const minutes = getMinutes();
  const period = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12 || 12; // 0点转换为12
  const minutesPadded = minutes.toString().padStart(2, '0');
  const timeStrFormatted = `${hours}:${minutesPadded} ${period}`;

  return {
    date: dateStrFormatted,
    time: timeStrFormatted
  };
};

// 业务调用示例
const { date, time } = formatDateTime(item.starts_on, true); // 第二个参数传true则输出UTC时间，和接口返回值完全一致

原生API简化方案 #

如果不想手动维护月份映射，可以直接用浏览器原生的Intl.DateTimeFormatAPI实现，代码更简洁：

const formatDateTimeNative = (dateStr, useUtc = false) => {
  const d = new Date(dateStr);
  const timezoneConfig = useUtc ? { timeZone: 'UTC' } : {};

  // 格式化日期
  let datePart = new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    ...timezoneConfig
  }).format(d);
  // 给日期加序数后缀
  datePart = datePart.replace(/(\d+),/, (_, dayNum) => `${dayNum}${getOrdinalSuffix(+dayNum)},`);

  // 格式化时间
  const timePart = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
    ...timezoneConfig
  }).format(d);

  return { date: datePart, time: timePart };
};

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