[Javascript] 문자열 자리수 채우기 - padStart, padEnd

예를 들어 숫자를 표현할 때, 네자리 고정으로 출력하기를 원할 때가 있다. 예를 들어, 네자리를 채우고 싶고 100을 입력하면 0100, 5를 입력하면 ***5 등등..

보통 비밀번호 표시, 혹은 숫자 카운팅에 많이 쓰인다.

 

이를 구현하기 위해 padStart와 padEnd를 사용하면 구현하기 쉽다.

padStart 내장함수를 사용하면 입력한 문자열 앞에 원하는 문자 또는 문자열로 만족하는 문자열 길이까지 채워준다.

반대로 padEnd는 입력한 문자열 뒤에서 채워준다.

 

 

MDN의 예시를 한 번 보자

"abc".padStart(10); // "       abc"
"abc".padStart(10, "foo"); // "foofoofabc"
"abc".padStart(6, "123465"); // "123abc"
"abc".padStart(8, "0"); // "00000abc"
"abc".padStart(1); // "abc"

abc라는 문자열을 받아 새로운 문자열을 반환을 한다.

첫번째 인자는 목표 문자열의 길이를 정의하고 이는 필수 인자이다.

두번째 인자는 목표 문자열의 길이까지 채우기 위한 "채워넣기용 문자(열)"을 정의하며 정의하지 않으면 " "로 인식하고 반환된다.

 

 

응용하여 초단위의 number를 받으면 "00:00(분:초)" 형식으로 반환하는 함수를 만들자.

// number로 넘어오는 refresh 타임을 형식에 맞게 변형하기 위한 함수 (ex: 30 -> 00:30)
export const handleFormatRefreshTime = (refreshTime: number, setFormattedTime: React.Dispatch<React.SetStateAction<string>>): void => {
  // 초를 분과 초로 나누어서 표시
  const minutes = Math.floor(refreshTime / 60);
  const seconds = refreshTime % 60;

  // 시간 형식으로 변환하여 저장
  const timeFormatted = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  setFormattedTime(timeFormatted);
};

 

 

참고 문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padStart() - JavaScript | MDN