숫자 앞에 자리수 만큼 0을 추가하는 방법에 대해서 알아보겠습니다.

날짜 월 또는 일을 표현할 때, 07월 처럼 특정 자리수만큼 0을 채워야할 때가 있는데요. 이럴 때 어떻게 구현하는지 알아보겠습니다.

1. padStart()를 이용한 방법

padStart(N, “0”)은 문자열 N자리에서 비어있는 부분을 “0”으로 채웁니다. 만약 0 대신에 다른 값으로 채워야 한다면, 그 문자를 0 대신에 입력하시면 됩니다.

const number = 7;
let paddedNumber = number.toString().padStart(2, "0");
console.log(paddedNumber); // "07"

paddedNumber = number.toString().padStart(3, "0");
console.log(paddedNumber); // "007"

paddedNumber = number.toString().padStart(4, "0");
console.log(paddedNumber); // "0007"

paddedNumber = number.toString().padStart(4, "X");
console.log(paddedNumber); // "XXX7"

Output:

07
007
0007
XXX7

날짜를 예로 들면, 아래와 같이 0을 채워서 두자리로 월/일을 표현할 수 있습니다.

let today = new Date();
let todayStr =
  today.getFullYear() +
  "-" +
  today.getMonth().toString().padStart(2, "0") +
  "-" +
  today.getDate().toString().padStart(2, "0");

console.log(todayStr);

Output:

2023-08-26

2. repeat()을 이용한 방법

str.repeat(n)은 str을 n회 반복하는 문자열을 만듭니다. 이렇게 0을 반복하는 문자열을 만들고 숫자를 합친 뒤에, slice()로 필요한 자리수만큼 자르면 됩니다. slice(-n)은 문자열 뒤에서 n개만 잘라서 문자열로 리턴합니다.

  • "0".repeat(2) + 7 = “007”
  • "007".slice(-2) = “07”
const number = 7;
let digitCount = 2;
let paddedNumber = ("0".repeat(digitCount) + number).slice(-digitCount);
console.log(paddedNumber); // "07"

digitCount = 3;
paddedNumber = ("0".repeat(digitCount) + number).slice(-digitCount);
console.log(paddedNumber); // "007"

digitCount = 4;
paddedNumber = ("0".repeat(digitCount) + number).slice(-digitCount);
console.log(paddedNumber); // "0007"

Output:

07
007
0007

3. 숫자 뒤, 특정 자리수만큼 0 채우기

padEnd(N, "0")을 사용하면 숫자 뒤에 N자리만큼 0을 채워 넣을 수 있습니다.

const number = 7;
let paddedNumber = number.toString().padEnd(2, "0");
console.log(paddedNumber); // "70"

paddedNumber = number.toString().padEnd(3, "0");
console.log(paddedNumber); // "700"

paddedNumber = number.toString().padEnd(4, "0");
console.log(paddedNumber); // "7000"

paddedNumber = number.toString().padEnd(4, "X");
console.log(paddedNumber); // "7XXX"

Output:

70
700
7000
7XXX