こんにちは、Ryohei（@ityryohei）です！

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

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

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

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

padStart／padEnd

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

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

padStart／padEndの構文は下記の通りです。

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

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

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

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

padStart

padStartはstrがlenの長さになるように文字列の前方を延長します。

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

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

//実行結果
"aa123"

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

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

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

//実行結果
"abcdefg123"

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

padEnd

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

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対象文字列が指定した長さになるように後方を延長する。

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

ポリフィルについて

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

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

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

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

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

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

最後に

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

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

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら