ゼロパディングでsliceとpadStart使ってみた

過去に投稿した記事のコメントを元にコードをブラッシュアップしたい。
今回は時計機能で使うゼロパディングをif文以外のやり方である
・slice
・padStart
について自分なりに整理する

ブラッシュアップ対象である僕の記事がこちら↓

コメント内容

コメント
「ゼロパディング処理は、sliceを使う方法やpadStartを使う方法が簡潔に記述できて良いかと思います。
」
→if文以外にも便利そうな方法があるのか、やってみよう

ゼロパディングとは

例えば、「5時30分」の表記を「5:30」から「05:30」と表記すること
そんな定数をtwoDigitalと言う名前で宣言して使おう

if文の場合

if-padding.js

const twoDigital = function(num) { 
        let digit  /
           if (num < 10) {digit = "0"+ num; }  //if文 "0"+は文字列として0を足すため
           else {digit = num; }         
           return digit ;  //返り値（結果）としてdigitを返す

これを時間取得するメソッド使って

clock-easy.js

  const now =new Date();
  const hour = twoDigital(now.getHours());
  const minute = twoDigital(now.getMinutes());
  console.log(hour + minute);

でclock関数宣言とインターバルで表示させるって感じ

slice()の場合

sliceの使い方はこちらを参照

こんな感じで書ける

clock-slice.js

   const twoDigital = function(num) {
    let digit = String("00" + num).slice(-2);
    return digit;
   }

padStart()の場合

padStartの使い方はこちらを参照

こんな感じで書ける

js.clock-pad.js

   const twoDigital = function(num) {
     let digit = String(num).padStart(2,0);
     return digit;
   }

感想

ゼロパディングするだけでも、３つもやり方があるのですね〜　奥が深い〜 個人的にはイメージしやすいくて、（参考URLに注意書きがあるけど、）ブラウザ環境によって使えなかったりするらしいけど、とりあえず一番新しいpadStartを同じ局面出てきたら使ってみよう。