[js]padStart와 padEnd로 00:00 시간 포맷 형식 구현

padStart와 padEnd에 대해 깊이 있게 알아보려고 합니다.

이 두 메서드는 특히 시간 형식을 다룰 때 굉장히 유용한데요,

00:00 형식의 시간을 만들 때 어떻게 활용할 수 있는지 자세히 살펴보겠습니다.

 

padStart와 padEnd란?

padStart와 padEnd는 ES2017(ES8)에서 도입된 String 메서드입니다.

 

이 메서드들은 문자열의 시작 또는 끝에

특정 문자를 채워 넣어 원하는 길이의 문자열을 만들 수 있게 해줍니다.

 

padStart 메서드

padStart는 문자열의 시작 부분에 지정된 문자를 채워 넣습니다.

const str = '5';
console.log(str.padStart(2, '0')); // 출력: '05'

 

padEnd 메서드

padEnd는 문자열의 끝 부분에 지정된 문자를 채워 넣습니다.

const str = '5';
console.log(str.padEnd(2, '0')); // 출력: '50'

 

시간 포맷팅에 활용하기

00:00 형식 포맷

이제 이 메서드들을 사용해 00:00 형식의 시간을 만들어보겠습니다.

function formatTime(hours, minutes) {
    return '${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}';
}
console.log(formatTime(9, 5)); // 출력: '09:05'
console.log(formatTime(23, 59)); // 출력: '23:59'

 

이 formatTime 함수는 시간과 분을 입력받아 00:00 형식의 문자열로 변환합니다.

padStart를 사용해 한 자리 숫자 앞에 0을 추가하여 항상 두 자리로 표시되도록 합니다.

 

밀리초 단위까지 표시하기

밀리초까지 표기해봅시다

function formatTimeWithMilliseconds(hours, minutes, seconds, milliseconds) {
      return '${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}';
}
console.log(formatTimeWithMilliseconds(14, 30, 45, 678)); // 출력: '14:30:45.678'

 

이 함수는 시, 분, 초, 밀리초를 입력받아 00:00:00.000 형식의 문자열로 변환합니다.

 

padStart와 padEnd의 다른 활용 사례

파일명 정렬

const files = ['file1.txt', 'file2.txt', 'file10.txt', 'file20.txt'];
const paddedFiles = files.map(file => file.padStart(20)); console.log(paddedFiles);
// 출력: ['          file1.txt', '         file2.txt', '         file10.txt', '         file20.txt']

 

신용카드 번호 마스킹

신용카드 번호의 일부를 '*'로 가리고 싶을 때 사용할 수 있습니다.

const cardNumber = '1234567890123456';
const lastFourDigits = cardNumber.slice(-4);
const maskedNumber = lastFourDigits.padStart(cardNumber.length, '*');
console.log(maskedNumber);
// 출력: '************3456'

 

진수 변환 결과 포맷팅

2진수나 16진수로 변환한 결과를 일정 길이로 맞출 때 유용합니다.

const decimal = 15;
const binary = decimal.toString(2).padStart(8, '0');
const hex = decimal.toString(16).padStart(2, '0');
console.log(binary);
// 출력: '00001111'
console.log(hex);
// 출력: '0f'

 

padStart와 padEnd를 사용할 때 주의해야 할 점들이 있습니다

1. 패딩 문자열이 여러 문자로 이루어진 경우, 전체가 반복되어 사용됩니다.
2. 대상 문자열이 이미 지정된 길이보다 길거나 같은 경우, 패딩이 적용되지 않습니다.
3. 숫자를 직접 메서드의 인자로 사용할 수 없습니다. 문자열로 변환 후 사용해야 합니다.

console.log('abc'.padStart(10, '123')); // 출력: '1231231abc'

console.log('long string'.padStart(5, '0')); // 출력: 'long string'

console.log((5).padStart(2, '0')); // 오류 발생
console.log((5).toString().padStart(2, '0')); // 정상 작동, 출력: '05'

 

 

예제: 달력만들기

padStart와 padEnd를 활용해 간단한 달력을 만들어보겠습니다.