React项目中如何用Moment.js或原生JS将mm:ss转为秒数？

原生JavaScript实现 #

无需依赖任何库，通过字符串拆分、数值转换和简单计算即可完成：

// 定义转换函数
const convertToSeconds = (durationStr) => {
  const [minutes, seconds] = durationStr.split(':').map(Number);
  return minutes * 60 + seconds;
};

// 处理目标数据数组
const data = [{
  duration: "00:10"
}, {
  duration: "20:00"
}, {
  duration: "30:00"
}];

const result = data.map(item => ({
  ...item,
  seconds: convertToSeconds(item.duration)
}));

console.log(result);
// 输出：[{duration: "00:10", seconds: 10}, {duration: "20:00", seconds: 1200}, {duration: "30:00", seconds: 1800}]

Moment.js实现 #

你之前的方法失效是因为moment.duration默认不会按mm:ss解析字符串，以下两种方式可以解决：

方法1：拆分后构造时长对象 #

import moment from 'moment';

const convertToSecondsWithMoment = (durationStr) => {
  const [minutes, seconds] = durationStr.split(':').map(Number);
  return moment.duration({ minutes, seconds }).asSeconds();
};

// 处理数据数组
const result = data.map(item => ({
  ...item,
  seconds: convertToSecondsWithMoment(item.duration)
}));

方法2：转换为ISO 8601格式后解析 #

import moment from 'moment';

const convertToSecondsWithMoment = (durationStr) => {
  const [minutes, seconds] = durationStr.split(':');
  // 转成Moment支持的ISO 8601时长格式
  const isoDuration = `PT${minutes}M${seconds}S`;
  return moment.duration(isoDuration).asSeconds();
};

两种Moment.js方案都能得到预期结果，推荐第一种拆分构造的方式，逻辑更直观。

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