자리수 만큼 남는 공간을 0으로 채우기

숫자를 웹상에 문자로 표현을 할 때

자리수만큼 앞에 0을 채워야 하는 경우가 있습니다.

예를들어 년-월-일 날짜의 경우

"2020-05-09" 와 같은 표시를 하는 경우

월과 일 앞에 0을 채워서 자리수를 10자리로 맞춰야 하는 경우가 있습니다.

또는, "003", "0001" 과 같이 숫자 앞에 일정 갯수만큼 0을 채워넣어서 표시를 해야하는 경우도 있을 수 있습니다.

이런 경우 한번이면 모르겠지만, 반복적으로 사용해야 하는 경우 함수(메써드)로 구현을 해서 사용하는 것이 효율적이며

구현을 하는 방법으로는 아래와 같은 방법들이 있습니다.

1. 함수로 구현

- 자리수만큼 남는 앞부분을 0으로 채움

function fillZero(width, str){    return str.length >= width ? str:new Array(width-str.length+1).join('0')+str;//남는 길이만큼 0으로 채움}

2. 문자열(String), 또는 숫자(Number) 프로토타입 메써드로 구현

조금 더 고급스럽게 범용으로 사용하기 위해 프로토타입을 활용해 구현하면 아래와 같이 구현할 수 있습니다.

//숫자 프로토타입으로 입력 길이만큼 앞에 0을 채운 문자열 반환Number.prototype.fillZero = function(width){    let n = String(this);//문자열 변환    return n.length >= width ? n:new Array(width-n.length+1).join('0')+n;//남는 길이만큼 0으로 채움}
//문자열 프로토타입으로 입력 길이만큼 앞에 0을 채운 문자열 반환String.prototype.fillZero = function(width){    return this.length >= width ? this:new Array(width-this.length+1).join('0')+this;//남는 길이만큼 0으로 채움}

- 0이 아닌 다른 문자로 채우고 싶은 경우 입력 파라메터를 추가해 다음과 같은 확장 구현이 가능합니다.

//문자열 프로토타입으로 입력 길이만큼 앞에 pad 문자로 채운 문자열 반환String.prototype.fillPadStart = function(width, pad){    return this.length >= width ? this : new Array(width-this.length+1).join(pad)+this;//남는 길이만큼 pad로 앞을 채움}
//문자열 프로토타입으로 입력 길이만큼 앞에 pad 문자로 채운 문자열 반환String.prototype.fillPadEnd = function(width, pad){    return this.length >= width ? this : this + new Array(width-this.length+1).join(pad);//남는 길이만큼 pad로 뒤를 채움}

- 0이나 문자 1개가 아닌 문자열로 채우고 싶은 경우 아래와 같이 추가 확장이 가능합니다.

//문자열 프로토타입으로 입력 길이만큼 앞에 pad 문자/문자열로 채운 문자열 반환String.prototype.fillPadsStart = function(width, pad){    return this.length >= width || pad == undefined || pad.length == 0 ? this :         new Array(Math.floor((width-this.length)/pad.length)+1).join(pad) +         pad.substr(0,(width-this.length)%pad.length) + this;//남는 길이만큼 pad로 앞을 채움}
//문자열 프로토타입으로 입력 길이만큼 앞에 pad 문자로 채운 문자열 반환String.prototype.fillPadsEnd = function(width, pad){    return this.length >= width || pad == undefined || pad.length == 0 ? this :         this + new Array(Math.floor((width-this.length)/pad.length)+1).join(pad)         + pad.substr(0,(width-this.length)%pad.length);//남는 길이만큼 pad로 앞을 채움}

3. 최신 자바스크립트 표준 메써드를 사용

ES2017 부터는 문자열에 padStart(), padEnd() 메써드가 표준으로 제공됩니다.

사용자 정의해서 쓰던 위 메써드를 대체하는 표준 메써드로 동일한 기능 이상을 제공합니다.

사용자 정의해서 사용하는 기능보다 더 강력한 기능을 제공하기 때문에 다양한 용도로 활용할 수도 있습니다.

사용 방법은 다음과 같습니다.

'03'.padStart(6,'0'); // '000003''2500'.padStart(8,'$'); // "$$$$2500"'12345'.padStart(10); // "     12345"'abc'.padEnd(9,'123'); // "abc123123"'주석문'.padStart(6,'*').padEnd(9,'*'); // "***주석문***"

YYYY-MM-DD 날짜 생성

var dt = new Date();console.log(dt.getFullYear()+ '-' + dt.getMonth().toString().padStart(2,'0') + '-' + dt.getDate().toString().padStart(2,'0')); // "2020-05-09"

다만, 구버전 웹브라우저에서는 호환성 문제가 있습니다.(인터넷 익스플로러에서 미지원)

깃헙에 공개된 문자열 폴리필(polyfill) 자바스크립트 라이브러리를 링크해서 사용하면 인터넷익스플로러에서 padStart(), padEnd() 메써드 지원이 가능해집니다.

https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js

폴리필 라이브러리를 사용하지 않고 padStart(), padEnd() 만 사용하고 싶은 경우 모질라에서

프로토타입 메써드 구현용 샘플 코드를 제공하므로 이걸 사용해도 됩니다.

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