숫자를 웹상에 문자로 표현을 할 때
자리수만큼 앞에 0을 채워야 하는 경우가 있습니다.
예를들어 년-월-일 날짜의 경우
"2020-05-09" 와 같은 표시를 하는 경우
월과 일 앞에 0을 채워서 자리수를 10자리로 맞춰야 하는 경우가 있습니다.
또는, "003", "0001" 과 같이 숫자 앞에 일정 갯수만큼 0을 채워넣어서 표시를 해야하는 경우도 있을 수 있습니다.
이런 경우 한번이면 모르겠지만, 반복적으로 사용해야 하는 경우 함수(메써드)로 구현을 해서 사용하는 것이 효율적이며
구현을 하는 방법으로는 아래와 같은 방법들이 있습니다.
1. 함수로 구현
- 자리수만큼 남는 앞부분을 0으로 채움
2. 문자열(String), 또는 숫자(Number) 프로토타입 메써드로 구현
조금 더 고급스럽게 범용으로 사용하기 위해 프로토타입을 활용해 구현하면 아래와 같이 구현할 수 있습니다.
- 0이 아닌 다른 문자로 채우고 싶은 경우 입력 파라메터를 추가해 다음과 같은 확장 구현이 가능합니다.
- 0이나 문자 1개가 아닌 문자열로 채우고 싶은 경우 아래와 같이 추가 확장이 가능합니다.
3. 최신 자바스크립트 표준 메써드를 사용
ES2017 부터는 문자열에 padStart(), padEnd() 메써드가 표준으로 제공됩니다.
사용자 정의해서 쓰던 위 메써드를 대체하는 표준 메써드로 동일한 기능 이상을 제공합니다.
사용자 정의해서 사용하는 기능보다 더 강력한 기능을 제공하기 때문에 다양한 용도로 활용할 수도 있습니다.
사용 방법은 다음과 같습니다.
YYYY-MM-DD 날짜 생성
다만, 구버전 웹브라우저에서는 호환성 문제가 있습니다.(인터넷 익스플로러에서 미지원)
깃헙에 공개된 문자열 폴리필(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 |
Comments