[TIL] JavaScript | padStart(), padEnd() | 문자열을 다른 문자열로 채우기

padStart()

String.prototype.padStart() 메서드는 현재 문자열 String.prototype의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 첫 번째 인자는 주어진 길이, 두 번째 인자는 채울 문자열이다. 채워넣기는 대상 문자열의 왼쪽부터 적용된다.

const word = 'Tissue';
const newWord = word.padStart(10, 'C');  // 새로운 문자열을 반환하므로 -
console.log(word);  // "Tissue" - 원본은 유지된다
console.log(newWord);  // "CCCCTissue"

 

두 번째 인자의 문자열의 길이가 2 이상일 때엔, 패턴처럼 반복되다가 첫 번째 인자로 주어진 정수와 일치하는 길이가 되면 채우기를 중단된다.

const word = 'Coffee';
console.log(word.padStart(16, 'TVV')); // "TVVTVVTVVTCoffee"

 

두 번째 인자에 아무것도 넣지 않았을 때 첫 번째 인자가 문자열 길이보다 크면 빈 칸을 채워넣는다. 반면, 첫 번째 인자가 문자열 길이보다 작으면 문자열을 그대로 반환한다.

 

"Ocean".padStart(10); // "     Ocean"
"Ocean".padStart(0); // "Ocean"
"Ocean".padStart(-1); // "Ocean"

 

 

padEnd()

위의 padStart()에서 문자열을 채우는 방향이 시작이 아닌 문자열의 끝에서부터 진행된다는 점만 다르다.

const word = 'Tissue';
const newWord = word.padStart(10, 'C');
console.log(word);  // "Tissue"
console.log(newWord);  // "TissueCCCC"
---
const word = 'Coffee';
console.log(word.padEnd(16, 'TVVV')); 
// "CoffeeTVVVTVVVTV" -> "CoffeeVTVVVTVVVT"가 아님에 유의
---
"Ocean".padEnd(10); // "Ocean     "
"Ocean".padEnd(0); // "Ocean"

 

 

참고 링크

String.prototype.padStart() - JavaScript | MDN

String.prototype.padEnd() - JavaScript | MDN