Front-end/JS tip

문자열 앞/뒤에 원하는 문자 채우기 padStart, padEnd

아지송아지 2022. 2. 12. 11:30

오늘은 padStart와 padEnd에 대해 알아보겠습니다.

 

날짜를 계산할 때 앞에 0을 붙여야 하거나, 일부 암호화를 해야할 때가 있습니다.

조건문이나 반복문으로 해결할 수도 있지만 오늘은 그 작업을 편리하게 해보겠습니다.

 

 

 

String.prototype.padStart()


MDN에 예제가 잘나와있어서 가져왔습니다.

// 앞에 0 넣기
const str1 = '5';
console.log(str1.padStart(2, '0')); // -> "05"
console.log(str1.padStart(2)); // -> " 5"

// 앞에 * 넣기
const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
console.log(last4Digits); // -> "5581"
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber); // -> "************5581"

 

사용방법은 아래와 같습니다.

두 번째 인자가 생략될 경우 앞쪽에 공백으로 채워집니다.

적용할문자열.(채울길이, 채울문자)

 

 

String.prototype.padEnd()

padStart가 앞부분을 채웠다면 padEnd는 뒤를 채웁니다.

사용방법은 padStart와 동일하며 두 번째 인자를 생략하면 공백으로 채워집니다.

const str1 = '12345';

console.log(str1.padEnd(10, '.')); // -> "12345....."
console.log(str1.padEnd(10)); // -> ""12345     "

 

 

 

참고 :

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

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