[javascript] 자바스크립트 문자열에 0으로 자리수 채우는 방법 (padding)

참고: https://www.samanthaming.com/tidbits/97-string-padstart-padend/

문자열에 자릿수를 맞춰 특정 문자를 채우기는 매우 쉽습니다. 메소드에 원하는 문자열과 길이를 매개변수로 전달하기만 하면 됩니다. 그러면 전달받은 길이를 만족할 때 까지 문자열이 채워집니다. padStart() 메소드를 사용하여 이를 시작 부분에 적용하고, padEnd() 메소드를 사용하여 문자열 끝 부분에 적용합니다.

const padded = '15';

padded.padStart(4, '0'); // "0015"

const string = 'hi';

string.padStart(3, 'c'); // "chi"
string.padEnd(4, 'l'); // "hill"

문법

아래 코드는 메소드를 사용하는 방법입니다.

string.padStart(<maxLength>, <padString>)

string.padEnd(<maxLength>, <padString>)

매개변수 설명

padStart() 메소드와 padEnd() 메소드는 같은 매개변수를 받습니다.

maxLength

const result = string.padStart(5);

result.length; // 5

이 매개변수는 같이 입력받는 padString의 반복횟수가 아닌 결과 문자열의 최대 길이 입니다.

padString

이 것은 옵션 값으로 원래 문자열에 덧붙일 문자열입니다. 만일 이 값을 입력하지 않으면 padString은 기본 값으로 공백을 가지게 됩니다.

'hi'.padStart(5);

// Same as
'hi'.padStart(5, ' ');

여기서 빈 문자열을 전달하면 아무 패딩이 추가되지 않습니다.

const result = 'hi'.padStart(5, '');

result; // 'hi'
result.length; // 2

다른 데이터 타입의 처리

두 번째 매개변수 padString의 타입은 string입니다. 만일 다른 자료형을 입력하면 강제로 toString을 사용하여 문자열 형태로 바꿔서 사용합니다. 다음 예제로 toString() 메소드를 사용하면 어떤 일이 벌어지는지 알아 보겠습니다.

// NUMBER
(100).toString(); // '100'

// BOOLEAN
true.toString();   // 'true'
false.toString();  // 'false'

// ARRAY
['A'].toString(); // 'A'
[''].toString();  // ''

// OBJECT
({}).toString();         // '[object Object]'
({hi: 'hi'}).toString(); // '[object Object]'

위 결과를 바탕으로 padStart에 다른 자료형을 넣으면 어떻게 되는지 보겠습니다. (padEnd도 같은 행동을 할 것 입니다.)

'SAM'.padStart(8, 100);    // '10010SAM'

'SAM'.padStart(8, true);   // 'truetSAM'
'SAM'.padStart(8, false);  // 'falseSAM'

'SAM'.padStart(5, ['']);   // 'SAM'
'SAM'.padStart(5, ['hi']); // 'hiSAM'

'SAM'.padStart(18, {});         // '[object Object]SAM'
'SAM'.padStart(18, {hi: 'hi'}); // '[object Object]SAM'

undefined 처리

toString() 메소드로 undefined를 문자열로 바꾸려 하면 TypeError가 발생합니다.

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined

하지만 padString 매개변수에 undefined를 넣으면 다음과 같은 결과를 얻을 수 있습니다.

'SAM'.padStart(10, undefined);
// '       SAM'

위에서 padString 매개변수로 입력되는 값은 toString() 메소드를 통해 강제로 문자열로 바뀐다고 했지만 undefined일 경우에만 예외로 공백 처리를 합니다.

문자열의 길이가 maxLength 보다 길 경우

첫 번째 매개변수 maxLength 값이 padString을 넣을 만큼 길지 않은 경우 padString 값은 무시됩니다.

'hi'.padEnd(2, 'SAM');
// 'hi'

또는 남는 문자열은 잘립니다. maxLength가 결과 문자열의 최대 길이를 의미하므로 원래 문자열에 padString을 추가하다가 최대 길이에 도달하면 나머지는 잘라버립니다.

'hi'.padEnd(7, 'SAMANTHA');
// 'hiSAMAN'

그리고 첫 번째 매개변수 maxLength가 원래 문자열 길이 보다 작은 경우 그냥 단순하게 원래 문자열을 리턴합니다.

'hello'.padEnd(1, 'SAM');
// 'hello'

사용 예제

0으로 자리수 채우기

'35'.padStart(5, '0');
// 00035

padStart로 문자열 우측 정렬

'JavaScript'.padStart(15);
'HTML'.padStart(15);
'CSS'.padStart(15);
'Vue'.padStart(15);

//     JavaScript
//           HTML
//            CSS
//            Vue

영수증 포멧

const purchase = [
  ['Masks', '9.99'],
  ['Shirt', '20.00'],
  ['Jacket', '200.00'],
  ['Gloves', '10.00'],
];

purchase.forEach(([item, price]) => {
  console.log(item + price.padStart(20 - item.length));
});

// Masks           9.99
// Shirt          20.00
// Jacket        200.00
// Gloves         10.00

카드번호 마스킹

const bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');
// ***************2222