Java Script String Padding

JavaScript String Padding

In ECMAScript 2017, two new string methods, padStart() and padEnd(), were introduced to JavaScript to facilitate padding at the start and end of a string.

JavaScript String padStart()

The padStart() method adds padding to the beginning of a string.

It adds a specified string (repeated multiple times) to the string until it reaches the desired length.

Example

Add padding to a string using “0” until it reaches a length of 4.

let text = “5”; let padded = text.padStart(4,“0”);

Apply padding to a string using “x” until it attains a length of 4.

let text = “5”; let padded = text.padStart(4,“x”);

Note The padStart() method belongs to the string object. To pad a number, it needs to be converted to a string first. Refer to the example below.

Example

let numb = 5; let text = numb.toString(); let padded = text.padStart(4,“0”);

Browser Support

padStart() is a feature introduced in ECMAScript 2017.

ES2017 has been supported in all modern browsers since September 2017.

padStart() lacks support in Internet Explorer.

JavaScript String padEnd()

The padEnd() method adds padding to the end of a string.

It appends a specified string (repeated multiple times) to the string until it reaches the desired length.

Example

let text = “5”; let padded = text.padEnd(4,“0”);

let text = “5”; let padded = text.padEnd(4,“x”);

Note The padEnd() method belongs to the string object. To pad a number, it needs to be converted to a string first. Refer to the example below.

Example

let numb = 5; let text = numb.toString(); let padded = text.padEnd(4,“0”);

Browser Support

padEnd() is a feature introduced in ECMAScript 2017.

ES2017 has been supported in all modern browsers since September 2017.

padEnd() lacks support in Internet Explorer.

JavaScript String repeat()

The repeat() method generates a string containing a specified number of copies of a given string.

It returns a new string and does not alter the original string.

Example

Generate duplicates of a text.

let text = “Hello world!”; let result = text.repeat(2);

let text = “Hello world!”; let result = text.repeat(4);

Syntax

string.repeat(count)

Parameters

Parameter	Description
count	Required. The number of copies wanted.

Return Value

Type	Description
String	A new string containing the copies.

Browser Support

repeat() is a feature introduced in ES6 (JavaScript 2015).

ES6 has been fully supported in all modern browsers since June 2017.

repeat() lacks support in Internet Explorer.

Replacing String Content

The replace() method substitutes a specified value with another value within a string.

Example

let text = “Please visit Microsoft!”; let newText = text.replace(“Microsoft”, “W3Schools”);

Note The replace() method, when invoked, does not modify the string on which it is called. It returns a new string. Furthermore, the replace() method only replaces the first occurrence. For replacing all occurrences, employ a regular expression with the /g flag. Refer to the examples below.

The replace() method, by default, only replaces the first occurrence.

Example

let text = “Please visit Microsoft and Microsoft!”; let newText = text.replace(“Microsoft”, “Code7Schools”);

By default, the replace() method is case-sensitive. Therefore, attempting to replace “MICROSOFT” (in uppercase) will not succeed.

Example

let text = “Please visit Microsoft!”; let newText = text.replace(“MICROSOFT”, “Code7Schools”);

For case-insensitive replacement, utilize a regular expression with the /i flag.

Example

let text = “Please visit Microsoft!”; let newText = text.replace(/MICROSOFT/i, “Code7Schools”);

Note Regular expressions are written without quotes.

For replacing all occurrences, utilize a regular expression with a /g flag (global match).

Example

let text = “Please visit Microsoft and Microsoft!”; let newText = text.replace(/Microsoft/g, “Code7Schools”);

JavaScript String ReplaceAll()

JavaScript introduced the string method replaceAll() in 2021.

Example

text = text.replaceAll(“Cats”,“Dogs”); text = text.replaceAll(“cats”,“dogs”);

With the replaceAll() method, you can specify a regular expression instead of a string for replacement.

If the parameter is a regular expression, it necessitates setting the global flag (g); otherwise, a TypeError is thrown.

Example

text = text.replaceAll(/Cats/g,“Dogs”); text = text.replaceAll(/cats/g,“dogs”);

Note replaceAll() is a feature introduced in ES2021. However, it is not supported in Internet Explorer.

Converting a String to an Array

To treat a string as an array, you can convert it into an array.

JavaScript String split()

You can convert a string into an array using the split() method.

Example

text.split(“,”)    // Split on commas text.split(” “)    // Split on spaces text.split(“|”)    // Split on pipe

If the separator is omitted, the resulting array will contain the entire string in index [0].

If the separator is “”, the resulting array will consist of individual characters:

Example

text.split(“”)