본문 바로가기

Javascript/Javascript고급

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

반응형

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


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

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

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

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

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


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

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



1. 함수로 구현


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


function fillZero(widthstr){
    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(widthpad){
    return this.length >= width ? this : new Array(width-this.length+1).join(pad)+this;//남는 길이만큼 pad로 앞을 채움
}

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




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


//문자열 프로토타입으로 입력 길이만큼 앞에 pad 문자/문자열로 채운 문자열 반환
String.prototype.fillPadsStart = function(widthpad){
    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(widthpad){
    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



반응형

닫기