JavaScript

JavaScript String Manipulation Complete Guide: Effective Formatting Using padStart and padEnd

 

This article provides an easy-to-understand explanation for beginners on how to use “padStart” and “padEnd” to format strings in JavaScript. In the programming world, there are many occasions when you want to display data like IDs or dates in a specific format. This guide introduces a useful JavaScript feature for such situations. It’s also compatible with full-width characters, making it usable in Japanese as well.

Contents
  1. JavaScript Techniques for Formatting Strings
  2. Styling with CSS
  3. Displaying Strings in HTML
  4. String Formatting with JavaScript
  5. [padStart, padEnd] Demo Page for Displaying Strings Filled with Specified Characters and Length
  6. Conclusion

JavaScript Techniques for Formatting Strings

JavaScript includes methods called “padStart” and “padEnd” for formatting strings to a specific length. Using these methods, you can add specific characters to the beginning or end of a string to adjust its length.

Styling with CSS

First, set up CSS to display the formatted strings. Here, simple styling is applied, but feel free to customize it as needed.

<style type="text/css">
body {
  font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1 {
  font-size: 26px;
  text-align: center;
  font-weight: normal;
  padding: 10px 0 20px 0;
  line-height: 1.4em;
}
h2 {
  font-size: 20px;
}
#str1, #str2 {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: red;
}
</style>

The CSS description for the display areas (#str1, #str2) specifies the characters and number of characters to fill.

Displaying Strings in HTML

Next, create a space to display formatted strings using HTML. The code below demonstrates two different examples. The results are output to the div tags with id=”str1″ and id=”str2″.

<h1>Display strings filled with specified characters and length from the beginning or the end</h1>
<br>

<h2>Example: Displaying the string "bcd" filled with the character "a" from the beginning to a total length of 7 characters</h2>
<div id="str1"></div>

<br>
<br>

<h2>Example: Displaying the string "あいう" filled with the character "え" from the end to a total length of 7 characters</h2>
<div id="str2"></div>

String Formatting with JavaScript

Finally, use JavaScript to format strings. This process outputs the string “bcd” filled with the character “a” from the beginning to a total length of 7 characters in the div tag with id=”str1″. Similarly, the string “あいう” is filled with the character “え” from the end to a total length of 7 characters in the div tag with id=”str2″.

The following script demonstrates filling a string with specific characters to adjust it to the required length:

<script type="text/javascript">
var str1 = "bcd";
document.getElementById("str1").innerHTML = str1.padStart(7, "a");

var str2 = "あいう";
document.getElementById("str2").innerHTML = str2.padEnd(7, "え");
</script>

[padStart, padEnd] Demo Page for Displaying Strings Filled with Specified Characters and Length

Click the link below to view a demo page that uses “padStart” and “padEnd” to format strings. You can see how the code functions in action.

[padStart, padEnd] Demo for Displaying Strings Filled with Specified Characters and Length

Conclusion

JavaScript’s “padStart” and “padEnd” are extremely useful features, especially for formatting data display. By utilizing the methods introduced in this article, even programming beginners can easily format strings. Practicing hands-on will deepen your understanding.

※ Please use this content at your own responsibility if reused. Do not copy the Google Analytics tag in the head tag of the demo page.

padEnd padStart
RELATED POST