JavaScript Tips | 文字列ユーティリティ：業務用 － 数値ゼロ埋め

JavaScript JavaScript
スポンサーリンク

何をしたいユーティリティか：「数値ゼロ埋め」

ここでの「数値ゼロ埋め」は、「桁数をそろえるために、足りない分を左側に 0 を付ける」ユーティリティです。

1 → "01"（2 桁）
12 → "012"（3 桁）
123 → "000123"（6 桁）

業務だと、伝票番号・社員番号・コード・日付（20240101 など）を「固定桁」で扱うことが多いので、
「ゼロ埋めはこの関数一択」という形にしておくと、コードもデータも安定します。

ゼロ埋めの基本的な考え方

「最小桁数」を決めて、足りない分だけ 0 を付ける

ゼロ埋めでやりたいことは、とてもシンプルです。

  1. 「最低何桁にしたいか」を決める（例：4 桁）。
  2. 元の数値を文字列にする（例："23"）。
  3. 桁数が足りなければ、左側に 0 を付けて埋める（例："0023"）。

ポイントは、「元の値は変えず、見た目の桁数だけそろえる」ということです。
計算に使うときは数値、表示やコードとして扱うときはゼロ埋め文字列、と役割を分けます。

一番シンプルなゼロ埋め関数

padZero の実装（正の整数前提）

まずは、正の整数（または 0）を前提にした、基本形から作ります。

function padZero(value, length) {
  if (value == null) {
    return "";
  }

  const str = String(value);

  if (str.length >= length) {
    return str;
  }

  const zeros = "0".repeat(length - str.length);

  return zeros + str;
}
JavaScript

重要なポイントをかみ砕いて説明する

1. まずは文字列にしてしまう

const str = String(value);
JavaScript

1 でも "1" でも、String(value) にしてしまえば "1" という文字列として扱えます。
ゼロ埋めは「文字列の長さ」を基準にするので、最初に文字列化するのが基本です。

2. すでに十分な桁数なら、そのまま返す

if (str.length >= length) {
  return str;
}
JavaScript

例えば、「4 桁にしたい」のに、すでに "1234" や "12345" なら、
それ以上 0 を付ける必要はありません。

ここで早めに返しておくことで、余計な処理を避けられます。

3. 足りない桁数だけ 0 を作る

const zeros = "0".repeat(length - str.length);
JavaScript

"0".repeat(n) は、「0 を n 個並べた文字列」を作るメソッドです。

length = 4、str.length = 2 のとき、"0".repeat(2) → "00" になります。

4. 左側に 0 をくっつける

return zeros + str;
JavaScript

"00" + "23" → "0023" のように、左側に 0 を付けて完成です。

実際の動きを例で確認する

padZero(1, 2);        // "01"
padZero(12, 2);       // "12"
padZero(12, 3);       // "012"
padZero(123, 6);      // "000123"
padZero("7", 4);      // "0007"
padZero(2024, 4);     // "2024"
padZero(2024, 2);     // "2024"（すでに 4 桁なのでそのまま）
JavaScript

「指定した桁数より短ければ 0 を付ける」「長ければそのまま」という動きになっているのが分かると思います。

マイナス値をどう扱うか

マイナスを許容する padZero の拡張

業務によっては、マイナス値もゼロ埋めしたいことがあります。
その場合は、符号と本体を分けて、本体だけゼロ埋めするのが分かりやすいです。

function padZeroSigned(value, length) {
  if (value == null) {
    return "";
  }

  const str = String(value);

  const sign = str.startsWith("-") ? "-" : "";
  const unsigned = sign ? str.slice(1) : str;

  if (unsigned.length >= length) {
    return sign + unsigned;
  }

  const zeros = "0".repeat(length - unsigned.length);

  return sign + zeros + unsigned;
}
JavaScript

使い方と結果はこんな感じです。

padZeroSigned(-5, 3);      // "-005"
padZeroSigned(-123, 3);    // "-123"
padZeroSigned(-123, 5);    // "-00123"
padZeroSigned(7, 3);       // "007"
JavaScript

符号はそのまま、数字部分だけゼロ埋めされているのが分かると思います。

実務でのよくある使いどころ

固定桁のコード・番号

伝票番号、社員番号、商品コードなどを「固定桁」で扱うときに、ゼロ埋めはほぼ必須です。

const id = 23;
const code = padZero(id, 6);  // "000023"
JavaScript

DB や外部システムと「6 桁固定でやり取りする」ような場合、
このユーティリティを通しておけば、桁数のズレを防げます。

日付や時刻のフォーマット

日付や時刻のフォーマットでも、ゼロ埋めはよく使います。

function formatDateYmd(date) {
  const y = date.getFullYear();
  const m = padZero(date.getMonth() + 1, 2);
  const d = padZero(date.getDate(), 2);

  return `${y}${m}${d}`;   // 例: "20240105"
}

function formatTimeHm(date) {
  const h = padZero(date.getHours(), 2);
  const m = padZero(date.getMinutes(), 2);

  return `${h}:${m}`;      // 例: "09:05"
}
JavaScript

1 月 5 日 を "20240105" にしたり、9:5 を "09:05" にしたりするのは、
まさに「数値ゼロ埋め」の典型的な用途です。

String.prototype.padStart との関係

実は、モダンな JavaScript には padStart というメソッドがあり、
ゼロ埋めはこれ一発で書けます。

"23".padStart(4, "0");   // "0023"
"7".padStart(3, "0");    // "007"
JavaScript

これを使えば、padZero はもっと短く書けます。

function padZero(value, length) {
  if (value == null) {
    return "";
  }

  return String(value).padStart(length, "0");
}
JavaScript

ただし、padStart は「文字列に対して使うメソッド」なので、
「null をどうするか」「マイナスをどうするか」などのルールは、
やはり自分で決めておく必要があります。

だからこそ、業務では「自分たちのルールを持った padZero を 1 個定義しておく」のが安心です。

設計として意識してほしいこと

一つ目は、「ゼロ埋めはあくまで表示・コード用」ということです。
計算に使うときは数値、
外部とのやり取りや表示に使うときはゼロ埋め文字列、
と役割を分けておくと、バグが減ります。

二つ目は、「桁数のルールを定数化する」ことです。
例えば、社員番号は 6 桁、伝票番号は 10 桁、のようなルールがあるなら、

export const EMPLOYEE_CODE_LENGTH = 6;
export const ORDER_NO_LENGTH = 10;
JavaScript

のように定数にしておき、
padZero(id, EMPLOYEE_CODE_LENGTH) のように使うと、
「どこでも同じ桁数」が保証しやすくなります。

少し手を動かして感覚をつかむ

コンソールで、次のようなコードを実際に打ってみてください。

padZero(1, 2);
padZero(12, 2);
padZero(12, 3);
padZero(123, 6);

padZeroSigned(-5, 3);
padZeroSigned(-123, 3);
padZeroSigned(-123, 5);

String(7).padStart(3, "0");
JavaScript

「どの値がどうゼロ埋めされるか」「マイナスがどう扱われるか」を、自分の目で確認してみてください。

そのうえで、自分のプロジェクトに

export function padZero(...) { ... }
export function padZeroSigned(...) { ... }
JavaScript

を置いて、

「桁をそろえたい」と思ったら、
生の文字列操作ではなく、必ずこの“数値ゼロ埋めユーティリティ”を通す、というルールを作ってみてください。

それだけで、あなたのコードや番号の扱いは、
場当たり的な "0" + value から、
意図と一貫性を備えた“業務レベルのゼロ埋め処理”に変わっていきます。

スポンサーリンク
タイトルとURLをコピーしました