数字を指定した桁数まで0埋めする

数字を0埋めした桁数にする

JavaScriptで日付を扱うときなどに、日付などの1桁の「月」や「日」を「04月01日」のように0埋めした2桁の数字にする方法を解説します。

以下のコード例ではパターン1はpadStartメソッドを使う方法、パターン2はsliceメソッドを使う方法になります。
いずれも0で埋めた任意の桁数の数字を取得できるため、使いやすい方法を選択してください。

値の型については、数値（Number）のままでは0埋めすることができないため、上記のいずれの方法も文字列（String）に変換しています。

パターン1：padStartメソッドを使って0埋めする

パターン1では文字列（String）に標準で用意されているpadStartメソッドを使う方法です。
値は文字列（String）である必要があるため、あらかじめtoStringメソッドを使って文字列に変換します。

padStartメソッドを使う方法では第1パラメータに桁数、第2パラメータに埋める文字を指定します。
例えば4桁にしたい場合は第1パラメータに4を指定します。

JS コード例

// パターン1 padStartメソッドを使う
let month = 4;
let day = 1;

month = month.toString().padStart( 2, '0');
day = day.toString().padStart( 2, '0');

console.log(month + '月' + day + '日'); // 04月01日

パターン2：sliceメソッドを使って0埋めする

パターン2ではsliceメソッドを使う方法です。
こちらも値は文字列（String）、または配列である必要があるため、あらかじめ「('0'+day)」で文字列連結を実行して値を文字列（String）に変換します。

sliceメソッドは第1パラメータで指定した数値の開始位置から値を取得します。
正の整数の場合は先頭から値を取得しますが、今回のように負の値を指定すると末尾から数えた値を取得することができます。

例えば、「12345」という文字列にslice(2)を実行すると「345」を取得できますが、slice(-2)で実行すると「45」を取得できます。
末尾から数えて文字列を取得することで、1月〜9月の「01」のような2桁の文字列の場合と、10月以降の「010」の3桁の文字列の場合のいずれも等しく2桁の文字列を取得することができます。

JS コード例

// パターン2 sliceメソッドを使う
let month = 7;
let day = 9;

month2 = ('0'+month).slice(-2);
day2 = ('0'+day).slice(-2);

console.log(month + '月' + day + '日'); // 07月09日

3桁以上の数字を0埋めする

パターン1、パターン2のいずれの方法も2桁以上の任意の桁数を指定することができます。
以下の例では10桁の数字になるよう0埋めします。

sliceメソッドは第1パラメータで指定した数値の開始位置から値を取得します。
正の整数の場合は先頭から値を取得しますが、今回のように負の値を指定すると末尾から数えた値を取得することができます。

例えば、「12345」という文字列にslice(2)を実行すると「345」を取得できますが、slice(-2)で実行すると「45」を取得できます。
末尾から数えて文字列を取得することで、1月〜9月の「01」のような2桁の文字列の場合と、10月以降の「010」の3桁の文字列の場合のいずれも等しく2桁の文字列を取得することができます。

JS コード例

let test = 1234567;

// パターン1 padStartメソッドを使う
console.log( test.toString().padStart( 10, '0') ); // 0001234567

// パターン2 sliceメソッドを使う
console.log( ('000000000' + test).slice(-10) ); // 0001234567

0以外の文字で埋める

今回は数字を扱ってきましたが、補足として0以外の文字で文字数を埋めることも可能です。
以下の例では「*」で10桁になるまで埋めます。

JS コード例

let test = 1234567;

// パターン1 padStartメソッドを使う
console.log( test.toString().padStart( 10, '*') ); // ***1234567

// パターン2 sliceメソッドを使う
console.log( ('*********' + test).slice(-10) ); // ***1234567

以上、指定した桁数まで数字を0埋めする方法についてでした。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。