PadStart

지금부터는 아래의 두 사진처럼, 3:52:6 이 3:52:06 으로 표시되도록 숫자의 자릿수를 맞춰보도록 하자(즉 string을 문자 두 개로 채우는 작업임)

이를 다르게 얘기해보면, string이 항상 최소 2개의 문자를 가지고 있어야 한다는 것이다.

만약 숫자가 1이라면 01로 바꿔주고 21이라면 그대로 표시하게 만들어야 하는데, 이건 padStart() 라는 function으로 이미 만들어져 있다.

padStart()는 string에 쓸 수 있는 function이고 다음과 같이 사용할 수 있다.

 

"1"이라는 string의 길이를 2로 만드는데, 만약 그 string의 길이가 2가 아니라면 앞쪽에 "0"을 추가하도록 한다.

이는 길이가 1인 문자를 길이가 2가 되도록 padStart()라는 function을 사용하여, string의 시작 부분에 padding을 추가해주는 것이다.

 

만약 이미 길이가 2인 수로 padStart()를 사용하면, 이미 string의 길이가 2이기 때문에 함수가 동작하지 않아서 아무 변화도 일어나지 않는다.

12가 그대로 출력

 

padEnd()도 똑같이 사용하면 되는데, 이건 뒤쪽에 문자를 추가하는 것이다.

padEnd() 사용

padStart()와 padEnd()는 이렇게도 활용할 수 있기 때문에 아주 유용하다.

 

이제 이것을 활용하여 JS를 수정해 볼건데, 먼저 한 번에 출력하던 시간 정보들을 하나씩 분리했다.

한 번에 출력하던 코드

하나씩 분리해줌

그리고 padStart()를 사용하여 string이 2자리로 출력되게 하면 된다.

하지만 getHours는 숫자이기 때문에(Int형) padStart()를 바로 그냥 사용할 수 없다.

그렇다면 숫자를 문자로 바꿔줘야 하는데(Int -> String), 이는 String() 함수를 사용하면 된다.

String() 함수를 사용해 문자로 변환

 

이제 JS의 코드도 String()으로 변환하여 padStart()를 사용하고, 만들어둔 변수를 사용하여 전보다 더 간단하게 innerText를 사용할 수 있다.

새로고침 후 페이지를 실행해보면 1이 01로 표시되는 것을 확인할 수 있다.

1 -> 01 바뀌어 표시됨