개발/Web

[JS] String( ) , padStart( )

유훈 | Yuhun 2021. 12. 31. 00:45
반응형

String()

String은 문자열로 만들어준다고 할 수 있다. 간단하지만 중요.

1 3 17 같은 숫자를 string(number) 하면 "1" "3" "17"로 만들 수 있다.

 

+ parseInt()는 반대로 숫자로 이루어진 문자열을 number로 바꿔준다.

 

padStart()

 

padStart()는 문자열을 채워주는 역할을 하는데 편리하다.

두 개의 인자가 들어가는데 첫 번째는 내가 만들 문자열의 길이

두 번째는 빈 공간을 채울 문자이다.

예를 들어 "hi"라는 문자열이 있고 문자열의 길이 5중 나머지를 "0"로 채우고 싶다면 다음과 같다.

let hi = "hi"; // string 문자열
hi = hi.padStart(5,"0");

결과
hi => "000hi";

 

다른 예로

12:2:6 같은 시간 표시를 12:02:06으로 바꿀 수 있다. 아래 예시

const clock = document.querySelector("#clock");

const getClock = () =>{
  const date = new Date();
  const hours = String(date.getHours()).padStart(2,"0");
  const minutes = String(date.getMinutes()).padStart(2,"0");
  const seconds = String(date.getSeconds()).padStart(2,"0");
  clock.innerText = `${hours}:${minutes}:${seconds}` ;
};

padEnd() => 뒤부터 채움

반응형