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
参考サイト
関連記事
-
-
構造化データ(JSON-LD形式)をJavaScriptで動的に描写する方法
あるサイトに構造化データをJSON-LD形式で出力させたかった。ただ、当該環境で ...
-
-
Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法
Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...
-
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
-
JavaScriptで特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法
JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書 ...
-
-
クロスドメイン環境のiframeで子フレームから親フレームに値を渡す方法
クロスドメインの環境でiframeを使用しており、子フレーム側から親フレーム側に ...