如何用date-fns或原生JS将时长转为Unix时间戳并比较时长

原生JavaScript实现 #

直接解析时长字符串，计算总毫秒数（对应Unix时间戳，与Moment.js的valueOf()结果一致）：

function parseDurationToTimestamp(durationStr) {
  const unitMap = {
    d: 86400000, // 1天的毫秒数
    h: 3600000,  // 1小时的毫秒数
    m: 60000,    // 1分钟的毫秒数
    s: 1000      // 1秒的毫秒数
  };
  let totalMs = 0;
  // 匹配所有数字+单位的组合
  const matches = durationStr.match(/(\d+)([dhms])/g) || [];
  
  matches.forEach(item => {
    const [, num, unit] = item.match(/(\d+)([dhms])/);
    totalMs += parseInt(num, 10) * unitMap[unit];
  });
  
  // 返回对应Unix时间戳（等同于从1970-01-01加上该时长后的时间戳）
  return totalMs;
}

// 测试示例
console.log(parseDurationToTimestamp('2h, 2m, 2s')); // 7322000
console.log(parseDurationToTimestamp('2d,2h,2m'));   // 173040000

date-fns实现 #

date-fns没有直接解析时长字符串的API，需要先提取各单位数值，再通过日期加减计算时间戳：

import { add } from 'date-fns';

function parseDurationToTimestamp(durationStr) {
  const durationObj = { days: 0, hours: 0, minutes: 0, seconds: 0 };
  const matches = durationStr.match(/(\d+)([dhms])/g) || [];
  
  matches.forEach(item => {
    const [, num, unit] = item.match(/(\d+)([dhms])/);
    const value = parseInt(num, 10);
    switch(unit) {
      case 'd': durationObj.days += value; break;
      case 'h': durationObj.hours += value; break;
      case 'm': durationObj.minutes += value; break;
      case 's': durationObj.seconds += value; break;
    }
  });
  
  // 从1970-01-01开始累加时长，获取时间戳
  return add(new Date(0), durationObj).getTime();
}

// 测试示例
console.log(parseDurationToTimestamp('2h, 2m, 2s')); // 7322000
console.log(parseDurationToTimestamp('2d,2h,2m'));   // 173040000

时长排序函数 #

基于上述转换后的时间戳，直接比较数值即可实现排序：

升序排序 #

function sortDurationsAsc(durations) {
  return durations.sort((a, b) => {
    return parseDurationToTimestamp(a) - parseDurationToTimestamp(b);
  });
}

降序排序 #

function sortDurationsDesc(durations) {
  return durations.sort((a, b) => {
    return parseDurationToTimestamp(b) - parseDurationToTimestamp(a);
  });
}

// 测试示例
const durations = ['1d', '2h, 30m', '3h, 10m, 5s'];
console.log(sortDurationsAsc(durations)); // ['2h, 30m', '3h, 10m, 5s', '1d']
console.log(sortDurationsDesc(durations)); // ['1d', '3h, 10m, 5s', '2h, 30m']

关于你之前date-fns parse失败的原因 #

parse()是date-fns用于解析日期字符串的API（如'2024-05-20 12:30'），无法直接解析时长格式。必须先拆分时长的数值与单位，再通过日期加减方法计算时间戳。

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