padStart와 padEnd (JS)

평소와 같이 코딩테스트를 해보다가 알게 되었고 알아보았다.

 

PAD

padStart와 padEnd함수는 ES8에 새롭게 추가된 기능입니다. 

이 함수의 기능은 간단하게 보면 좌우로 특정한 문자열로 채우는 기능입니다.

우선 함수의 생김새를 보고 가자면

문자열.padStart(maxLength, ?fillString);
문자열.padEnd(maxLength, ?fillString);

이런 형태이다.

maxLength의 크기만큼 fillString로 채운다 라는 의미이다.

만약 비워두게 된다면 빈 공백으로 채우게 된다.

 

padStart (앞에 붙이기)

우리가 데이터를 post 할때 형식에 맞추기 위해 앞에 숫자나 문자를 추가해야 할 때가 가끔 있게 된다.

그럴때 padStart를 모르고 있었을때는 쪼개서 앞에 추가하고 노가다를 하게 되었었다.

하지만 padStart를 쓰면 간단하다

const num = "1";
const result = num.padStart(3,0);

console.log(result)
// 001

이런식이다.

 

padEnd

padEnd도 똑같다 대신 반대로 동작을 한다.

가볍게 보고 가자면

const num = "1";
const result = num.padEnd(3,0);

console.log(result)
// 100

 

문자열 *로 표시하기

간단한 응용을 보자면 가끔 아이디 같은 것을 *로 표시하는 기능을 만들때가 있다. 이럴때 사용해주면 간단하게 기능을 구현할 수 있다.

const id = "qwe123"
const num = Math.floor(id.length/2)
const box = id.slice(0,num);
const result = box.padEnd(id.length,"*")

console.log(result)
// qwe***