The padStart() method in JavaScript is used to pad the current string with another string (the padString) until the resulting string reaches the specified length (targetLength). This method is helpful for ensuring that strings have a consistent length, particularly for formatting output or aligning text.

Syntax:

string.padStart(targetLength, padString)

• targetLength: The desired length of the resulting string after padding. If the length of the original string is greater than or equal to this value, the method returns the original string unchanged.
• padString (optional): The string to pad the current string with. If this parameter is not provided, the default value is a space character (' '). The padString will be truncated if its length exceeds the remaining space required to reach the targetLength.

Return Value:

• Returns a new string that is the original string padded on the left side with the padString until it reaches the targetLength.

Example 1: Basic Usage

let str = "World";
let paddedStr = str.padStart(10, "Hello ");

console.log(paddedStr); // "Hello World"

In this example, the string "World" is padded with "Hello " on the left side until it reaches a total length of 10 characters.

Example 2: Default Padding with Spaces

If you do not provide a padString, the method will use a space as the default padding character.

let str = "Hello";
let paddedStr = str.padStart(10);

console.log(paddedStr); // "     Hello"

Here, the string is padded with spaces to the left.

Example 3: Padding with a Longer String

If the padString is longer than the required padding, it will be truncated to fit the remaining space.

let str = "42";
let paddedStr = str.padStart(5, "0");

console.log(paddedStr); // "00042"

In this case, the string "42" is padded with zeros until it reaches a total length of 5 characters.

Example 4: Target Length Less Than Original Length

If the original string is longer than the specified targetLength, padStart() returns the original string unchanged.

let str = "Hello, World!";
let paddedStr = str.padStart(10, "!");

console.log(paddedStr); // "Hello, World!"

Here, the original string has a length of 13, so it remains unchanged.

Example 5: Practical Use Case (Formatting Output)

You can use padStart() for formatting tabular data or aligning text in output.

let items = [
    { id: 1, name: "Apple", price: "1.20" },
    { id: 2, name: "Banana", price: "0.80" },
    { id: 3, name: "Cherry", price: "2.50" },
];

items.forEach(item => {
    console.log(item.id.toString().padStart(3) + ": " + item.name.padEnd(10) + item.price);
});

Output:

  1: Apple     1.20
  2: Banana    0.80
  3: Cherry    2.50

In this example, the IDs are padded to a consistent length on the left, and the names are padded to a consistent length on the right, making the output easier to read.

Summary:

• The padStart() method is used to pad the start of a string with a specified string until it reaches a given length.
• It takes two parameters: targetLength (the desired length) and padString (the string to pad with).
• If the original string is longer than targetLength, it remains unchanged.
• This method is useful for formatting strings, especially for creating aligned output in console applications or text displays.