文字列操作

【JavaScript】 ゼロやスペースで埋めして桁揃えする

更新日：2023/01/30

日付などを表示するとき、桁を合わせるために先頭にゼロを付けることがあります。
その他にもスペースなどで穴埋めするケースも考えられます。

そこで今回は、JavaScriptで足りない桁にゼロなどの文字で埋める方法をお伝えします。

 

sliceで穴埋め

数値の前をゼロで埋めるだけなら、次のコードがシンプルでわかりやすいです。

const  zeroPadding = (val,length) =>  ( "0000000" + val).slice(-length);

console.log( zeroPadding( "1" , 5) ); // 結果："00001"

このコードは、引数のlengthに"0000000"の個数以上を指定すると穴埋めできないので、適宜修正する必要があります。

少しだけ汎用性を高めたいなら、repeat()を使用してください。

const  zeroPadding = (val,length) =>  ("0".repeat(length) + val).slice(-length);

ただし古いブラウザでは、repeat()を使用できないので注意。

さらに汎用的にしてみます。
穴埋めする文字列と位置を指定可能にしてみました。

const paddingText = ( val , len , text = "0" , before = true ) => {
            const repeatText = text.repeat(len);
            const fromTo = (before) ?
                        { text : repeatText + val , from : -len , to : val.length + len}
                        : { text : val + repeatText , from : 0 , to :  len};

            return fromTo.text.slice( fromTo.from , fromTo.to );
        }

val : 
len : 
text : 
before :  

おまけで、左右穴埋め可能なバージョンを作成してみました。

const paddingText = ( val , len , text = "0" , position = "right" ) => {
            const repeatText = text.repeat(len);
            const valLength = val.toString().length;
            let fromTo=
                (()=> {
                    switch(position) {
                        case "left":
                            return  { text : val + repeatText  , from : 0 , to : len};
                        case "center":
                            const l = len + Math.ceil(valLength  / 2) - Math.ceil(len / 2);
                            return { text : repeatText + val + repeatText, from : l , to : l + len};
                        default:
                            return  { text : repeatText + val , from : -len , to : valLength + len};
                    }
                })();

            return fromTo.text.slice( fromTo.from , fromTo.to );
        }

val : 
len : 
text : 
before :   

 

padStart/padEndで穴埋め

ECMAScript 2017で定義されたpadStart/padEndを使用すると簡単に穴埋めができます。
※ただし古いブラウザでは、使用できないので注意。

"123".padStart( 5 , "0" ); // "00123"
"123".padEnd( 5 , "0" ); // "12300"

文字 : 
第一引数（長さ） : 
第二引数（穴埋め文字） : 

とてもシンプルですね。
今後はこちらを使用するケースが増えそうです。

更新日：2023/01/30

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。