자리수 만큼 남는 공간을 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 > Javascript고급' 카테고리의 다른 글

맵(Map)의 이해 (0)	2020.05.29
타이머를 이용한 지연 실행과 반복 실행 (2)	2020.05.29
AJAX 와 JSON (0)	2020.05.29
XMLHttpRequest 객체 호환성 구현 (0)	2020.05.28
AJAX 비동기 통신 기초(XMLHttpRequest) (0)	2020.05.28
HTML 테이블을 엑셀 파일로 저장하기 (2)	2020.05.17
HTML 테이블을 CSV 파일로 다운로드 하기 (0)	2020.05.15
마우스 우클릭과 드래그 영역 선택을 막기 (0)	2020.05.11
자리수 만큼 남는 공간을 0으로 채우기 (0)	2020.05.11

어포스트

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

'Javascript > Javascript고급' 카테고리의 다른 글

티스토리툴바