padStart()

padStart(str, length, padString?): string

Pads the start of a string with a given character until it reaches the specified length.

DEPRECATED

Use string.padStart() directly instead.

---

Parameters

str: string | null | undefined

The string to pad.

length: number | null | undefined

The target length of the padded string.

padString?: string = " "

The string to use for padding.

---

Returns: string

The padded string.

---

See Also

• String.padStart() - MDN
• Browser support - Can I Use

---

Since

2.0.0

---

Also known as

padStart (Lodash, es-toolkit) · ❌ (Remeda, Radashi, Ramda, Effect, Modern Dash, Antfu)

---

Example

// ❌ Deprecated approach
padStart('hello', 10);      // => '     hello'
padStart('42', 5, '0');     // => '00042'

// ✅ Recommended approach
'hello'.padStart(10);      // => '     hello'
'42'.padStart(5, '0');     // => '00042'

---

How it works?

Pads the start of a string to a target length. Deprecated: Use string.padStart() directly (ES2017).

Native Equivalent

// ❌ padStart('42', 5, '0')
// ✅ '42'.padStart(5, '0')

---

Use Cases

Pad start 📌

Pad string at start to target length.

#pad#start#left#fill

'5'.padStart(2, '0');  // '05'

Format numbers

Add leading zeros.

#format#number#leading#zeros

const formatted = String(num).padStart(4, '0');
// 42 → '0042'

Format time display

Ensure hours, minutes, and seconds always show two digits in time displays.

#time#clock#hours#minutes#seconds#display#format

const formatTime = (h: number, m: number, s: number) =>
  `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;

formatTime(9, 5, 3);  // '09:05:03'
formatTime(14, 30, 0); // '14:30:00'

Generate invoice numbers with leading zeros

Format sequential IDs into fixed-width reference numbers.

#invoice#order#reference#leading#zeros#sequential#ID

const invoiceNumber = (id: number) => `INV-${String(id).padStart(6, '0')}`;

invoiceNumber(42);    // 'INV-000042'
invoiceNumber(12345); // 'INV-012345'