JavaScriptで数値を0埋め（パディング）するモダンな書き方まとめ

JavaScriptで数値を扱う際、桁数を揃えるために先頭を0で埋める「0埋め（パディング）」は頻繁に求められる処理です。

日付の表示やIDの管理、ログの出力など、データを読みやすく整えるために欠かせません。

かつては独自の関数を作成したり、複雑な計算を組み合わせたりすることが一般的でしたが、現在のJavaScriptでは非常に簡潔に記述できるようになりました。

本記事では、モダンなJavaScriptにおいて推奨される0埋めの手法について、具体的なコード例を交えながら詳しく紹介します。

開発シーンに合わせた最適な選択ができるよう、それぞれの特徴を整理していきましょう。

padStart() メソッドを使った標準的な0埋め

現在のJavaScript開発において、最も一般的で利用しやすい手法が padStart() メソッドを使用する方法です。

このメソッドはECMAScript 2017（ES8）で導入され、文字列の先頭を指定した文字で埋める機能を持っています。

数値に対して直接使用することはできませんが、数値を文字列に変換することで簡単にパディングを適用できます。

// 数値を文字列に変換してから padStart を適用する
const num = 7;
const zeroPadded = String(num).padStart(3, '0');

console.log(zeroPadded);

"007"

padStart() の基本的な構文と仕組み

padStart() の第一引数には「最終的な文字列の長さ」を指定し、第二引数には「埋める文字」を指定します。

第二引数を省略した場合はデフォルトで半角スペースが使用されるため、0埋めを行いたい場合は必ず ‘0’ を指定する必要があります。

このメソッドの利点は、元の文字列が既に指定した長さを超えている場合には、何も処理を行わずに元の文字列をそのまま返す点にあります。

エラーが発生しにくく、非常に安全な設計となっているのが特徴です。

数値を文字列へ変換するバリエーション

padStart() を利用するためには、数値を String 型へ変換するステップが必要不可欠です。

一般的には String() 関数や toString() メソッドが使われますが、テンプレートリテラルを活用する方法もスマートです。

const target = 42;

// テンプレートリテラルを使用して文字列化と同時にパディング
const formatted = `${target}`.padStart(5, '0');

console.log(formatted);

"00042"

このように、テンプレートリテラルを用いるとコードが短くなり、可読性が向上する場合があります。

Intl.NumberFormat による高度な数値整形

より厳格な数値フォーマットや、多言語対応を視野に入れた開発では Intl.NumberFormat オブジェクトが非常に強力です。

このオブジェクトを使用すると、ロケールに応じた数値の区切り文字や通貨表記だけでなく、最小整数桁数の指定も簡単に行えます。

単なる文字列操作ではなく「数値としての整形」を行う場合に適した手法です。

// 最小整数桁数を3桁に設定する
const formatter = new Intl.NumberFormat('en-US', {
  minimumIntegerDigits: 3,
  useGrouping: false // カンマ区切りを無効化
});

console.log(formatter.format(5));
console.log(formatter.format(12));
console.log(formatter.format(123));

"005"
"012"
"123"

minimumIntegerDigits オプションの活用

Intl.NumberFormat のオプションである minimumIntegerDigits は、整数の最小桁数を指定するプロパティです。

指定した桁数に満たない場合、自動的に先頭が0で埋められる仕組みになっています。

この方法のメリットは、一度フォーマッターを作成してしまえば、複数の数値に対して再利用が可能であるという点です。

大量のデータを一括で整形する場合、ループ内で毎回文字列変換を行うよりも構造的で分かりやすいコードになります。

Intl.NumberFormat を使うべきケース

単純な0埋めであれば padStart() で十分ですが、以下のようなケースでは Intl.NumberFormat の使用を検討してください。

• プロジェクト全体で統一された数値フォーマットを定義したい場合
• 小数点以下の桁数制御（minimumFractionDigits）と同時に行いたい場合
• 多言語対応が必要なアプリケーションを構築している場合

