JS padStart와 padEnd 메소드: 문자열 길이에 맞게 문자 채워넣기 (문자열 패딩)

JavaScript의 padStart와 padEnd는 문자열을 특정 길이로 패딩하는데 사용됩니다. 이를 통해 지정한 문자를 원하는 길이로 문자열을 채우거나, 텍스트를 정렬하는데 활용됩니다.

padStart와 padEnd는 ES8(ECMAScript 2017)부터 표준으로 추가되었습니다. 따라서 오래된 브라우저나 환경에서는 지원되지 않을 수 있음에 주의해야합니다.

 

padStart

• 문자열의 시작 부분에 특정 문자열로 채워, 지정한 길이 만큼 만듭니다.
• 첫 번째 인자는 최종 길이를 나타냅니다.
• 두 번째 인자는 채울 문자열입니다. 두 번째 인자를 생략하면 기본값으로 공백(" ")이 사용됩니다.

아래 예제는 문자열 길이가 5가 되도록 문자열 "0"을 시작 부분부터 채워준 코드입니다.

const str = "123";
const startPaddedStr = str.padStart(5, "0");

console.log(startPaddedStr);  // "00123"

 

 

padEnd

• 문자열의 끝 부분에 특정 문자열로 채워, 지정한 길이 만큼 만듭니다.
• 첫 번째 인자는 최종 길이를 나타냅니다.
• 두 번째 인자는 채울 문자열입니다. 두 번째 인자를 생략하면 기본값으로 공백(" ")이 사용됩니다.

아래 예제는 문자열 길이가 5가 되도록 문자열 "0"을 끝 부분부터 채워준 코드입니다.

const str = "123";
const endPaddedStr = str.padEnd(5, "0");

console.log(endPaddedStr);  // "12300"

 

 

활용 예제

숫자 패딩:

getFormattedDate(date) {
    if (!date) return '';
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}T23:59:59`;
}

월(month) 혹은 일(day)인 경우, 해당 날이 한 자리일 때, 앞에 0을 채워준 결과를 얻습니다.

 

텍스트 정렬:

const name1 = "Kim";
const name2 = "Lee";
const name3 = "Choi";
const name4 = "Hwang";

const paddedName1 = name1.padStart(10, " ");
const paddedName2 = name2.padStart(10, " ");
const paddedName3 = name3.padStart(10, " ");
const paddedName4 = name4.padStart(10, " ");

console.log("|" + paddedName1 + "|");      // "|       Kim|"
console.log("|" + paddedName2 + "|");      // "|       Lee|"
console.log("|" + paddedName3 + "|");      // "|      Choi|"
console.log("|" + paddedName4 + "|");      // "|     Hwang|"

padEnd를 사용하여 이름을 10자리로 맞추고 공백을 채워, 우측 정렬한 결과를 얻습니다.