[Javascript] padStart()와 padEnd()란?

 

 

padStart()와 padEnd() 는 Javascript의 문자열(String) 메서드로, 문자열의 길이를 지정된 길이만큼 특정한 문자로 맞출 때 사용된다. 이 메서드를 사용하게 된 배경은 타이머 시간 값을 응답 값으로 줄 때 시간을 MM:SS 형태로 바꿔 주는데, 이 때 공백 없이 한 자리수의 경우는 '05'와 같이 표현하기 위해 사용하였다. 

 

 

◾padStart()

padStart()는 문자열의 앞쪽에 문자를 추가하여 지정된 길이로 만든다. 

 

✔️padStart(targetLength, padString)

`targetLength`: 목표 문자열 길이

`padString(옵션값)`: 채울 문자열 (기본값: ' ' 공백) 

 

직접 사용을 해보자. 7이라는 문자열이 있을 때 이것을 3자리 수로 맞추고 공백을 0으로 채우고 싶다면 아래처럼 값을 넣어주면 된다. 숫자로 된 문자열의 경우는 0으로 채워야하는 경우가 종종 있다. 

const stringValue = '7';
stringValue.padStart(3,'0'); //007

 

`Start`가 들어가는 경우는 실제 값은 맨 오른쪽에 존재하고, 왼쪽부터 패딩값(padding)이 들어가는 것을 알 수 있다. 

 

만일 옵션값으로 `padString`을 넣지 않는 경우는 어떻게 될까? 결과를 보면 공백으로 2칸을 채우고 3번째에 7이 들어가는 것을 확인할 수 있다. 

 

const stringValue = '7';
stringValue.padStart(3); //  7

 

다른 값도 가능하다.

const stringValue = '7';
stringValue.padStart(3,'-'); //--7

 

 

◾padEnd()

✔️ padEnd(targetLength, padString)

padEnd()의 경우는 반대로, 문자열의 값이 왼쪽을 먼저 채우고 나머지를 패딩값으로 채운다. padString() 와 같은 값을 넣었을 때 어떻게 다른지 살펴보자.

const stringValue = '7';
stringValue.padEnd(3,'0'); //700

 

 

잘 사용할 일은 없겠지만 기본값으로 설정하고 값을 앞부터 채우고 싶다면 아래처럼 사용할 수 있다.

const stringValue = '7';
stringValue.padEnd(3); //7

 

마우스로 드래그 해보면 7뒤에 공백이 2칸 존재하는 것을 알 수 있다. 

 

const stringValue = '7';
stringValue.padStart(3,'-'); //7--