fumi blog

【JavaScript】中級者なら押さえておきたい！桁を揃えるpadStart関数の使い方

目次

  1. padStartとは
      1. 具体的な使用用途
        1. [使用例1] 電話番号の一部を隠す
        2. [使用例2] 時刻の桁数を揃える
      2. まとめ

        「Progateを１周し終わった！もっとプログラミングを極めたい」
        「実際に業務で使える知識を身につけたい」

        そんな方のために、プログラミング中級者向けの知識を伝授！

        今回はJavaScriptのpadStartについて解説していきます

        padStartとは

        padStartとは「文字列が指定した長さになるように桁埋めをする」関数です。

        文字列.padStart(桁数, 埋める文字)


        具体例を見てみましょう。文字列hogeを6桁になるように*(アスタリスク)でうめるコードは以下です 。

        'hoge'.padStart(6,  '*')
// **hoge


        このように指定した桁数になるように、文字列の前に指定文字を補完してくれます。
        また似たような関数に、padEndがあります。

        文字列.padStart(桁数, 埋める文字)


        こちらは、指定した桁数になるように、文字列の後に指定文字を補完してくれます。

        'hoge'.padStart(6,   '*')
// hoge**


        具体的な使用用途

        ではここからは具体的な使用用途を考えていきましょう！

        [使用例1] 電話番号の一部を隠す

        個人情報保護の観点から、電話番号の一部を*(アスタリスク)で隠す実装をしてみましょう。

        const tel = '08012345678'
const tel_partial = tel.slice(-4) // 電話番号の下4桁を取得
console.log(tel_partial.padStart(11, '*'))

// *******5678


        2行目で電話番号の下4桁を取り出した上で、残りの7桁をpadStartを使ってアスタリスクで埋めます。
        ※ 安全性を考えると、この処理はサーバーサイド でやるとより理想的です。

        [使用例2] 時刻の桁数を揃える

        時刻を、常に二桁（つまり、10:15 や 08:01 のような表現）で表すのにもpadStartは有効です。

        const hour = 10
const minutes = 8

const time = `${hour.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')}`

console.log(time)
// 10:08


        ここで、hourもminutesもNumberなので、toStringでStringに直してから使うことに注意しましょう！

        まとめ

        今回はJavaScriptのpadStart関数について解説しました!
        上手く使いこなして、JavaScriptをさらに極めましょう！