今回はJavaScriptで「01」のように数値の桁数を合わせる方法（ゼロパディング）を解説します。
桁数を合わせるゼロパディングのやり方
ゼロパディングはslice()とpadStart()の2種類有名なやり方があるのでどちらも紹介します。
slice()を使う方法
これは結構有名なやり方です。以下のようなコードでokです。
// 1→01のように2桁で合わせる
const num = 1;
const zeroPadding = `0${num}`.slice(-2);
console.log(zeroPadding); // →'01'
// 1→001のように3桁で合わせる
const num = 1;
const zeroPadding = `00${num}`.slice(-3);
console.log(zeroPadding); // →'001'
slice()を文字列に使うと任意の数の文字を切り出せますが、引数にマイナスを渡すと後ろから文字を切り出すので、2桁の場合は
'01'.slice(-2)→'01''010'.slice(-2)→'10'
3桁の場合は
'001'.slice(-3)→'001''0010'.slice(-3)→'010'
という感じで頭を0で埋めることができます。もしゼロパディングの桁数を変えたい場合は頭につける0の数とslice()の引数の桁を変えればokです。
1つ注意点としてはslice()は数値に直接かけることはできないので、テンプレートリテラル``で囲むなり、toString()などで文字列にしてから使いましょう。
padStart()を使う方法
slice()を使うよりも知名度は低い気はしますがこれも簡単です。以下のようなコードでokです。
const num = 1;
const zeroPadding = num.toString().padStart(2, '0');
console.log(zeroPadding); // →'10'
const num = 10;
const zeroPadding = num.toString().padStart(3, '0');
console.log(zeroPadding); // →'010'
文字列.padStart(桁数, 埋める文字)と指定することで任意の文字を任意の桁数分先頭につけることができます。桁数の部分を変えることで3桁や4桁でも0で埋めることができます。
そしてpadStart()も数値にかけることはやはりできないのでtoString()で文字列にしてから処理している点に注意しましょう。
まとめ
ゼロパディングはjsを使っていると結構出てきますが意外と忘れがちなのでぜひ頭に入れておくと便利です！
