[ JavaScript ] padStart 를 사용해 1초를 01초로 표시하는 방법

 

 

페이지에 현재 시간을 나타내기 위해

// 페이지에 현재 시간을 나타내는 코드

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

getClock();
setInterval(getClock, 1000);

 

위와 같은 코드를 작성했다.

위와 같은 코드를 작성하니 페이지에

 

20:54:12

20:54:13
20:54:14

.......

 

내가 원하는대로 현재 시간을 잘 보여주었다.

하지만 한 가지 고치고 싶은 점이 생겼는데

 

20:54:59

20:55:0

20:55:1

20:55:2

......

 

초 단위의 숫자가 59초에서 0초로 넘어갈때

두자리 형식으로 보여주는 것이 아닌,

한 자리의 숫자로 보여주는 것이 마음에 들지 않았다.

 

내가 원하는 형식은

 

20:55:00

20:55:01

....

 

이런 형식으로 보여주길 원했다.

if 문을 사용해 10 보다 작을 시 앞에 "0" 을 추가해야하나 생각했지만

padStart 라는 좋은 함수가 있었다.

 

// padStart 함수를 사용해 변경한 코드

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);

 

우선 date.getHours, Minutes, Seconds 를 통해 얻어온 시간을

String( ) 안에 감싸 number 를 string 으로 변경해준다.

 

그리고 0초 에서 00초로 변경하기 위해선 padStart( x, y ) 를 사용한다.

padStart 는 내가 가지고 있는 string 의 앞을 길게 만들어주고 싶을 때 사용한다.

( 뒤를 길게 만들어주고 싶다면 padEnd 를 사용한다. )

x 자리에는 원하는 length를,

y 자리에는 앞에 채워줄 내용을 입력한다.

 

나는 0초를 00초로 표기하기 위해,

String(date.getSeconds()).padStart(2, "0") 로 코드를 변경했다.

2는 총 길이, 즉 length 를 말하고

"0" 은 길이가 1자리일때 앞에 0을 추가해준다는 말이다.

 

코드를 변경한 결과 내가 원하던대로

 

20:56:00

20:56:01

20:56:02

.....

 

이런식으로 시간 표시가 잘 되는 것을 확인할 수 있었다.