숫자 앞에 0 붙이기(zero padding)

JavaScript에서 스트링/숫자에 leading zero를 붙이는 방법 몇 가지 정리.

String.prototype.padStart()

모던 브라우저 전체에서 사용할 수 있는 String.prototype.padStart 함수사용 방식.
(참고: polyfill)

기본 형식

const n = 1
`${n}`.padStart(2, '0') // "02"
("" + n).padStart(2, '0') // "02"
String(n).padStart(2, '0') // "02"

메서드 wrap

const leadZero = (n, len = 2) => String(n).padStart(len, '0')
 
leadZero(2, 1) // "2"
leadZero(2, 2) // "02"
leadZero(2, 3) // "002"
 
leadZero(123, 0) // "123"
leadZero(123, 1) // "123"
leadZero(123, 2) // "123"
leadZero(123, 3) // "123"
leadZero(123, 4) // "0123"

String.prototype.slice()

String.slice()에 음수(-) 인덱스 값을 넣는 방법. 길이를 짧게 줬을 때 숫자 자체가 잘리지 않도록 처리해야 String.prototype.padStart와 동작이 동일하다.

const leadZero = (n, len = 2) => ("0".repeat(len) + n).slice(-Math.max(len, String(n).length))

입력 숫자의 길이가 명확한 경우(날짜, 시간 등) 아래처럼 간단하게 쓸 수도 있다.

시간, 날짜 등을 leading-zero 2자리로 만들기

`0${n}`.slice(-2)   // n=1 일 때 "01"
("0" + n).slice(-2) // n=1 일 때 "01"

Intl.NumberFormat()

타이핑, 퍼포먼스 면에서 선호되지 않을 방법이다.
메서드 상세는 MDN 및 ecma402 spec 참조.

const leadZero = (n, len = 2) => new Intl.NumberFormat('en-US', {
	minimumIntegerDigits: Math.max(len,1), // 0 raises RangeError
	useGrouping: false // no grouping separator
}).format(n)

고정된 자릿수 formatter 반환 형태

formatter 반환 형태

const leadZeroFormatter = (len) => new Intl.NumberFormat('en-US', {
	minimumIntegerDigits: Math.max(len,1), // 0 raises RangeError
	useGrouping: false // no grouping separator
}).format
 
const leadZeroTwo = leadZeroFormatter(2)
leadZeroTwo(2) // "02"