padStart, padEnd

문자열앞/뒤에 패딩을 넣어주는것

시계를 만들어본다고 해보자

let hours = 12;
let minutes = 3;
let seconds = 2;

console.log(`${hours}h:${minutes}m:${seconds}s`);
//12h:3m:2s

라고 출력할것이다.

근데 별로 보기가 안좋으니, 시간이 10미만일때는 앞에 0을 붙이고 싶은거다.

예를 들면

12h:03m:02s 이런식으루..

그럴때는

console.log(${hours}h:${minutes < 10 ? `0${minutes}` : minutes}m:${seconds}s)

이렇게 써줄수있다

이 역할을 해주는게 바로 padStart이다.

예를들어 minutes.padStart(2,"0") 는 (여기서 padStart는 문자열에만 사용가능하다)

무조건 2자리수로 만들고, 2자리수가 아니라면 시작점에 0을 추가하라는 것이다.

그래서 저걸 콘솔에 찍으면 “03”으로 나올것이다 유후

다른 예시)

"5".padStart(5, "x") 은 “xxxxx5” 로 찍힌다

padEnd는 당연히 반대로 작동!

시계형식을 만들때 (니꼬가 좋아하는 조합은) "1".padStart(2,"0").padEnd(3,"s")

로 하게되면 “01s” 로 형식이 쓰이게 된다

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)