JavaScript padStart() 메서드 완벽 가이드: 문자열 앞부분을 원하는 길이로 채우는 방법

JavaScript에서 두 문자열을 연결할 때는 concat() 메서드를 사용할 수 있습니다. 하지만 첫 번째 문자열의 앞부분에 특정 문자열을 붙여야 한다면 padStart() 메서드가 가장 간편한 방법입니다. 이 메서드는 단순히 문자열을 앞에 추가하는 것뿐만 아니라, 결과 문자열의 전체 길이까지 정확하게 관리해 줍니다.

padStart() 메서드는 두 개의 매개변수를 받습니다. 하나는 결과 문자열의 최종 길이를 지정하는 length(길이)이고, 다른 하나는 앞에 붙일 문자열입니다. 메서드는 지정된 길이에 맞춰 두 번째 문자열을 첫 번째 문자열 앞에 추가합니다.

기본 문법

string.padStart(length, "string");

length: 결과 문자열의 전체 길이를 지정합니다. 원본 문자열과 추가되는 문자열을 합친 길이가 이 값에 맞춰집니다.
string: 원본 문자열 앞에 붙일 문자열입니다. 생략할 경우 기본값으로 공백이 사용됩니다.

사용 예제

<html>
<body>
    <script>
        var str = "the best";
        var st = "Hello";
        document.write(st.padStart(24, " glad to meet you, "));
        document.write("</br>");
        document.write(str.padStart(16, "Tutorix "));
    </script>
</body>
</html>

실행 결과

glad to meet you, Hello
Tutorix the best

위 예제에서 "Hello"는 5글자이고 목표 길이가 24이므로, " glad to meet you, "가 앞에 추가되어 총 24자가 됩니다. 마찬가지로 "the best"(8글자) 앞에 "Tutorix "가 추가되어 16자가 됩니다. 만약 추가할 문자열이 남더라도 목표 길이를 초과하지 않는 범위 내에서만 잘려서 붙습니다.

원본 문자열이 지정한 길이보다 긴 경우

그렇다면 원본 문자열의 길이가 지정한 length 값보다 클 때는 어떻게 될까요? 이 경우에는 아무런 변경 없이 원본 문자열이 그대로 출력됩니다. 즉, padStart()는 절대 원본 문자열을 자르거나 줄이지 않습니다.

예제

<html>
<body>
<script>
    var str = "Tutorix is the best e-learning platform best";
    document.write(str.padStart(16, "Tutorix "));
</script>
</body>
</html>

실행 결과

Tutorix is the best e-learning platform best

위 예제에서 원본 문자열은 지정된 길이 16보다 훨씬 깁니다. 따라서 "Tutorix "는 추가되지 않고 원본 문자열이 그대로 반환됩니다.

실무에서 유용한 활용 팁

padStart()는 숫자 앞에 0을 채워 자릿수를 맞출 때 특히 유용합니다. 예를 들어 디지털 시계처럼 시간을 표시하거나 고정 길이의 ID를 생성할 때 자주 사용됩니다.

const hour = String(9).padStart(2, "0");   // "09"
const minute = String(5).padStart(2, "0"); // "05"
console.log(`${hour}:${minute}`);          // "09:05"

이처럼 padStart()는 문자열 포맷을 일정하게 유지해야 하는 다양한 상황에서 코드의 가독성과 안정성을 높여주는 필수 메서드입니다.