特に、金融系のアプリケーションや統計データを扱うシステムでは、数値の表現規則が厳密に定められていることが多いため、標準APIである Intl の活用が推奨されます。

古典的な手法とその課題

モダンなメソッドが登場する以前、JavaScriptでは slice() メソッドを利用した手法が広く使われていました。

具体的には、あらかじめ十分な数の ‘0’ を連結し、後ろから必要な桁数分を切り出すというトリッキーな方法です。

const val = 8;
// "00" と数値を連結して、末尾から2文字を取得
const legacyPadded = ('00' + val).slice(-2);

console.log(legacyPadded);

"08"

なぜ現在は非推奨に近いのか

この手法は動作こそ高速ですが、コードの意図が直感的に伝わりにくいという欠点があります。

また、パディングしたい桁数が動的に変わる場合、連結する文字列（’00’など）を柔軟に変更するロジックが必要になり、コードが複雑化しがちです。

現代のブラウザ環境やNode.js環境であれば、あえてこの手法を選択する理由はほとんどありません。

可読性とメンテナンス性を重視し、モダンな padStart() もしくは Intl.NumberFormat を採用しましょう。

実践的な利用シーン別の実装例

ここからは、実際のアプリケーション開発でよく遭遇する具体的な0埋めのユースケースを見ていきましょう。

時刻の表示（hh:mm:ss形式）

デジタル時計の表示やタイマーの実装では、1桁の数字を常に2桁で表示する必要があります。

function formatTime(h, m, s) {
  const pad = (n) => String(n).padStart(2, '0');
  return `${pad(h)}:${pad(m)}:${pad(s)}`;
}

console.log(formatTime(9, 5, 1));

"09:05:01"

このように、短いヘルパー関数を定義しておくことで、コードの重複を避けてスッキリと記述できます。

日付の整形（YYYY/MM/DD形式）

カレンダー機能やログのタイムスタンプなど、日付を整形する際にも0埋めは必須です。

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');

console.log(`${year}/${month}/${day}`);

"2026/05/20"

JavaScriptの Date オブジェクトは月が0から始まるため、+ 1 を忘れないように注意が必要です。

商品コードや会員番号の生成

特定の桁数で固定されたIDを生成する場合、元の数値の大きさに左右されずにフォーマットを維持することが重要です。

こうした表のような管理が必要なシステムでは、データの整合性を保つためにパディング処理が不可欠となります。

パフォーマンスと注意点

大量のデータ（数百万件など）に対して0埋めを行う場合、パフォーマンスが気になるかもしれません。

しかし、通常のWebアプリケーションにおけるUI表示程度の頻度であれば、どの手法を用いても体感できるほどの差はありません。

それよりも、負の数に対する挙動には注意が必要です。

負の数におけるパディングの挙動

padStart() を負の数に対してそのまま使用すると、マイナス記号も含めて一文字としてカウントされます。

const negativeNum = -5;
console.log(String(negativeNum).padStart(3, '0'));

"-05" // "-5" 全体で3文字になるよう '0' が追加される

もし「-005」のように、符号を除いた数字部分だけを0埋めしたい場合は、符号を一度切り離して処理する工夫が必要です。

こうしたエッジケースを考慮する必要がある場合は、自作のラップ関数を用意することをお勧めします。

まとめ

JavaScriptにおける0埋めの処理は、開発効率とコードの読みやすさを両立するために非常に重要な要素です。

現代的な開発においては、文字列メソッドである padStart() を活用するのが最もシンプルで推奨される方法です。

一方で、より複雑な数値整形や国際化が必要なプロジェクトでは、Intl.NumberFormat がその真価を発揮します。

従来の slice() を使ったハック的な手法は、現代ではメンテナンス性の観点から避けるべきでしょう。

それぞれのメソッドの特性を正しく理解し、用途に合わせて最適な手法を選択することで、堅牢でクリーンなコードを維持することができます。

本記事で紹介したテクニックを活用して、ぜひ日々のJavaScript開発に役立ててください。