こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで文字列が指定した長さになるように任意の文字で延長する方法をご紹介しています。

0埋めみたいに文字列が指定した長さになるようにお任意の文字で延長したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

padStart/padEnd

padStartpadEnd は文字列が指定された長さになるように任意の文字で延長することができるメソッドです。

これらのメソッドはES2017からの使用することができます。標準ではIE11に対応していない状況ですが、後程ご紹介するポリフィルで対応可能ですので、ご安心ください。

padStartpadEndの構文は下記の通りです。

//padStart
str.padStart(len, [,pad])
//padEnd
str.padEnd(len, [,pad])

strは文字列を指します。各メソッドの引数に指定してあるlenpadにはそれぞれ下記を指定します。

len延長後の文字列の長さを指定する。strよりも短い数値を指定するとstrがそのまま返される。
padstrを延長する任意の文字列を指定する。strlenよりも長い場合、lenの長さになるようにstrの前方もしくは後方にpadの文字を追加する。strよりもpadの文字列が長い場合は、padの先頭もしくは末尾の文字列をstrに置き換える。

説明だけだと伝わりにくいと思いますので、一例ですが処理の実行結果を記載します。

padStart

padStartstrlenの長さになるように文字列の前方を延長します。

下記はstrよりもlenが長くなるように指定し、padに一文字だけ指定した場合の結果です。

const str = "123"
console.log(str.padStart(5, 'a'))

//実行結果
"aa123"

padの文字がlenの長さになるまで延長されています。上記例ではpadaを指定していますが、他の文字や記号にしても同様の結果となります。

ちなみにstrよりもpadが長いと下記のようになります。

const str = "123"
console.log(str.padStart(10, 'abcdefghij'))

//実行結果
"abcdefg123"

padStartの場合はpadの末尾からstrの文字列に置き換えられます。他の部分ははpadの文字列がそのまま表示される形となります。

padEnd

padEndstrlenの長さになるように文字列の後方を延長します。 前項と同じパターンを見てみましょう。

const str = "123"
console.log(str.padEnd(5, 'a'))

//実行結果
"123aa"

strよりもpadが長いパターンも同様です。

const str = "123"
console.log(str.padEnd(10, 'abcdefghij'))

//実行結果
"123abcdefg"

padStartは末尾から置き換えられ、padEndは先頭から置き換えられます。

下記のように覚えていてただければと思います。

padStart対象文字列が指定した長さになるように前方を延長する。
padEnd対象文字列が指定した長さになるように後方を延長する。

これで padStartpadEnd の使い方は完璧にマスターしました。ばっちりですね!

ポリフィルについて

Stringのポリフィルは下記のページで紹介されています。

https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js

padStartpadEndも上記のポリフィルに含まれています。使用する場合はファイルをダウンロードして、表示するページに読み込んでください。

簡単なサンプルですが、下記のように記述することで動作します。

<script src="string.polyfill.js"></script>
<script>
    const str = "123"
    console.log(str.padStart(5, 'a'))
</script>

IE11でpadStartpadEndを使いたい場合に試してみてください。

最後に

JavaScriptは進化を続けるプログラミング言語です。新しいプロパティやメソッドが追加され、より使いやすくなっていってます。技術に置いて行かれないように知識をアップデートするように心掛けていきましょう!

以上、JavaScriptのpadStart/padEndで文字列が指定長になるように任意の文字で延長する

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。