[JavaScript] padStart로 문자 길이 맞추기

시계를 만드는 도중 10초 미만의 한자리 숫자일때는 1, 2, 3 ... 이렇게 나오는데,

모두 두자리로 01, 02, 03으로 맞추고 싶었다.

 

처음 생각해낸 방법은 if문을 이용해서 길이가 2미만일 경우 앞에 0을 붙이도록 하려고 했으나,

원하는 길이를 지정하고 그 길이에 부족한만큼 채울수 있는 메소드가 있지 않을까 해서 찾아봤다.

 

 

padStart를 사용하면 긴 if문을 사용하지 않아도 된다.

'2'.padStart(2, '0');
// '02'

2라는 문자에 padStart를 사용해서 길이를 2로 만들고 길이가 부족한 만큼 앞에서부터 0문자를 채우는 것이다.

 

반대로 padEnd를 사용하면 뒤에서부터 부족한 만큼 채워준다.

 

주의할 점은 문자만 가능하다는 점이다.

숫자를 사용할 경우 문자로 변환해서 사용해야 한다.

 

 

const clock = document.querySelector('h2#clock');

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);

String()으록 감싸서 숫자를 문자로 바꾼 후 padStart를 이용해 길이가 2가 아닌 경우 앞에 0을 추가해줬다.

 

 

시계 완성