如何将字符串小时转换为 'hh:mm:ss' 格式？答案

【问题标题】：How to convert string hours to 'hh:mm:ss' format?如何将字符串小时转换为 'hh:mm:ss' 格式？
【发布时间】：2019-10-11 09:23:53
【问题描述】：

我的 google api 响应持续时间为 1 小时 13 分钟，我需要将其转换为 'hh:mm:ss' 格式。如何在 React js 中转换它？回复：

distance: {text: "47.8 km", value: 47790}
duration:
text: "1 hour 13 mins"
value: 4378
__proto__: Object
status: "OK"

【问题讨论】：

这应该让你开始:: duration.split(/[^\d]/).filter(x=>x!=="").map(n=>('0'+n).slice(-2))
JavaScript seconds to time string with format hh:mm:ss的可能重复
1 小时 13 分钟，是持续时间而不是时间。那么为什么要尝试将其转换为 hh:mm:ss 呢？令人惊讶吗？
只是添加到@HMR评论，让timeArr = "1小时13分钟".split(/[^\d]/).filter(x=>x!=="").map (n=>('0'+n).slice(-2)).join(':');链式 join(':') 函数将为您提供 1:13: 输出。然而，测试用例处理的范围很大。所以我更喜欢将它与momenjs结合使用作为console.log(moment(timeArr, "h:mm").format("HH:mm:ss"));
@VipulPatil 所以"1 hour 13 mins".split(/[^\d]/).filter(x=>x!=="").map(n=>('0'+n).slice(-2)).join(':'); 给你1:13？我想知道您运行该代码的浏览器是什么。

标签： javascript reactjs google-maps

【解决方案1】：

似乎提供的值：44790 和 4378，是米和秒。既然您将秒数作为数字，您可以做各种事情来获得您想要的格式。有很多 javascript sn-ps 可以为您做到这一点：

function convertHMS(value) {
    const sec = parseInt(value, 10); // convert value to number if it's string
    let hours   = Math.floor(sec / 3600); // get hours
    let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
    let seconds = sec - (hours * 3600) - (minutes * 60); //  get seconds
    // add 0 if value < 10
    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
}

const yourTime = convertHMS(4378); // 4378 seconds
// yourTime is 01:12:58
console.log(yourTime);

如果您有基本的/初级 Javascript 知识，那么此脚本中唯一有趣的事情是 Math.floor() 和 parseInt()。

感谢：https://www.4codev.com/javascript/convert-seconds-to-time-value-hours-minutes-seconds-idpx6943853585885165320.html 在这种情况下，你可以在任何地方找到这大约 10 行，但我在搜索几秒钟后在这里找到了它们。

总是先尝试在纯 JS 中解决您的问题，然后再添加某种为您工作的库，因为您不想为可以在大约 10 行纯 JS 中完成的事情添加一个完整的库.当然，纯 JS 在 React 中也能很好地工作 =)。

如果您需要支持 IE6 - IE10，您可能希望将 const 和 let 替换为 var（尽管从业务角度来看，我不鼓励支持这些浏览器）。

编辑：我对在这里回答问题还很陌生，所以我将代码转换为代码 sn-p。

【讨论】：

【解决方案2】：

很好的解决方案，Sapulidi。我使用您的代码稍作修改。发给有兴趣的人。

在打字稿中
只有 >0 小时时才会显示小时数

const millisecondsToHHMMSS = (duration: number) => {
  const sec = Math.round(duration / 1000);
  const hours = Math.floor(sec / 3600); // get hours
  const minutes = Math.floor((sec - hours * 3600) / 60); // get minutes
  const seconds = sec - hours * 3600 - minutes * 60; //  get seconds
  // add 0 if value < 10
  let sHours = hours > 0 ? `${hours}:` : '';
  let sMinutes = `${minutes}`;
  let sSeconds = `${seconds}`;

  if (minutes < 10) {
    sMinutes = '0' + sMinutes;
  }
  if (seconds < 10) {
    sSeconds = '0' + sSeconds;
  }
  return sHours + sMinutes + ':' + sSeconds;
  // Return is HH:MM:SS
};

let timeWithHours = 12345
let formattedWithHours = millisecondsToHHMMSS(timeWithHours)

let timeWithoutHours = 12345678
let formattedWithoutHours = millisecondsToHHMMSS(timeWithoutHours)

console.log(formattedWithHours)
console.log(formattedWithoutHours)

【讨论】：

【解决方案3】：

它与 React 无关。你可以简单地使用moment.js

moment(distance.value).format('hh:mm:ss');

【讨论】：

【解决方案4】：

您可以使用日期格式库之一（例如momentjs 或date-fns），也可以自己计算。你得到的是以秒为单位的持续时间（它似乎是4378 seconds），所以你自己计算它不会很费力。

这是一个例子：

const values = getHoursMinutesAndSeconds(4378);
console.log(values);
console.log(`${zeroPadding(values.hours, 2)}:${zeroPadding(values.minutes, 2)}:${zeroPadding(values.seconds, 2)}`);

function getHoursMinutesAndSeconds (totalSeconds) {
  // step 1: create seconds and hoursAndMinutes (minutes, but might be larger than 60)
  const hoursAndMinutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  // step 2: create minutes and hours from hoursAndMinutes
  const hours = Math.floor(hoursAndMinutes / 60);
  const minutes = hoursAndMinutes % 60;

  return { hours, minutes, seconds };
}

function zeroPadding (number, length) {
  return String(number).padStart(length, '0');
}

【讨论】：