자바스크립트 문자열 앞 뒤에 원하는 길이만큼 문자 추가하기(padEnd, padStart)

목차

코딩테스트를 풀다가 어느분이 padEnd를 사용해서 해결하시는 것을 보고 공부하고 정리한 내용입니다.

처음에 그 코드를 봤을 때머리가 띵했습니다.

문자열 앞에 문자 추가하기 (padStart)

(MDN 정의)

현재 문자열에 다른 문자열을 채워넣어서 주어진 길이에 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작부터 적용됩니다.

 

String.padStart(targetLength, [,padString])

• targetLength보다 String의 길이가 만약 더 길다면? -> 그냥 String이 반환됩니다. targetLength보다 작을 때만 문자열이 채워넣어집니다.
• padString을 안넣으면 어떻게 될까요? -> 빈 문자열이 채워넣어집니다.
• padString이 채워넣어지다가 문자열의 길이가 targetLength에 다다르면? -> 거기에서 멈추고 return됩니다.

 

각 상황별로 코드를 작성해두었습니다. 아래 코드를 보시면서 이해하시면 좋을 것 같습니다.

const myText = 'hello';

// 기본적인 사용법
console.log(myText.padStart(10, '*')); // '*****hello'

// targetLength보다 String의 길이가 만약 더 길다면? 해당 문자열이 반환됩니다.
console.log(myText.padStart(2, '*')); // 'hello'

// padString을 안넣으면 어떻게 될까요? 빈문자열이 채워집니다.
console.log(myText.padStart(10,)); // '     hello'

// padString이 채워넣어지다가 문자열의 길이가 targetLength에 다다르면? 해당 문자열이 그 길이에서 멈추고 반환
console.log(myText.padStart(10, 'abc')); // 'abcabhello'

문자열 뒤에 문자 추가하기 (padEnd)

(MDN 정의)

현재 문자열에 다른 문자열을 채워넣어서 주어진 길이에 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 끝부터 적용됩니다.

 

padEnd 메서드는 padStart와 사용법, 개념은 같습니다. 다만 차이점이 있다면 앞에서부터 적용되는것이 아닌 뒤(끝)에서 부터 적용됩니다.

 

상황에 따른 코드를 작성해두었으니 아래 코드를 보면서 이해하시면 좋을 것 같습니다.

const myText = 'hello';

// 기본적인 사용법
console.log(myText.padEnd(10, '*')); // 'hello*****'

// targetLength보다 String의 길이가 만약 더 길다면? 해당 문자열이 반환됩니다.
console.log(myText.padEnd(2, '*')); // 'hello'

// padString을 안넣으면 어떻게 될까요? 빈문자열이 채워집니다.
console.log(myText.padEnd(10,)); // 'hello     '

// padString이 채워넣어지다가 문자열의 길이가 targetLength에 다다르면? 해당 문자열이 그 길이에서 멈추고 반환
console.log(myText.padEnd(10, 'abc')); // 'helloabcab'

 

봐주셔서 감사합니다. 이상한 점이 발견되면 말씀해주시면 반영하겠습니다. 감사합니다~