[JS]2021-1114 padStart() - 문자열 시작 채우기(문자열을 채워 원하는 길이로 만들기)/ String() - 숫자를 문자열로 바꾸기

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다.

13시 05분 대신 13시 5분으로 표시되어 어딘가 이상하다

padStart()

"1".padStart(4,"0");
// "0001"을 출력

String에서만 사용 가능한 함수로, 특정 문자열을 원하는 길이만큼, 원하는 문자열로 채울 수 있다.

사용 방법은 padStart(원하는 길이, 채우고자 하는 문자열)

자매품으로 padEnd()도 있다.

String(number) 

number를 string으로 변환할 수 있다.

string(556);
//"556" 을 출력

Date 객체의 현재시간들은 number이기 때문에 padStart() 적용을 위해서 string 으로 변환해야한다.

그리고 .padStart를 적용해 자릿수가 2 미만일 경우 앞에 "0"을 붙여 출력하도록 한다.

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

Output