zeropaddingを丁寧に解説

zeropaddingとは

数字の桁数をそろえるためにゼロを付けるやつ

いろんなところで見かけるコード

//ES2015

const zeroPadding = (number, length) => {
    return (Array(length).join('0') + number).slice(-length);
};

zeroPadding(51,3); //051

numberに桁をそろえたい任意の数字、lengthに任意の桁数を入れる

初心者(私)向け解説

空の配列を作成して文字列'000…'を作り、任意の数字と連結する

//number = 51, length=3 の場合

Array(3)//empty×3　空の要素3個の配列を作成

Array(3).join('0') //00 配列の空の要素をすべて文字列'0'で連結

Array(3).join('0') + number //0051 '00'と51が連結して文字列'000051'となる

Array()とは

配列を作るには　new Array() する方法と　[] する方法がある。
普段は[]のほうが簡潔でオススメらしい。
let t = [];//空の配列

今回のように空の要素を複数個格納したい時は[]が使えない。
let t = [3];//1つの要素3が格納された配列になる

new Array()だと
let t = new Array(3);// empty×3の配列になる！

今回のコードでは初期化をすっ飛ばしていきなり
let t = Array(3); // empty×3の配列になる
ってしてる。ということでしょうか。
（ここよくわかってない。）

.join()とは

.join()は配列の要素を()内の文字で連結する

empty + '0' + empty + '0' + empty

となるので桁数-1個の0が連結され'00'となる

文字列と数値を連結するとすべて文字列になるので
Array(3).join('0') + 51　は文字列'0051'となる

桁数をそろえる

'0051' //Array(3).join('0') + number


('0051').slice(-3) //051 文字列'0051'を末尾から3文字抽出

.slice()とは

.slice(start,end) で文字列のstart文字目からend文字目を抽出する
'あいうえお'.slice(0,4)//'あいうえ' startのカウントは0から、endは4文字目'お'は含まない

.slice(start) endを省略するとstart文字目から最後まで抽出する
'あいうえお'.slice(3));//'えお'

.slice(-start) startにマイナスの数字を設定すると末尾からstart文字分抽出→これを使う！
'あいうえお'.slice(-3));//うえお

つまり…

Array(length).join('0') + number
で桁数-1個の0とnumberを連結し

.slice(-length)
で末尾から桁数分抽出している

わーい

zeroPadding(4,5)//00004
zeroPadding(11,5)//00011
zeroPadding(207,5)//00207

おわり