JavaScript padStart() Method

The padStart() method returns a result string that achieves a predetermined length by padding a string with the other string starting at the beginning of the string.

Once a string reaches the specified length, it can be padded with another string using JavaScript's padStart() method. The string's left end is where the padding is applied.

Syntax

The following syntax shows the javascript padStart() method and its input argument.

Parameters: The two parameters that this method accepts are listed above and are described below:

inputLength: This is the length of the string after the padding has been applied to the original string. The original string is returned if the value is less than the length of the original string.
inputString: The string that needs to be padded with the original string is called inputString. This value is trimmed from the end if it is long to place inside the inputLength. The space character ("") is the default character used in strings.

Return Value: It provides the final string lengthened with the supplied string.

Examples

The following examples show the padStart() method and its javascript operation.

Example 1

The example shows the padStart() method and its operation using the javascript function. The input value is less than the required pad length of the mehod.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<script>
let text = "15";
text = text.padStart(5,"0");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "8";
text1 = text1.padStart(5,"0");
document.getElementById("inputdemo1").innerHTML = text1;
</script>
</body>
</html>

Output

The image displayed padStart functions information as an output.

Example 2

The example shows the padStart() method and its operation using the javascript function. The input value shows the difference between the "equal to", "less than," and "more than" the required pad length of the mehod.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<p id = "inputdemo2"></p>
<script>
let text = "15124";
text = text.padStart(5,"0");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "81198643";
text1 = text1.padStart(5,"0");
document.getElementById("inputdemo1").innerHTML = text1;
let text2 = "3";
text2 = text2.padStart(5,"0");
document.getElementById("inputdemo2").innerHTML = text2;
</script>
</body>
</html>

Output

The image displayed padStart functions information as an output.

Example 3

The example shows the padStart() method and its operation using the javascript function.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<p id = "inputdemo2"></p>
<button onclick="clickHere()">
    Click Here
</button>
<script>
function clickHere() {
let text = "JavaTpoint";
text = text.padStart(15,"$");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "JAVASCRIPT";
text1 = text1.padStart(18,"@@");
document.getElementById("inputdemo1").innerHTML = text1;
let text2 = "LEARN";
text2 = text2.padStart(5,"%");
document.getElementById("inputdemo2").innerHTML = text2;
}
</script>
</body>
</html>

Output

The image displayed padStart functions information as an output.

Web Browsers Supported

The list of supported browsers for the padStart() method is as follows:

Google Chrome
Firefox
Edge
Safari
Opera

Conclusion

The padstart() method displays as output value per the required length. This method works for the data management functionality's string and object value size.

Next TopicJavascript promise chaining

← prev next →