[ES6+] str.(padStart/padEnd) - 문자열에 앞뒤로 지정된 길이만큼 특정 문자로 채우기

script에 새롭게 등장한 메서드인 String.prototype.padStart() 와 String.prototype.padEnd() 에 대해 배워보자.

이 두 메서드는 ES8(ES2017) 에서 나온걸로 당연하게도 IE에서는 지원을 안한다.

---

1. String.prototype.padStart()

- padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

- padStart() 라는 메서드명에서 알다시피 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다.

 

1-1. 구문과 기본사용법

▷ 구문

str.padStart(targetLength [, padString])

targetLength : 목표 문자열 길이이며, 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환한다.

padString : 현재 문자열에 채워넣을 다른 문자열이며, 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣는다. (기본값은 공백(" ") 이다.)

 

▷ 예제 1 ) String.prototype.padStart() 메서드 기본 사용법

const str1 = '5';
console.log(str1.padStart(2, '0'));
// expected output: "05"

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber);
// expected output: "************5581"

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

---

2. String.prototype.padEnd()

- padEnd() 메서드는 현재 문자열의 끝을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

- padEnd() 라는 메서드명에서 알다시피 채워넣기는 대상 문자열의 끝(우측)부터 적용된다.

 

2-1. 구문과 기본사용법

▷ 구문

str.padEnd(targetLength [, padString])

targetLength : 목표 문자열 길이이며, 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환한다.

padString : 현재 문자열에 채워넣을 다른 문자열이며, 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣는다. (기본값은 공백(" ") 이다.)

 

▷ 예제 1 ) String.prototype.padEnd() 메서드 기본 사용법

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padStart() - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

String.prototype.padEnd() - JavaScript | MDN