자바스크립트 padEnd() 함수 – 문자열 끝을 채워 특정 길이로 맞추기

정의 및 사용 방법

padEnd() 함수는 주어진 문자열이 지정한 길이보다 짧으면, 끝 부분에 부족한 길이만큼 원하는 문자열을 채워(padding, 속을 채우다) 지정한 길이로 맞춥니다.

기본 예제

JavaScript

const str = "hello"; // 주어진 문자열(문자열의 길이: 5)

// 주어진_문자열.padStart(지정한_길이[, 채우길_원하는_문자열]);
// 지정한 길이: 10, 채우길 원하는 문자열: "*"
const resultStr = str.padEnd(10, "*");

console.log(resultStr); // 출력: "hello*****"

구문

str은 padEnd() 함수를 적용할 문자열입니다.

매개변수

padEnd() 함수의 매개변수 설명
`targetLength`	반환될 문자열이 가져야 하는 최종 목표 길이입니다. 이 길이는 숫자 타입으로 지정해야 하며, `str.length` 보다 작거나 같으면 주어진 문자열(`str`)은 그대로 반환됩니다.
`padString`	옵션. 문자열의 끝 부분을 채울 때 사용할 문자열입니다. `padString`에는 하나 이상의 문자로 구성된 문자열을 지정할 수 있습니다. 주어진 문자열(`str`)과 합친 길이가 `targetLength`에 도달할 때까지 주어진 문자열의 끝 부분에서 `padString`이 반복해서 채웁니다. 합친 길이가 `targetLength`를 초과하면, 초과되는 부분은 `padString`의 끝에서 자릅니다. `padString`을 지정하지 않으면 기본값은 공백 문자 (`" "`, U+0020)입니다.

반환 값

주어진 문자열(str)이 지정한 길이(targetLength)보다 짧으면, 끝 부분에 부족한 길이만큼 원하는 문자열(padString)을 채워 지정한 길이로 맞춘 문자열로 반환합니다. 그렇지 않으면 주어진 문자열(str)을 그대로 반환합니다.

매개변수와 반환 값 예시

`padString`의 기본 동작 한눈에 보기

JavaScript

"js".padEnd(6); 
// "js    "
// 두 번째 인수를 생략하면 공백으로 채웁니다.

"js".padEnd(6, "0"); 
// "js000"
// 지정한 문자열("0")을 필요한 길이만큼 반복하여 채웁니다.

"js".padEnd(5, "abc"); 
// "jsabc"
// padString이 길더라도 필요한 만큼만 잘려서 사용됩니다.

"javascript".padEnd(5, "."); 
// "javascript"
// 기존 문자열이 이미 목표 길이보다 길면 아무 변화가 없습니다.

`padString`에 여러 문자로 구성된 문자열

padString에 여러 문자로 구성된 문자열로 지정할 경우 주어진 문자열(str)과 합친 길이가 targetLength에 도달할 때까지 주어진 문자열의 끝 부분부터 반복해서 채웁니다. 합친 길이가 targetLength를 초과하면, 초과되는 부분은 padString의 끝에서 자릅니다.

JavaScript

const str = "hello"; // 주어진 문자열(문자열의 길이: 5)

// 지정한 길이: 10, 채우길 원하는 문자열: "*@"
const resultStr = str.padEnd(10, "*@");

console.log(resultStr); // 출력: "hello*@*@*"

`padString`을 지정하지 않았을 경우

padString을 지정하지 않으면 기본값은 공백 문자 (" ", U+0020)입니다.

JavaScript

const str = "hello"; // 주어진 문자열(문자열의 길이: 5)

// 지정한 길이: 10, 채우길 원하는 문자열을 지정하지 않음
const resultStr = str.padEnd(10);

// 빈 공백이 채워짐
console.log(resultStr); // 출력: "hello     "

활용 예제

padEnd() 함수는 함수는 문자열의 뒷부분을 채워 지정한 길이에 맞추는 용도로 자주 활용됩니다.
특히, 좌측 정렬된 문자열을 일정한 길이에 맞춰 정렬하거나, 고정 폭 UI·로그 출력을 다룰 때 유용합니다.

목록 또는 테이블 데이터 정렬 (컬럼 너비 맞추기)

데이터 목록이나 테이블을 콘솔 또는 고정 폭 글꼴(Monospace) 환경에 출력할 때, 각 항목의 길이를 padEnd()를 사용하여 맞추면 깔끔하게 정렬된 형태로 표시할 수 있습니다. 이는 특히 파일 목록이나 콘솔 애플리케이션의 UI를 만들 때 유용합니다.

JavaScript

// 제품 리스트 예제
const items = [
    { name: "Coffee", price: 4500 },
    { name: "Donut",  price: 2000 },
    { name: "Latte",  price: 5000 }
];

// 컬럼 너비 지정 (제품명 10자, 가격 5자)
const nameWidth = 10;
const priceWidth = 5;
const fillChar = ".";

console.log("--- PRODUCT LIST ---");

items.forEach(item => {
    // 제품명: 뒤쪽을 '.'으로 채워 10자 확보
    const paddedName = item.name.padEnd(nameWidth, fillChar);
    
    // 가격: 숫자를 문자열로 변환 후, 앞쪽을 공백으로 채워 5자 확보 (padEnd와 대칭되는 정렬을 위해 padStart 사용)
    const paddedPrice = String(item.price).padStart(priceWidth, " ");
    
    // 출력: "Coffee.... 4500" 형태
    console.log(`${paddedName} ${paddedPrice}원`);
});

/*
출력:
--- PRODUCT LIST ---
Coffee....  4500원
Donut.....  2000원
Latte.....  5000원
*/