The function padStart generates a new string that reaches a specific length by adding characters from another string at the start of the original string.
When a string reaches a certain length, JavaScript's padStart function can be utilized to add additional characters to the beginning of the string in order to meet the desired length.
Syntax
Below is an example demonstrating the utilization of the JavaScript method padStart along with its input parameter.
string.padStart(inputLength, inputString);
Input Parameters: The method takes in two parameters as outlined below:
-
paddingLength: This parameter defines the final length of the string after padding is applied to the original string. If the value is smaller than the length of the original string, the original string is returned as is.
-
originalString: Referred to as originalString, this is the string that requires padding to reach the specified length. If the original string exceeds the padding length, it will be truncated accordingly. By default, the space character (" ") is utilized for padding.
The return value of this function is the resulting string that has been extended by the additional supplied string.
Examples
Illustrative instances below demonstrate the utilization and functionality of the padStart method in JavaScript.
Example 1
The demonstration illustrates the functionality of the padStart method in JavaScript. In this scenario, the input value is shorter than the specified padding length expected by the method.
<!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 information output presented by the padStart functions is depicted in the image.
Example 2
The following example illustrates the utilization of the padStart method in JavaScript. It demonstrates how the method functions with varying input values in relation to the specified pad length, including scenarios where the input is equal to, less than, or greater than the required pad length.
<!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 output showcases details related to the padStart method.
Example 3
The illustration demonstrates the utilization of the padStart method through a 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 = "Example";
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 output showcases details regarding the padStart function.
Web Browsers Supported
The list of supported browsers for the padStart method is as follows:
- Google Chrome
- Firefox
- Edge
- Safari
- Opera
Conclusion
The padstart function generates an output value that meets a specified length requirement. It is applicable for adjusting the size of string and object values within data management operations.