How to Pad a String with Leading Zeros in JavaScript

By the end of this page, you will understand how to add leading zeros to a string in JavaScript, why this is often done for formatting, and which approach to use in modern code versus older alternatives.

Padding a string means adding extra characters until it reaches a required length. In this case, the extra character is 0, and it is added to the left side of the string.

This is common when working with values that should have a fixed width, such as:

• invoice numbers like 000123
• dates like 09
• times like 07
• product codes like 0042

In JavaScript, numbers do not preserve leading zeros as numbers. For example, 0007 as a numeric value is just 7. That means if you want to display leading zeros, you usually need to work with a string.

The most direct modern solution is padStart():

const value = "42";
const padded = value.padStart(5, "0");
console.log(padded); // "00042"

Why this matters:

• it keeps output consistent
• it improves readability for users
• it helps format IDs, timestamps, and codes
• it avoids manual looping or repeated string concatenation in simple cases

The key idea is that padding is usually a display or formatting operation, not a mathematical one.

Think of a string as a label printed on a card.

If the card must always be 5 characters wide, and your value is only 42, you fill the empty spaces at the front with zeros until the card is full:

• 42 becomes 00042

So padding is like adding filler to the front of a label until it reaches the required size.

The basic syntax in JavaScript is:

string.padStart(targetLength, padString)

• targetLength: the final length you want
• padString: the text to add at the beginning

Example 1: Pad a numeric string

const id = "42";
console.log(id.padStart(5, "0")); // "00042"

This adds zeros to the left until the string length is 5.

Example 2: Convert a number to a string first

const count = 7;
const result = String(count).padStart(3, "0");
console.log(result); // "007"

Since padStart() works on strings, numbers should be converted first.

Example 3: If the string is already long enough

Consider this code:

const value = 27;
const result = String(value).padStart(5, "0");
console.log(result);

Step by step:

1. value is the number 27.
2. String(value) converts the number into the string "27".
3. "27".padStart(5, "0") checks the current length.
4. The string "27" has length 2.
5. The target length is 5, so JavaScript needs 3 more characters.
6. It adds three 0 characters to the left.
7. The final result is "00027".
8. console.log(result) prints:

00027

Leading zero padding is used in many real applications:

• Clock and date formatting: showing 08 instead of 8
• Order numbers: formatting values like 000154
• Report generation: keeping columns aligned in exported text files
• File naming: creating names like image_001, image_002
• Serial codes: displaying fixed-length identifiers
• Data import/export: matching systems that expect exact string lengths

Example: formatting minutes in a digital clock

const minutes = 5;
console.log(String(minutes).padStart(2, "0")); // "05"

Example: generating file names

for (let i = 1; i <= 3; i++) {
  const fileName = `photo_${String(i).padStart(3, )}.jpg`;
  .(fileName);
}

In real projects, developers usually treat zero-padding as a formatting step near the output layer.

Common patterns include:

Reusable formatter functions

function formatId(id) {
  return String(id).padStart(6, "0");
}

This keeps formatting logic in one place.

Guarding against unexpected input

function formatItemCode(value) {
  if (value === null || value === undefined) {
    return "0000";
  }

  return String(value).padStart(4, "0");
}

This avoids runtime errors when input is missing.

Mapping over arrays

const ids = [3, 21, 105];
const formatted = ids.map( => (id).(, ));
.(formatted); 

1. Calling padStart() on a number

Broken code:

const num = 7;
console.log(num.padStart(3, "0"));

Problem:

• padStart() is a string method, not a number method

Fix:

const num = 7;
console.log(String(num).padStart(3, "0"));

2. Expecting the result to stay a number

const result = String(7).padStart(3, "0");
console.log(result); // "007"

result is a string, not a number. That is usually correct, because leading zeros are for formatting.

padStart() vs manual concatenation

Manual older pattern:

// Basic syntax
string.padStart(targetLength, padString)

// Pad with zeros on the left
"42".padStart(5, "0"); // "00042"

// Convert number to string first
String(7).padStart(3, "0"); // "007"

// Reusable helper
function padWithZeros(value, length) {
  return String(value).padStart(length, "0");
}

Key rules:

• padStart() works on strings
• convert numbers with String(value)
• result is a string
• if the string is already long enough, nothing is added
• padStart() adds to the left
• padEnd() adds to the right

Older alternative:

("000" + value).slice(-3)

How do I add leading zeros to a number in JavaScript?

Convert the number to a string, then use padStart():

String(5).padStart(3, "0"); // "005"

Does padStart() work on numbers?

No. It is a string method. Convert the number first with String() or .toString().

What happens if the string is already longer than the target length?

Nothing is removed. The original string is returned unchanged.

Is the result of zero padding a string or a number?

It is a string. Leading zeros are a formatting feature, not part of numeric value.

How do I pad to 2 digits for dates or times?

Use:

String(value).padStart(2, "0")

Examples: 1 becomes 01, 9 becomes 09.

• Strings — padding is a string operation, so understanding strings is essential.
• Type conversion — numbers usually need to be converted to strings before padding.
• Template literals — often used together with padded values in formatted output.
• Number formatting — related because both are about displaying values clearly.
• Date and time formatting — leading zeros are common for days, months, hours, and minutes.
• String methods — padStart() is one of many useful built-in string methods.
• padEnd — similar method for adding characters to the right side of a string.