String.prototype.padStart()와 String.prototype.padEnd()를 활용한 시간 표시

시계나 타이머를 구현할 때 다음과 같이 표현할 일이 많다.

00시 00분 00초

// 10시 미만이면 앞에 0를 붙인다
const hours = hour > 10 ? "0" + hour : hour;
const mins = min > 10 ? "0" + min : min;
const secs = sec > 10 ? "0" + sec : sec;

console.log(`${hours}시 ${mins}분 ${secs}초`);

padStart()를 사용하면 다음과 같이 구현할 수 있다.

const hours = String(hour).padStart(2, "0");
const mins = String(min).padStart(2, "0");
const secs = String(sec).padStart(2, "0");

console.log(`${hours}시 ${mins}분 ${secs}초`);

padStart()는 첫 번째 인자로 길이를, 두 번째 인자로 대체할 문자를 받아서
문자열의 시작을 대체할 문자로 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다.

반대로, padEnd()는 두 번째 인자로 받은 문자열을 현재 문자열의 뒤에 이어서
첫 번째 인자로 주어진 길이를 만족하는 새로운 문자열을 반환한다.