[JavaScript] PadStart

1. padstart

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

function getClock() {
	const date = new Date();
	clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock();
setInterval(getClock, 1000);

이 전 글에서도 알다시피 시계의 초가 59초에서 00초로 넘어갈 때 위의 코드는 00초가 아닌 한 자리 수(0초)가 되는데 지금부터는 string을 문자 두 개로 채우는 것을 해볼 것이다.

padStart라는 function으로 이미 만들어져 있다. string에 쓸 수 있는 function이다.

"1".padStart(2, "0");

"01"

위의 코드는 "1"이라는 string이 있고, padStart를 사용해 string의 길이를 2로 만들 것인데 만약 string의 길이가 2가 아니라면 앞 쪽에 "0"을 추가해줘 라는 의미이다.

"12".padStart(2, "0");

"12"

위의 코드는 이미 길이가 2이기 때문에 아무런 변화 없이 12가 출력된다.

"1".padEnd(2, "0");

"10"

padEnd는 뒤에 추가 해주는 것이다.

그렇다면 우리가 만들던 시계를 수정해보자.

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}`;
}

코드에서 getHours는 숫자이다. 하지만 padStart는 string에서 사용하는 것이기 때문에 String(new Date().getHours())처럼 숫자를 string으로 변환해주어야 한다.