ゼロパディング（ゼロ埋め）をJavaScriptで実装するには？

かなり今更感があるのですが、ちょっと目からウロコだったのでメモ。今まで、ゼロパディングといえば、以下のような処理方法で実装していました。例は、日付の前にゼロを埋める処理について。

jQuery(function($) {
  "use strict";
  $(function() {
    let date = new Date();

    /**
     * Zero Padding
     *
     * @param num Number
     * @param len Number
    */
    function zeroPadding(num, len) {
      return (Array(len).join("0") + num).slice(-len);
    }

    $("#date").val(zeroPadding(date.getFullYear(), 4) + "-" + zeroPadding(date.getMonth() + 1, 2) + "-" + zeroPadding(date.getDate(), 2));
  });
});

zeroPadding(num, len)関数でゼロパディングを実現しています。引数にターゲットの数値と何桁でゼロパディングを行うか指定します。桁数分、前にゼロを追加して出来合があった文字を後ろから桁数分スライスして返す。

まぁ、年は西暦であれば今の時代を生きているのであれば4桁以外は考えられませんが、一応ね。しかしもっとスマートな方法を塾の学生に教わるという会心の一撃を食らったので紹介しようと思います。

ECMAScript2017 で定義された padStart メソッド

padStartメソッドというのが、ECMAScript2017で定義されたようです。（知らなかった）

padStart() メソッドは、指定した長さに文字列がなるように、現在の文字列を指定した文字列で (必要があれば繰り返し) 延長します。延長は、現在の文字列の最初 (左) から適用されます。

なるほど、メソッド名から察するにゼロパディングはこれで簡単に実装できそうだ。で、塾の学生が書いてくれたコードに置き換えと以下のようになります。

jQuery(function($) {
  "use strict";
  $(function() {
    let date = new Date();

    /**
     * Zero Padding
     *
     * @param num Number
     * @param len Number
    */
    function zeroPadding(num, len) {
      return String(num).padStart(len, "0");
      // return (Array(len).join("0") + num).slice(-len);
    }

    $("#date").val(zeroPadding(date.getFullYear(), 4) + "-" + zeroPadding(date.getMonth() + 1, 2) + "-" + zeroPadding(date.getDate(), 2));
  });
});

できた！＼(^o^)／
前のコードよりシンプルでわかりやすい。今度からゼロパディングの実装はこれだな。IE対応していないけどね！もう考えたくないのだが、うーん。