자리수 만큼 남는 공간을 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

저작자표시비영리변경금지

'Javascript' 카테고리의 다른 글

HTML 테이블을 CSV 파일로 다운로드 하기 (0)	2020.05.15
location.href 와 location.replace() 의 차이와 구분 사용 방법 (0)	2020.05.12
HTML, CSS, Javascript 코딩과 테스트를 할 수 있는 클라우드 기반 프론트엔드 에디터 JSBin (0)	2020.05.11
마우스 우클릭과 드래그 영역 선택을 막기 (0)	2020.05.11
자리수 만큼 남는 공간을 0으로 채우기 (0)	2020.05.11
ES2015, ES2016, ES2017, ES6, ES7, ES8 ? 자바스크립트 버전의 이해 (2)	2020.05.11
DOMContentLoaded 로 HTML DOM 데이터를 초기화하기 (0)	2020.05.10
Null(널) 과 Undefined는 다르다. (0)	2020.03.05
복사해서 바로 사용하는 자주 사용하는 정규표현식(Regular Expression) Top 20 (0)	2020.03.01