JavaScript

JavaScriptの文字列操作完全ガイド：padStart・padEndを使った効果的な文字列の整形方法

  /

JavaScriptのテクニックとして、「padStart」と「padEnd」を用いて文字列を簡単に整形する方法について、初心者にも分かりやすく解説します。
プログラミングの世界では、時にIDや日付などのデータを一定の形式で表示したい場面が多々あります。今回は、そんな時に役立つJavaScriptの便利な機能を紹介します。
全角文字にも対応しているので、日本語での利用も可能です。

Contents

文字列を整形するJavaScriptの技術

JavaScriptには、文字列を特定の長さに整形する「padStart」と「padEnd」というメソッドがあります。これらのメソッドを使うと、指定した長さに満たない文字列に対して、先頭または末尾に特定の文字を追加して長さを調整することができます。

CSSでのスタイリング

まずは、整形された文字列を表示するための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>

　
指定文字と文字数で埋めて表示するエリア（#str1,#str2）のCSS記述です。

HTMLでの文字列表示

次に、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>

JavaScriptでの文字列整形

最後に、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】文字列を指定文字と文字数で埋めて表示するデモページ

以下のリンクから、実際に「padStart」と「padEnd」を使って文字列を整形するデモページをご覧いただけます。実際にコードがどのように機能するのかを確認することができます。

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

まとめ

JavaScriptの「padStart」と「padEnd」は、特にデータの表示形式を整える際に非常に便利な機能です。この記事で紹介した方法を活用すれば、プログラミング初心者でも簡単に文字列を整形することができます。実際に手を動かしながら試してみることで、より理解が深まるでしょう。

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

padStart padEnd 文字埋め
関連記事