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

정의 및 사용 방법

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

기본 예제

JavaScript

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

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

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

구문

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

매개변수

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

반환 값

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

매개변수와 반환 값 예시

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

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

JavaScript

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

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

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

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

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

JavaScript

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

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

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

활용 예제

padStart() 함수는 문자열의 길이를 맞추어 포맷팅하는 목적으로 많이 사용됩니다.
특히, 사용해야 하는 문자열 데이터가 요구되는 포맷보다 짧을 수 있는 경우에 매우 유용합니다.

타이머·스톱워치 같은 UI 표시

시·분·초를 항상 두 자리로 보여줘야 합니다.
이때, 주어지는 값은 최대 두 자리, 즉 한 자리 또는 두 자리 숫자라고 가정합니다.

실제로 브라우저에서 Date 객체의 getSeconds()으로 가져오는 값은 0에서 59 사이의 정수입니다.
이 값을 문자열로 변환 후 UI에서 바로 표시하면 "5"처럼 한 자리로 나타나므로,
padStart(2, "0")를 사용하여 "05"처럼 항상 두 자리 포맷을 유지할 수 있습니다.

다음의 예제를 참고하세요.

JavaScript

// 현재 시각 가져오기
const now = new Date();

const hours = now.getHours();    // 0 ~ 23
const minutes = now.getMinutes(); // 0 ~ 59
const seconds = now.getSeconds(); // 0 ~ 59

// padStart로 항상 두 자리 숫자로 포맷
const formattedHours = String(hours).padStart(2, "0");
const formattedMinutes = String(minutes).padStart(2, "0");
const formattedSeconds = String(seconds).padStart(2, "0");

// 시:분:초 형태로 출력
const currentTime = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

console.log(currentTime); // 예: "03:07:05"

데이터 전송·통신용 패딩

Node.js나 서버 환경에서는, 시스템 간 데이터 전송이나 통신 시 각 필드가 정해진 길이를 가져야 하는 경우가 많습니다. 예를 들어, 장치나 서버가 고정 길이 문자열을 요구할 때, 값이 짧으면 앞쪽을 특정 문자로 채워야 합니다.

이때 padStart()를 사용하면 문자열 길이를 맞춰서 일관된 포맷으로 데이터를 전송할 수 있습니다. 특히 이진 문자열(바이너리)나 ASCII 기반 통신에서 고정 길이 필드를 맞춰야 할 때 활용될 수 있습니다.

JavaScript

// 전송해야 하는 고정 길이 코드
const code1 = "A7";
const code2 = "B12";

// padStart로 앞쪽을 0으로 채워 고정 길이 6으로 맞춤
const fixedCode1 = code1.padStart(6, "0");
const fixedCode2 = code2.padStart(6, "0");

console.log(fixedCode1); // 출력: "0000A7"
console.log(fixedCode2); // 출력: "000B12"