JavaScript Pad String Left - JavaScript

Introduction

In JavaScript, we often need to manipulate strings by padding them with additional characters on the left side. This can be useful in various scenarios, such as aligning text or formatting numbers. One common way to achieve this is by using the padStart() method, introduced in ECMAScript 2017.

The padStart() Method

The padStart() method is a built-in function in JavaScript that allows us to pad a string with a specified character or characters on the left side. It takes two parameters:

1. targetLength: The length of the resulting padded string.
2. padString (optional): The character or characters to use for padding. If not provided, the string will be padded with spaces.

Here is the general syntax of the padStart() method:

string.padStart(targetLength[, padString])

Let's see some examples to understand how it works.

Example 1: Padding with Spaces

const originalString = 'Hello';
const paddedString = originalString.padStart(10);

console.log(paddedString);  // Output: "     Hello"

In this example, we have an original string "Hello" and we want to pad it with spaces on the left side to make the total length 10 characters. The resulting padded string is " Hello".

Example 2: Padding with Custom Characters

const originalString = 'JavaScript';
const paddedString = originalString.padStart(15, '+');

console.log(paddedString);  // Output: "++++JavaScript"

In this example, we are padding the string "JavaScript" with the custom character + on the left side to make it 15 characters long. The resulting padded string is "++++JavaScript".

Example 3: Handling Oversized Target Length

const originalString = 'Hello';
const paddedString = originalString.padStart(3);

console.log(paddedString);  // Output: "Hello"

When the targetLength is smaller than the original string length, the padStart() method returns the original string as it is, without any padding.

Conclusion

The padStart() method in JavaScript provides a convenient way to pad strings with additional characters on the left side. It helps in aligning text and formatting data. By specifying the target length and pad string, we can easily achieve the desired padding effect. Remember to use this method whenever you need to manipulate strings in your JavaScript projects.

For more details and advanced usage, refer to the MDN web docs on padStart().