[JavaScript] 자바스크립트 문자열 채우기 (padStart, padEnd)

가끔 자릿수가 지정되어 있어 남는 자릿수를 특정 문자로 채워야 할 때가 있습니다. 자바스크립트에서는 이럴 때 padStart, padEnd 함수를 사용해 주시면 특정 문자열을 원하는 길이까지 채워줍니다. 이번 포스팅에서 그 방법을 알아보겠습니다.

 

시작 부분 채우기 (padStart)

//사용법
문자열.padStart(총 문자열 길이, 채우고자 하는 문자열)

• 총 문자열 길이 : 필수값으로 채우고자 하는 문자열의 길이를 뜻하며 만약 이 길이가 현재 문자열의 길이보다 작다면, 원본 문자열이 반환됩니다.
• 채우고자 하는 문자열 : 선택값으로 채우고자 하는 문자열을 뜻하며, 기본값은 " "(공백)입니다.

 

See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

위의 예제에서는 padStart(8, "0")을 입력하여 8 자릿수의 길이를 고정하고 모자라는 길이를 문자열 앞에 "0"을 채워주었습니다. 이렇게 고정 길이의 번호를 생성해야 하는 포맷팅 관련 작업에서 padStart가 유용하게 사용될 수 있습니다.

 

끝 부분 채우기 (padEnd)

//사용법
문자열.padEnd(총 문자열 길이, 채우고자 하는 문자열)

• 총 문자열 길이 : 필수값으로 채우고자 하는 문자열의 길이를 뜻하며 만약 이 길이가 현재 문자열의 길이보다 작다면, 원본 문자열이 반환됩니다.
• 채우고자 하는 문자열 : 선택값으로 채우고자 하는 문자열을 뜻하며, 기본값은 " "(공백)입니다.

 

See the Pen padEnd by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

padEnd도 padStart 메서드와 문자열 "뒷 부분"에 추가된다는 점만 다를 뿐 사용법은 동일합니다.

 

 

이렇게 padStart와 padEnd 메서드를 사용하시면 문자열의 길이를 동일하게 맞춰, 데이터를 일관되게 출력하게 합니다. 이렇게 하면 깔끔하고 가독성이 높은 데이터들을 만들 수 있겠습니다.