【JavaScript】日付などの数値を0埋めして桁数を揃える方法

月や日などが1桁の場合、先頭を0埋め（ゼロパディング）して1を01のように表記したいことがあります。

今回は、JavaScriptで0埋めを実現してくれるpadStart()とpadEnd()メソッドをサンプルコードで解説します。

padStart()で左（先頭）から0埋め

padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

String.prototype.padStart()

使い方

padStart()メソッドを使って前から0埋めする場合は、第1引数に桁数を指定し、第2引数に埋め合わせに使う文字（今回は0埋めなので0）を指定します。

// 月を2桁に0埋め
const month = '1';
console.log(month.padStart(2, '0')); // '01'

数値（Number型）を0埋めする場合

padStart()メソッドはStringオブジェクトのメソッドです。もしNumber型を0埋めしたい場合は、toString()メソッドでString型に変換してからpadStart()メソッドを呼び出します。

// 数値を2桁に0埋め
const day = 1;
console.log(day.toString().padStart(2, '0')); // '01'

padEnd()で右（末尾）から0埋め

padEnd() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の末尾から適用されます。

String.prototype.padEnd()

基本的な例

padEnd()メソッドを使って後ろから0埋めする場合は、第1引数に桁数を指定し、第2引数に埋め合わせに使う文字（今回は0埋めなので0）を指定します。

// 3桁に0埋め
console.log('1'.padEnd(3, '0')); // '100'