Tutorials Guides Reference Articles Cookbooks About

String.prototype.padStart() 

str.padStart(targetLength[, padString])
Returns: string · Added in vES2017 · Updated March 13, 2026 · String Methods
string pad alignment formatting es2017

String.prototype.padStart() pads the current string with a given character (or characters) from the beginning (left side) until it reaches the specified length. This method is perfect for left-padding strings to achieve fixed-width alignment, such as formatting numeric IDs, zero-padding numbers, or ensuring consistent column widths in formatted output.

Syntax

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

Parameters

ParameterTypeDefaultDescription
targetLengthnumber—The length the resulting string should have
padStringstring" " (space)The string to pad with

Return Value

A new string of the specified length, with the padding prepended to the start.

Examples

Basic padding

By default, padStart() uses spaces:

"hello".padStart(10);
// "     hello"

"test".padStart(6);
// "  test"

Numeric month formatting

A common use case is formatting dates—left-padding month and day numbers with zeros:

const month = 3;
const day = 5;

`${month}`.padStart(2, "0") + "/" + `${day}`.padStart(2, "0");
// "03/05"

// Or with a date object
const now = new Date();
const formattedMonth = String(now.getMonth() + 1).padStart(2, "0");
const formattedDay = String(now.getDate()).padStart(2, "0");
// Example output: "03/05"

Custom multi-character padding strings

You can use any string for padding. If the padString is longer than needed, it truncates:

// Pad with zeros (common for IDs)
"42".padStart(5, "0");
// "00042"

// Pad with dashes
"end".padStart(7, "-");
// "----end"

// Multi-character padding gets truncated to fit
"ab".padStart(6, "XYZ");
// "XYZab" (truncates to 4 chars to reach length 6)

// Repeats and truncates the padding string
"x".padStart(8, "AB");
// "ABABABax"

Fixed-width table alignment

Use padStart() for left-aligned columns:

const items = [
  { id: "1", name: "Widget", price: "$9.99" },
  { id: "42", name: "Gadget", price: "$19.99" },
  { id: "256", name: "Gizmo", price: "$299.99" }
];

console.log("ID    | NAME    | PRICE");
console.log("------|---------|-------");

items.forEach(({ id, name, price }) => {
  console.log(`${id.padStart(4)}| ${name.padStart(8)}| ${price}`);
});

// Output:
// ID    | NAME    | PRICE
// ------|---------| -------
//    1 | Widget  | $9.99
//   42 | Gadget  | $19.99
//  256 | Gizmo   | $299.99

Edge Cases

// If targetLength <= string length, returns original string
"hello".padStart(3);
// "hello"

// Empty padString returns original
"test".padStart(8, "");
// "test"

// Unicode characters count as single units
"👍".padStart(4, "x");
// "x👍xx"

Browser Compatibility

padStart() was introduced in ES2017 (ECMAScript 8) and is supported in:

  • Chrome/Edge 57+
  • Firefox 48+
  • Safari 11+
  • Node.js 8.0+

For older environments, use a polyfill:

if (!StringpadStart) {
  StringpadStart = function(targetLength, padString) {
    targetLength = targetLength >> 0;
    padString = String(padString || ' ');
    if (this.length > targetLength) return String(this);
    return padString.repeat(targetLength - this.length) + String(this);
  };
}

See Also