勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで数字をゼロパディング(ゼロ埋め)する方法

   2026/09/15  JavaScript

JavaScriptで予め桁数を決めておいて、桁数未満の場合は0で埋めたい場合の対応方法をメモ。

 

対応方法

推奨対応方法

console.log(String(1).padStart(5, '0')); // 00001
console.log(String(15).padStart(5, '0')); // 00015
console.log(String(777).padStart(8, '0')); // 00000777

古めの対応方法

console.log(zeroPadding(1)); // 00001
console.log(zeroPadding(15)); // 00015
console.log(zeroPadding(777, 8)); // 00000777

function zeroPadding(num, digit = 5){
    if (!num || !digit || num.length === digit) {
        return num;
    }

    // 空文字をつけてString型の変換
    num += '';

    for (let i = num.length; i < digit; i++) {
        num = '0' + num;
    }

    return num;
}

 

リファレンス

String.prototype.padStart()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

 

参考サイト

http://tagamidaiki.com/javascript-0-chink/

 - JavaScript

  関連記事

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法
leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法
ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法

普段何らかのサイトを見る際はAdBlock等の広告ブロッカー系プラグインを導入し ...

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...