JavaScriptでゼロパディング、ES8以降ならもっと簡単に

2019年2月25日

皆さんこんにちは！
2月頭にリリースされたApex Legendsが面白くて、
引退宣言したFPSゲーマーの名を返上したくなっている末ちゃんです。

Apex Legends、あれはマーケティングでも勉強になりますね。
若干炎上商法な感じでしたが、情報を伏せて伏せて情報公開日に炎上させつつ
情報開示ではなく、まさかのリリース。
現在Twitchの配信数がまさかのLOLを追い抜いて一位に立っています。

これからの大会開催などが楽しみです。

ゼロパディング

さて本題です。

皆さんゼロパディングを普段どのように行っていますか？
従来のゼロパディングの方法であれば以下のような方法で行っていると思います。

const num = 1;
const paddingNum = ('00' + num).slice(-2);

console.log(paddingNum); // "01"

 

しかし、ES8以降の記述であれば、こんな便利な書き方があります。

  const num = 1;
  const paddingNum = String(num).padStart(2, '0');

  console.log(paddingNum); // "01"

 

より直感的で分かりやすい書き方になりました！

ただし注意点があります、当然文字列型で出力されるため数値型は文字列型に直して渡してあげなければいけません。
うっかり数値型で渡してエラーを吐いて混乱しないようご注意ください。

詳しい仕様はMDNをチェックしてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

 

まとめ

今回ご紹介したものはES8以降で使用できます。
また、MDNにも記載されていますが期待を裏切らずIEでは使用できません。
Babelを通してES5にトランスパイルして使用しましょう。
恐らくBabelを使用していない現場はほぼないと思うので大丈夫ですね！

それではまたお会いしましょう！

Share Button