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

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

Contents

ゼロ埋めとは？
CSSでのスタイリング
HTMLマークアップの構築
JavaScriptの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>