moment.js에서 초를 HH : mm : ss로 변환하는 방법


94

초를 HH:mm:ss어떻게 변환 할 수 있습니까?

현재 아래 기능을 사용하고 있습니다

render: function (data){
     return new Date(data*1000).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");;
}

이것은 크롬에서 작동하지만 파이어 폭스에서 12 초 동안 01:00:12 크로스 브라우저 호환성을 위해 moment.js를 사용하고 싶습니다.

나는 이것을 시도했지만 작동하지 않습니다

render: function (data){
         return moment(data).format('HH:mm:ss');
}

내가 도대체 ​​뭘 잘못하고있는 겁니까?

편집하다

나는 다음과 같은 moment.js 없이 해결책 찾았습니다.

return (new Date(data * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];

moment.js에서 어떻게 할 수 있는지 여전히 궁금합니다.



@mplungjan 내가 이미 그 게시물을 읽었다 고 언급하지 않은 것에 대해 죄송합니다. 수백만 개의 행이있는 테이블을 렌더링해야하는데 솔루션이 너무 느립니다. 두 번째 대답은 내 질문에 쓴 정확히하지만 파이어 폭스 나에게 문제를 제공합니다
QGA

2
@QuentinTanioartino 그래서 4 개의 사소한 수학 연산자는 수백만 개의 요소에 대해 DOM을 변경하는 작업에 문제가 있습니까? 성능 문제를 올바르게 이해하고 있습니까?
zerkms

@zerkms 이미 변환 된 데이터를 제공하려면 DAO 클래스를 다시 작성해야한다는 것을 잘 알고 있습니다. 이것은 내가 알고있는 문제입니다. 첫 번째 시도의 현재 성능에 매우 만족하지만 시스템을 약간 느리게하는 변환에 대해 5 개의 수학 연산이있을 때라고 말했습니다. 그래, 난이 그냥 빨리 임시 해결책이 당신과 동의
QGA

@QuentinTanioartino "시스템을 약간 느리게하는"--- "조금"은 성능에 대해 추론하는 방식이 아닙니다. 그것은인가 병목? 병목 현상 이 입증 되었습니까? 그렇지 않다면-이 작업을 최적화하는 이유는 무엇입니까?
zerkms

답변:


80

에서 이 게시물에 나는 도약 문제를 방지하려면이 옵션을 시도 할 것

moment("2015-01-01").startOf('day')
    .seconds(s)
    .format('H:mm:ss');

jsPerf를 실행하지 않았지만 새 날짜 개체를 백만 번 만드는 것보다 빠르다고 생각합니다.

function pad(num) {
    return ("0"+num).slice(-2);
}
function hhmmss(secs) {
  var minutes = Math.floor(secs / 60);
  secs = secs%60;
  var hours = Math.floor(minutes/60)
  minutes = minutes%60;
  return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
  // return pad(hours)+":"+pad(minutes)+":"+pad(secs); for old browsers
}


2
고마워, 아주 똑똑한 솔루션
QGA

1
두 번째는, 그것은 매우 빠른
QGA

1
두 번째 예에서이를 수행 할 수 있습니다. return [시간, 분, 초] .filter (t => t) .map (pad) .join ( ":")
Onno Faber

@OnnoFaber 가장 빠른 것이 무엇이라고 생각하십니까? 연결 또는 필터와 맵? 우리도 할 수 있습니다`${pad(hours)}:${pad(minutes)}:${pad(secs)}`
mplungjan

이전의 모든 답변에서 가장 간단한 것은 mplungjan 이지만 값이 밀리 초 (예 : 17.3 s) 인 경우 난수를 표시하는 오류가 있습니다. 그의 코드를 기반으로 다음을 제안합니다. function pad (num) {return ( "0"+ num) .slice (-2); } / ** * @return {string} * / 기본 함수 내보내기 renderUserTime (초) {let minutes = Math.floor (seconds / 60); const outputSecs = Math.round (초 % 60); let hours = Math.floor (분 / 60); const outputMinutes = Math.round (분 % 60); return`$ {pad (hours)} : $ {pad (outputMi
Alberto Soto

98

이것은 다른 게시물에서 참조한 mplungjan 답변과 유사하지만 더 간결합니다.

const secs = 456;

const formatted = moment.utc(secs*1000).format('HH:mm:ss');

document.write(formatted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

예를 들어 초가 1 일 (86400)을 초과하면 예상 한 것을 얻지 못합니다.


1
고맙습니다. 이것이 매우 일반적인 필요라고 생각합니다. moment.js에 풀 리퀘스트를 열어 통합해야합니다.
모리스 S

감사합니다 @Sophie. 제 경우에 정확히 필요한 utc ()를 언급하는 곳은 거의 없습니다.
pmont

25

moment-duration-format 플러그인을 사용할 수 있습니다 .

var seconds = 3820;
var duration = moment.duration(seconds, 'seconds');
var formatted = duration.format("hh:mm:ss");
console.log(formatted); // 01:03:40
<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

피들 참조

업데이트 : 60 초 미만의 값에 대한 트리밍을 방지하려면 다음을 사용하십시오 { trim: false }.

var formatted = duration.format("hh:mm:ss", { trim: false }); // "00:00:05"

귀하의 답변과 @sophie의 답변으로 살펴 봐야 할 절충안이 있습니다. 기술적으로 솔루션은 "시간"기간을 hh : mm : ss로 표시하지만 추가 플러그인이 필요합니다. Sophie 's는 현재 시점에서 hh : mm : ss 형식의 "날짜"입니다. Sophie 's에서 "utc"를 제거하면 현재 시점이 아닌 epoch를 날짜로 사용하므로 잘못된 정보를 반환 할 수 있습니다. 두 답변 모두 작동합니다. 생각하고 이해할 수있는 것입니다.
Michael

여기에서 CDN을 사용하고 지연 시간을 증가시킬 수있는 것은 아니지만 "다른 라이브러리 포함"을 부정적인 절충안과 직접 ​​코드를 구현하는 것으로 생각하는 것은 일반적으로 위험합니다. 이것은 많은 개발자가 빠지고 궁극적으로 유지 관리가 덜한 코드로 끝나는 함정입니다.
cytinus

어떤 이유로 초 <60이면 형식화되지 않은 상태가됩니다.
Daniel Lizik

@DanielLizik, {trim : false}를 추가하세요. 예 : duration.format ( "hh : mm : ss", {trim : false});
Oleksiy Kachynskyy

16
var seconds = 2000 ; // or "2000"
seconds = parseInt(seconds) //because moment js dont know to handle number in string format
var format =  Math.floor(moment.duration(seconds,'seconds').asHours()) + ':' + moment.duration(seconds,'seconds').minutes() + ':' + moment.duration(seconds,'seconds').seconds();

1

moment.js 기간을 올바르게 사용하는 방법은 무엇입니까? | 코드에서 moment.duration () 사용

먼저 momentmoment-duration-format.

import moment from 'moment';
import 'moment-duration-format';

그런 다음 기간 기능을 사용하십시오. 위의 예를 적용 해 보겠습니다 : 28800 = 오전 8시.

moment.duration(28800, "seconds").format("h:mm a");

🎉 음, 위의 유형 오류가 없습니다. 🤔 오전 8시에 올바른 가치를 얻었습니까? 아니…, 당신이 얻는 가치는 오전 8시입니다. Moment.js 형식이 예상대로 작동하지 않습니다.

💡 해결책은 초를 밀리 초로 변환하고 UTC 시간을 사용하는 것입니다.

moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a')

이제 오전 8 시가됩니다. 적분 시간으로 오전 8시 대신 오전 8시를 원하면 RegExp를 수행해야합니다.

const time = moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a');
time.replace(/:00/g, '')

1

24 시간까지 Duration.format더 이상 사용되지 않는 것처럼 moment@2.23.0으로

const seconds = 123;
moment.utc(moment.duration(seconds,'seconds').as('milliseconds')).format('HH:mm:ss');

1

초 (숫자)를 문자열 형식 (예 : 'mm : ss')으로 변경하는 내 솔루션 :

const formattedSeconds = moment().startOf('day').seconds(S).format('mm:ss');

예에서 'S' 대신 초를 작성 하십시오 . 그리고 필요한 곳에 'formattedSeconds'를 사용하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.