JavaScript

JavaScriptで0埋め:slice()による数値フォーマット完全ガイド

JavaScriptのslice()メソッドを使用して、数値を指定した桁数でゼロ埋め表示する方法を簡単に解説します。このテクニックは、フォーム入力や表示の整形において非常に便利です。

ゼロ埋めとは?

ゼロ埋めとは、数値を特定のフォーマットに合わせるために、数字の前にゼロを追加することを指します。例えば、日付や時間、順序番号などを整形する際によく使用されます。

CSSでのスタイリング

表示エリアには、クリアで読みやすいスタイルを適用することが重要です。以下は、ゼロ埋めされた数値の出力エリア(#output)をスタイリングするためのCSSの例です。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.8em;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
#output{
  color: red;
  font-weight: bold;
}
</style>

HTMLマークアップの構築

ユーザーに表示する数値は、適切にマークアップされたHTMLエレメント内に配置されるべきです。以下は、ゼロ埋めされた数値を表示するためのHTML構造の基本です。

<h1>数値を指定桁数で先頭からゼロ埋めします。</h1>

<div>数値「123456」を10桁指定で、<br>ゼロ埋めした出力結果が以下になります。</div>
<br>
<div id="output"></div>

JavaScriptのslice()による実装

slice()メソッドは、配列の一部を抽出するのに使われますが、ここでは文字列のフォーマットに応用します。以下の関数digitAlignment()は、数値と桁数を受け取り、指定された桁数に合わせてゼロ埋めを行います。
slice()は配列の一部を指定範囲で返すメソッドです。slice(-桁数)は数値の末尾から指定桁数分返します。

<script>
// num:数値 digit:桁数
function digitAlignment(num, digit){
  var zeroFormat = (Array(digit).join('0') + num).slice(-digit);
  return zeroFormat;
}

//id="output"に出力結果(戻り値)を表示
document.getElementById('output').innerHTML=digitAlignment(123456, 10);
</script>

JavaScriptのsliceを使って数値を指定桁数で先頭からゼロ埋め表示するデモページ

理論だけでなく、実際に動作するデモを見ることで、より理解が深まります。以下のリンクから、slice()メソッドを使用したゼロ埋めのデモページをご覧いただけます。

JavaScriptのsliceを使って、数値を指定桁数で先頭からゼロ埋め表示するデモページ

まとめ

この記事では、JavaScriptのslice()を使った数値のゼロ埋め表示方法について解説しました。この手法をマスターすることで、あらゆる数字の表示をプロフェッショナルに整形することができます。

 

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