자바스크립트 문자열 길이 맞추기-시간 0:0 -> 00:00 으로 맞추고 싶다면

상황 😯

회원가입에서 이메일 인증을 할 때, 인증번호 유효 시간을 나타내는 타이머를 구현하고 있었다. 변수에 초를 가지고 있고, 이걸 00:00 형식으로 화면에 보여줘야 했다.
처음에는 (Math.floor(초 / 60) : String(초 % 60) 으로 보여줬다. 그랬더니 거의 잘 되는데, 분이나 초가 '0'일 때 '00' 이 아니라 '0'으로 표시해서 아쉬웠다.

이런 상황에서 자바스크립트의 문자열 길이를 맞추고 싶다면!!

코드 👩‍💻

{String(Math.floor(timer / 60)).padStart(2, '0')}:String(timer % 60).padStart(2, '0')}

설명 🦄

자바스크립트 padStart()를 사용하면 된다.
특정 길이를 만족하도록 특정 문자열을 채워넣는다.

대상 문자열.padStart(길이, 뭘로 채울건지) 형식으로 사용한다.
길이는 꼭 넣어야 하고, 뭘로 채울건지는 선택이다. 뭘로 채울건지를 안 넣으면 공백이 기본값이다.

위에 코드에서 String(Math.floor(timer / 60)).padStart(2, '0') 을 보자. 문자열이어야 해서 String()을 사용해서 number를 string으로 바꿔줬다. String(Math.floor(timer / 60)) 부분(문자열)의 길이가 2보다 작으면, 좌측부터 '0'으로 채워준다.

우측부터 채우고 싶다면 padEnd()를 사용하면 된다.

padStart mdn 문서

padEnd mdn 문서