JavaScriptで数字をゼロパディング(ゼロ埋め)する方法
2026/09/15
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
参考サイト
関連記事
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...
-
-
Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法
先日「leaflet-tag-filter-button」プラグインのCDN呼び ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...