JavaScript에서 숫자 앞에 0을 채우려면, 대상 값의 길이를 확인한 뒤 원하는 자릿수에 도달할 때까지 선행 0을 덧붙이는 함수를 직접 작성할 수 있습니다. 이 방식은 주문 번호, 날짜 포맷, 카운터 표시 등 자릿수를 일정하게 유지해야 할 때 유용합니다.
예제: 커스텀 패딩 함수 만들기
아래 코드를 실행하면 문자열 프로토타입에 정의된 함수를 통해 숫자 앞에 0을 채우는 과정을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
String.prototype.padFunction = function(padStr, len) {
var str = this;
while (str.length < len)
str = padStr + str;
return str;
}
var str = "2";
document.write(str.padFunction("0", 4));
var str = "8";
document.write("<br>"+str.padFunction("0", 5));
</script>
</body>
</html>출력 결과
0002 00008
더 간단한 방법: padStart() 활용하기
ES2017(ES8)부터는 별도의 함수를 만들지 않고도 문자열 기본 메서드인 padStart()를 사용해 한 줄로 처리할 수 있습니다.
console.log("2".padStart(4, "0")); // 0002
console.log("8".padStart(5, "0")); // 00008padStart(targetLength, padString)은 첫 번째 인자로 목표 길이를, 두 번째 인자로 채울 문자를 받습니다. 숫자에 사용할 경우 먼저 String(num) 또는 num.toString()으로 문자열로 변환한 뒤 적용하면 됩니다. 최신 브라우저 환경이라면 이 방법이 가장 간결하고 권장되는 방식입니다.