[자바스크립트 / Vanilla JS] padStart()와 padEnd()에 대해서

❗ padStart()란 ?

특정 길이에 도달할 때까지 문자열 시작 부분에 패딩을 추가하는 데 사용할 수 있는 내장 JavaScript 메서드이다.

padStart()에는 두 개의 인수가 있다.

첫 번째는 결과 문자열의 원하는 길이이고 두 번째는 padding 값에 사용할 문자이다(기본값은 공백).

원래 문자열의 길이가 지정된 길이보다 크거나 같으면 padding이 추가되지 않는다.

 

const str = 'hello';
const paddedStr = str.padStart(10, ' ');

console.log(paddedStr); // "     hello"

이 예에서 padStart()는 문자열 'hello'의 시작 부분에 5개의 공백을 추가하는 데 사용되어 길이가 10자인 새 문자열이 생성된다

원래 문자열은 padStart()에 의해 수정되지 않는다. 대신 padding이 추가된 새 문자열이 반환된다.

❗ 예시

const str = 'hello';
const paddedStr = str.padStart(10, 'ㅁ');

console.log(paddedStr); // "ㅁㅁㅁㅁㅁhello"

두 번째 인수에 원하는 문자열을 입력한다면 해당 결과가 출력된다.

---

❗ padEnd()란 ?

padEnd는 padStart와 반대로 지정된 길이에 도달할 때까지 오른쪽(끝)에 특정 문자 또는 다른 문자열로 문자열을 채울 수 있는 JavaScript의 내장 함수이다. 인수는 padStart와 동일하다.

 

❗ 예시

const str = 'hello';
const paddedStr = str.padEnd(10, '!');
console.log(paddedStr); // "hello!!!!!"

padStart를 이해했다면 해당 예시를 보면 바로 이해가 될 것이라고 생각한다 !