문자열 길이 맞추기

10미만의 숫자 앞에 0을 붙여 두자리 형식을 만들거나 특정 문자열에 추가 문자형식을 맞출때 사용합니다.

구문

• 문자열.padStart(전체길이, 추가문자열): 문자열 시작 부분에 문자열 추가
• 문자열.padEnd(전체길이, 추가문자열): 문자열 끝부분에 문자열 추가

'5'.padStart(2, '0'); // '05'
'ff'.padEnd(6, '0'); // 'ff0000'

지정한 길이가 실제 문자열보다 짧은 경우 문자열은 변환되지 않습니다. 인수에 추가 문자열을 생략하면 공백이 입력됩니다.

'123'.padStart(3, '0'); // '123'
'ff'.padEnd(6); // 'ff    '

JSX 샘플: 현재 시간 숫자가 한자리면 앞에 0을 붙이기

라이브 에디터

function Clock() {
  const [currentTime, setCurrentTime] = useState({
    ampm: '',
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
  
  // 한자리 숫자면 앞에 '0'을 붙이기
  const addPadZero = (num) => {
    return `${num}`.padStart(2, '0');
  }
  
  useEffect(() => {
    let timer;
    const update = () => {
      const date = new Date();
      const hours = date.getHours() % 12;

      setCurrentTime({
        ampm: date.getHours() >= 12 ? 'PM' : 'AM',
        hours: addPadZero(hours ? hours : 12),
        minutes: addPadZero(date.getMinutes()),
        seconds: addPadZero(date.getSeconds()),
      });
      
      requestAnimationFrame(update);
    }
    
    timer = requestAnimationFrame(update);
    
    return () => {
      if (timer) cancelAnimationFrame(timer);
    }
  }, []);
  
  return (
    <div style={{fontWeight: 'bold', fontSize: 24}}>
      {currentTime.ampm} {currentTime.hours} : {currentTime.minutes} : {currentTime.seconds}
    </div>
  )
}

결과

Loading...