- Published on
- ·4 min read
JavaScript - 0 채우기 (zero fill), 3가지 방법 정리
개요
원하는 자리수보다 작은 값이 들어올 경우, 앞에 0을 채워주는 3가지 방법을 정리합니다.
아래와 같은 경우입니다.
- 원하는 자리수 2자리: 1 -> 01, 11 -> 11
- 원하는 자리수 5자리: 1 -> 00001, 11 -> 00011
3가지 방법
- padStart
- repeat & slice
- toString().length
자세한 내용은 아래에서 설명합니다.
1. padStart
padStart 설명
MDN에서 설명하는 padStart는 아래와 같습니다.
padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
// 값.padStart(자리수, 채울문자)
'1'.padStart(5, '0'); // '00001'
- ❗ Internet Explorer 에서는 사용할 수 없습니다.
최종 코드
const value = 1; // 값
const fillCount = 5; // 자리수
const fillText = '0'; // 채울문자
value.toString().padStart(fillCount, fillText); // '00001'
함수로 만들어 사용하면 아래와 같습니다.
function zeroFill (value, fillCount) {
return value.toString().padStart(fillCount, '0');
}
2. repeat & slice
repeat() 메서드로 원하는 자리 수 만큼 0을 채운 결과에 값을 합쳐줍니다.
그리고 slice() 메서드로 원하는 자리 수 만큼 뒤에서 부터 잘라내는 방법입니다.
repeat 설명
MDN에서 설명하는 repeat은 아래와 같습니다.
repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.
// 채울문자.repeat(자리수);
'0'.repeat(5); // '00000'
- ❗ Internet Explorer 에서는 사용할 수 없습니다.
slice 설명
MDN에서 설명하는 slice는 아래와 같습니다.
slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
// 배열.slice([시작[, 끝]])
('00000'+'1').slice(-5); // '00001'
위 코드를 설명하면 repeat()으로 만들어진 '00000'에 값 '1'을 합쳐준 후(총 6자 '000001'), slice()로 뒤에서 부터 5자리를 잘라내는 것입니다.
최종 코드
const value = 1; // 값
const fillCount = 5; // 자리수
const fillText = '0'; // 채울문자
(fillText.repeat(fillCount) + value).slice(-fillCount); // '00001'
함수로 만들어 사용하면 아래와 같습니다.
function zeroFill(value, fillCount) {
return ('0'.repeat(fillCount) + value).slice(-fillCount);
}
3. toString().length
설명
예전부터 많이 써오던 방법으로 값의 문자열 길이를 확인 후에, 원하는 자리수보다 작을 경우 0을 채워주는 방법입니다.
브라우저 호환성 문제를 고려하지 않아도 되는 것이 장점입니다.
최종 코드
const value = 1; // 값
const fillCount = 5; // 자리수
const fillText = '0'; // 채울문자
value.toString().length < fillCount ? Array(fillCount + 1 - value.toString().length).join(fillText) + value : value; // '00001'
함수로 만들어 사용하면 아래와 같습니다.
function zeroFill(value, fillCount) {
return value.toString().length < fillCount ? Array(fillCount + 1 - value.toString().length).join('0') + value : value;
}
마무리
3가지 방법을 정리해보았습니다.
각각 장단점이 있으니, 상황에 맞게 사용하시면 될 것 같습니다.
