JavaScript String padStart() Method

Quiz

The JavaScript String padStart() method pads (or extends) the current string with the specified padString to reach the given length. The padding is added at the begining of the current string. It can be repeated multiple times if necessary, and if we do not specify this optional parameter padString to this method, it adds the spaces as padding at the begining of this string to reach the specified length.

When you pad a string, you add characters to the begining of the string until it reaches a certain length.

Syntax

Following is the syntax of JavaScript String padStart() method −

padStart(targetLength, padString)

Parameters

This method accepts two parameters named "targetLength" and "padString", which are described below −

targetLength − The length of the new string.
padString − The string to pad(extend) the current string with.

Return value

This method returns a new string of the specified targetLength, with the padString appended to the begining.

Example 1

If the padString parameter is omitted, it will extend string by adding spaces as padding at the begining of the current string until it reaches the specified targetLength.

In the following example, we are using the JavaScript String padStart() method to pad (extend) a string with added spaces as padding at the begining of this string "TutorialsPoint" until it reaches the specified targetLength 20.

<html>
<head>
<title>JavaScript String padStart() Method</title>
</head>
<body>
<script>
   const str = "TutorialsPoint";
   document.write("Original string: ", str);
   new_str = "";
   document.write("<br>New string length before added padding: ",new_str.length);
   const targetLength = 20;
   document.write("<br>Target Length: ", targetLength);
   //using padStart() method
   new_str = str.padStart(targetLength);
   document.write("<br>New string after padding added to the begining of this string: ", new_str);
   document.write("<br>New string length after added padding: ",new_str.length);
</script>
</body>
</html>

Output

The above program returns a new string padding with spaces at the begining of the string "TutorialsPoint".

Original string: TutorialsPoint
New string length before added padding: 0
Target Length: 20
New string after padding added to the begining of this string: TutorialsPoint
New string length after added padding: 20

Example 2

If both padString and targetLength parameters are passed to this method, it extends the string by adding padString at the begining until it reaches a certain length.

The following is another example of the JavaScript String padStart() method. We use this method to extend this string "Hello World" by adding the specified padString "Hi" at the begining of the string until it reaches the specified targetLength 25.

<html>
<head>
<title>JavaScript String padStart() Method</title>
</head>
<body>
<script>
   const str = "Hello World";
   document.write("Original string: ", str);
   new_str = "";
   document.write("<br>New string length before added padding: ",new_str.length);
   const targetLength = 25;
   const padString = "Hi";
   document.write("<br>Target Length: ", targetLength);
   document.write("<br>Pad string: ", padString);
   //using padStart() method
   new_str = str.padStart(targetLength, padString);
   document.write("<br>New string after padding added to the begining of this string: ", new_str);
   document.write("<br>New string length after added padding: ",new_str.length);
</script>
</body>
</html>

Output

After executing the above program, it will return a new string with added padding at the begining.

Original string: Hello World
New string length before added padding: 0
Target Length: 25
Pad string: Hi
New string after padding added to the begining of this string: HiHiHiHiHiHiHiHello World
New string length after added padding: 25

Print Page