如何使用Date-fns将HH:mm:ss时长转换为mm:ss分钟展示格式

原有代码报错原因 #

1. 直接向new Date()传入仅含时间的字符串00:25:00兼容性极差，绝大多数运行环境会返回Invalid Date，传入date-fns的format方法自然会抛出错误
2. 你需要处理的是时长而非固定时间点，直接用format方法无法自动把小时换算为总分钟数，满足不了01:xx:xx这类带小时的时长转换需求

实现代码 #

首先从date-fns引入对应工具方法：

import { parse, getHours, getMinutes, getSeconds } from 'date-fns'

封装转换函数：

// 入参为API返回的HH:mm:ss格式时长字符串
const formatDurationToMin = (hhmmssStr) => {
  // 按指定格式解析时长为合法Date对象，第三个基准日期参数不影响时分秒取值，随便传即可
  const parsedTime = parse(hhmmssStr, 'HH:mm:ss', new Date())
  // 计算总分钟数：小时换算为分钟 + 原有分钟数
  const totalMinutes = getHours(parsedTime) * 60 + getMinutes(parsedTime)
  // 秒数补前导零，保证两位展示
  const showSeconds = String(getSeconds(parsedTime)).padStart(2, '0')
  // 拼接返回目标格式
  return `${totalMinutes}:${showSeconds} min`
}

效果验证 #

• 输入00:25:00 → 输出25:00 min
• 输入01:05:30 → 输出65:30 min
• 输入02:30:09 → 输出150:09 min

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