숫자를 웹상에 문자로 표현을 할 때
자리수만큼 앞에 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