빈칸을 채우기 위한 padStart, padEnd

이번에 우리가 문자열의 길이가 고정된 형태일 경우 빈칸을 동일하게 채울 때 자주 사용하게 되는 메소드인 padStart와 padEnd에 대해서 알아보도록 하자!

 

padStart는..

문자열의 최대길이를 입력하고 입력된 문자열에서 나머지 부분을 앞에 채워주게 되는 메소드이다.

문자열.padStart(문자열최대길이, "채워줄문자열")

만약 아래와 같이 이진수의 포맷자체가 4자리수가 아닌 5자리수인 경우 4자리수를 5자리로 만들고 싶을 때 사용하는 방법을 알아보도록 하자. 비교적 간단하게 padStart를 사용하면 해결할 수 있다.

let binary1 = "1110";
let binary2 = "11101";

// 최대 자리를 5로 설정하고 나머지를 앞에 0으로 모두 채워준다.
binary1 = binary1.padStart(5, "0"); // 01110 출력

여기서 알고 넘어가야 될점은 padStart를 한다고 해서 원래 원본의 문자열에는 영향을 주지않는다. 물론 padEnd도 동일하게 원본에는 영향을 주지 않는다. 아예 원본을 대체하고 싶은 경우 재할당을 해줘야 된다.

 

 

갑자기 궁금한데..?

그러면 한자리의 문자로 채워주는 경우에는 최대길이 만큼 부족하면 모두 동일한 문자로 채워주는데 만약 문자열이 들어오게 된다면 어떻게 처리가 될까?

최대문자열의 길이만큼 문자열의 패턴이 추가가 되는 모습을 볼 수 있다.

let string = "안녕";
string = string.padStart(10, "어제"); // 출력 어제어제어제어제안녕

console.log(string.length); // 출력 10

 

 

padEnd는..

padStart와는 반대로 앞에서 부터 채워주는 것이 아닌 앞에 문자열을 그대로 두고 뒷부분을 채워주게 된다. padEnd는 padStart와 방향이 반대인 것을 제외하고는 별다른 차이점이 존재하지 않는다.

문자열.padEnd(문자열최대길이, "채워줄문자열")

 

 

Remind

이진수 비교를 위해 자릿수를 맞치는 경우, 시간이나 분을 나타낼 때 형태를 00:00으로 쉽게 하고 싶은 경우, 문자열의 길이가 정해져있고 부족한 문자열의 나머지를 채워야 될 상황이 발생하게 된다면 padStart와 padEnd를 사용해서 쉽게 해결하도록 하자