[JavaScript] 시계 구현, 시계 두자리 숫자 표시하기 - padStart()

 

시계 구현해 보기

See the Pen Untitled by hy0ni (@hy0ni) on CodePen.

 

 

위 예제를 보면
Date 객체를 사용하여 호출했을 때의 시간이 0~9까지는 홀수로 보인다.
이 경우 1~9 앞에 0을 입력하여 두 자리 숫자로 표기 될 수 있도록 만들어 보았다.

 

String.prototype.padStart() 메서드 사용하여 두자리 숫자 표시하기

padStart() 메서드는
현재 문자열의 시작을 다른 문자열로 채워 주어진 길이에 만족하는 새로운 문자열을 반환한다.

채워 넣기는 대상 문자열의(좌측)부터 적용된다.

 

padStart(string이 가져야 하는 길이, string의 앞쪽에 채울 string)

"hello".padStart(20, "x"); // 'xxxxxxxxxxxxxxxhello'

 

 

See the Pen 시계구현02 by hy0ni (@hy0ni) on CodePen.

 

 

const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");

위 예제에서 보면,
String() 함수를 사용하여 숫자를 문자열로 변환한 뒤
padStart() 메서드를 사용한 걸 볼 수 있다.

👀 Date 객체는 number type이기 때문에 padStart() 메서드를 사용하기 위해서는 string type으로 변환해야 한다.

 

String(date.getHours()); //문자열로 변환

String(date.getHours()).padStart(2, "0");
// 문자열의 길이가 2글자가 되어야 하고, 그렇지 않다면 앞쪽에 "0"을 추가