JavaScriptのpadStart・padEndで文字列を先頭または後方から指定文字と文字数で埋めて表示する方法｜DAD UNION

JavaScriptのpadStart・padEndを使って文字列を先頭または後方から指定文字と文字数で埋めて表示する方法をご紹介します。
プログラムをコーディングしてるとIDや日付等を全て同じ文字数にあわせて出力したい時があったので、今回はJavaScriptでの文字数揃えの方法になります。
全角文字でも出力できました。

Contents

padStart・padEndで文字列を先頭または後方から指定文字と文字数で埋めて表示するCSS記述
padStart・padEndで文字列を先頭または後方から指定文字と文字数で埋めて表示する出力先HTMLの記述
id=”str1″には先頭から、id=”str2″には後方から指定文字で文字埋めした文字列を出力するJavaScript記述
【padStart,padEnd】文字列を指定文字と文字数で埋めて表示するデモページ

padStart・padEndで文字列を先頭または後方から指定文字と文字数で埋めて表示するCSS記述

※指定文字と文字数で埋めて表示するエリア（#str1,#str2）のCSS記述です。ここは重要では無いので必要に応じて書き換えてください。

<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>

padStart・padEndで文字列を先頭または後方から指定文字と文字数で埋めて表示する出力先HTMLの記述

※id=”str1″とid=”str2″のdivタグに結果の文字列を出力します。

<h1>文字列を先頭または後方から指定文字と文字数で埋めて表示します</h1>
<br>

<h2>文字列”bcd”を先頭から指定文字”a”埋めで、全体文字数7文字で表示した場合</h2>
<div id="str1"></div>

<br>
<br>

<h2>文字列”あいう”を後方から指定文字”え”埋めで、全体文字数7文字で表示した場合</h2>
<div id="str2"></div>

id=”str1″には先頭から、id=”str2″には後方から指定文字で文字埋めした文字列を出力するJavaScript記述

※id=”str1″のdivタグに文字列”bcd”を先頭から指定文字”a”埋めで、全体文字数7文字を出力し、
　id=”str2″のdivタグに文字列”あいう”を後方から指定文字”え”埋めで、全体文字数7文字を出力する処理です。

<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>