【padStart,padEnd】文字列を先頭または後方から指定文字と文字数で埋めて表示

【padStart,padEnd】文字列を先頭または後方から指定文字と文字数で埋めて表示

プログラムをコーディングしてるとIDや日付等を全て同じ文字数にあわせて出力したい時があったので、今回はJavaScriptでの文字数揃えの方法になります。
全角文字でも出力できました。

処理を実行させるクリックボタンのCSS記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

出力先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>

デモページ

【padStart,padEnd】文字列を指定文字と文字数で埋めて表示するデモ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。