Zenn
🗓

JavaScriptでpadStartが使えない時の代替手段

2022/04/28に公開6件
JavaScript
tech

この記事について

この記事ではJavaScriptでpadStartが使えない環境でも利用できるsliceを使った代替手段について紹介します。ソースコードについては この記事のGistページ からダウンロード可能です。

おおまかな手順

おおまかな手順を下記に示します。

  1. コーディング
  2. 動作確認

コーディング

下記のコマンドを実行してコーディングの準備をします。

mkdir javascript-pad-start
cd javascript-pad-start
touch main.js

main.js

エディタでmain.jsを開いて下記の内容を入力します。

ポイントを下記に示します。

  1. 000を先頭に付加しています。例えばstrが4d2の場合は結果は0004d2になります。
  2. sliceは部分文字列を返却する関数であり、1つ目の引数で開始位置を指定します。開始位置が負数の場合は末尾から遡ります。例えばstep1が0004d2の場合にslice(-4)を呼び出すと結果は04d2になります。
  3. 16進数であることを示す0xを先頭に付加しています。0x0000を付加してからslice(-4)を呼び出さないようにご注意ください。例えばstrが4d2の場合はstep1が0x00004d2となるのでslice(-4)を呼び出すと結果は04d2になり、意図する結果である0x04d2にはなりません。

動作確認

ターミナルで下記のコマンドを実行して期待する結果expectedと実際の結果actualが一致することを確認します。

node main.js

実行結果を下記に示します。

{ expected: '0x04d2', actual: '0x04d2' }

参考にしたWebページ

この記事を作成するために参考にしたWebページを下記に示します。

おわりに

padStartを使う方法とsliceを使う方法を比較すると下記からわかるように入力文字数などにほとんど違いはありません。

  • padStartを使う方法: '0x' + str.padStart(4, '0')
  • sliceを使う方法: '0x' + ('000' + str).slice(-4)

したがってsliceを使う方法の方が互換性が高い分だけメリットがあるように思えますが、padStartが利用できないのはIEくらいであり、そのIEも2022年6月にリタイア予定なので直感的にわかりやすいpadStartを使う方法の方だけを今後は知っていれば良いように思います。ただ、いつもpadStartの引数の順序を間違えるんですよね...

皆さんはレガシーブラウザを意識してコーディングをすることはあるでしょうか？もしありましたらお気軽にコメントをいただければ幸いです。最後までお読みいただきありがとうございました！

関連記事

GitHubで編集を提案

Discussion

standard softwarestandard software

MDNのpadStart に polyfill のリンクがありますのでそちらを記載すれば、IEでも気にせずにpadStartが使えると思います。

polyfill/string.polyfill.js at master · behnammodi/polyfill
https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js#L297

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

standard softwareさん、教えていただきありがとうございます！おかげさま必要なpolyfillだけを記載すれば互換性、可読性、性能の点でメリットがあることがわかりました。また behnammodi/polyfill ライブラリも存じ上げなかったので勉強になりました。ソースコードが読みやすいので実装の参考にしようと思います。

standard softwarestandard software

結局padStartのPolyfillの内部ではslice使っているですが、IE対応したい、とかの時に便利かなと思い紹介しました。
MDNでリンクしていたので知りましたが、behnammodi/polyfill というのは有名かどうかわからないです。Polyfillとしては、core-js っての方がよく聞きます。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ご紹介いただき感謝です！
MDNのpadStartのページで behnammodi/polyfill が紹介されていたので気になって他のページも見たところ startWith や endsWith では polyfill の紹介がなく、includes では普通に core-js が紹介されていたので興味深かったです。
core-js は @babel/polyfill が deprecated になった時に知りましたがサイズの大きさに辟易していたので
代替案を知れて良かったです。

standard softwarestandard software

非常に個人的な感想ですが
標準関数には、たまにその機能は使わないだろ、というような、変な引数をわたすと特定の動作をするような機能があって古いJSだけでは完全には仕様と一致させることができない場合がある、みたいな状況があったりするので、厳密にPolyfillとはいえない、だからMDNでは載せない、という判断がされているようなものがあるような気がします。具体的にどれとは例示できないので勝手な私の感想なのですが。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ご返信ありがとうございます！
なるほどたしかに変な引数を渡すとエキセントリックな動作をする関数に時々遭遇することがあります（standard softwareさんと同じで私も例示はできないのですが...笑）
厳密にPolyfillとは言えないのでMDNでは載せないという判断も理解ができるところが多いです。