JavaScript String padStart() Method

What You’ll Learn

String.prototype.padStart() pads a string from the start until it reaches a target length (same API as MDN String.prototype.padStart()). Learn zero-padding, card masking, how padString repeats or truncates, when the original string is returned unchanged, how it compares to padEnd(), five examples, and try-it labs.

Introduction

Need leading zeros on a number, a masked card display, or text shoved to the right in a fixed-width field? padStart() adds characters before your text until the result reaches targetLength.

The filler is optional. Omit it and JavaScript uses a single space. Provide a longer filler and it is repeated (and trimmed) to fill the gap. If the string is already long enough, nothing is added.

This page is part of JavaScript String Methods. Related topics include padEnd() and length.

Understanding the padStart() Method

str.padStart(targetLength, padString) builds a new string whose length is at least targetLength, by inserting filler before str.

• Padding is applied at the start of the string.
• Default padString is " " (one space).
• If padString is too long for the remaining slots, it is truncated.
• If targetLength <= str.length, the original contents are returned as-is.
• An empty padString cannot fill space — the original string is returned.

📝 Syntax

General forms of String.prototype.padStart:

str.padStart(targetLength)
str.padStart(targetLength, padString)

Parameters

• targetLength — desired length of the result. If less than or equal to str.length, str is returned unchanged.
• padString (optional) — string used to fill the start. Truncated if longer than needed. Default: " ".

Return value

A string of length targetLength (or the original length when no padding is needed):

Common patterns

"abc".padStart(10);            // "       abc"
"abc".padStart(10, "foo");     // "foofoofabc"
"abc".padStart(6, "123465");   // "123abc"
"abc".padStart(8, "0");        // "00000abc"
"abc".padStart(1);             // "abc"

"5".padStart(2, "0");          // "05"
String(9).padStart(3, "0");    // "009"

Examples Gallery

Examples follow MDN String.padStart() patterns. Use View Output or Try It Yourself for each case.

const str = "5";

str.padStart(2, "0");
// "05"

"200".padStart(5);
// "  200"

05
  200

"abc".padStart(10);          // "       abc"
"abc".padStart(10, "foo");   // "foofoofabc"
"abc".padStart(6, "123465"); // "123abc"
"abc".padStart(8, "0");      // "00000abc"
"abc".padStart(1);           // "abc"

       abc
foofoofabc
123abc
00000abc
abc

function leftFillNum(num, targetLength) {
  return num.toString().padStart(targetLength, "0");
}

leftFillNum(123, 5);   // "00123"
leftFillNum(7, 2);     // "07"
leftFillNum(42, 2);    // "42"

// Clock-style hours / minutes
const h = 9;
const m = 5;
`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
// "09:05"

00123
07
42
09:05

const fullNumber = "2034399002125581";
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, "*");

maskedNumber;
// "************5581"

************5581

"ready".padStart(5, "0");  // "ready"  (already long enough)
"ready".padStart(3, "0");  // "ready"

"x".padStart(8, "");       // "x"      (empty filler cannot pad)

const padded = "Go".padStart(6, "*");
padded.length;             // 6
padded;                    // "****Go"

ready
ready
x
6
****Go

🚀 Common Use Cases

• Zero-padded IDs — String(id).padStart(6, "0") for invoice or ticket numbers.
• Clock / timer display — two-digit hours and minutes.
• Masked values — show only the last few characters of a secret.
• Right-aligned text columns — pad with spaces in monospace logs.
• Not for visual width — emoji / wide glyphs may look uneven; length is code units.
• Trailing padding — use padEnd() for leaders and left-aligned labels.

📝 Notes

• padStart() pads on the left; padEnd() pads on the right.
• Default filler is one space character.
• If targetLength <= str.length, the string is returned unchanged.
• Long fillers are truncated; short fillers are repeated.
• Empty padString cannot add characters.
• Length uses UTF-16 code units — same as str.length.

💡 Best Practices