【JavaScript】padStart・padEndで特定の長さの文字列を別の文字列で詰め込む方法

本記事ではJavaScriptのpadStartメソッドとpadEndメソッドを使って、文字列を別の文字列で埋め、結果の文字列が与えられた長さになるまで埋め合わせる方法について解説します。

JavaScriptのpadStart()メソッド

padStart()メソッドはJavaScriptのString型のメソッドであり、文字列の先頭からある長さまでの文字列を別の文字列で詰め込み、その結果、ある長さに達した文字列を返します。

以下は、padStart()メソッドの構文です。

文字列.padStart(文字列の長さ, 詰め込む文字列);

上記の通り、padStart()メソッドは、2つの引数を受け取ります。

第一引数は、文字が詰め込まれた結果の文字列の長さです。第一引数の数値が文字列の長さより短い場合、文字列は詰め込まれずにそのまま返されます。
第二引数は、埋め込むための文字列を渡します。この引数のデフォルト値は、’ ‘である。第二引数が第一引数よりも大きい場合、第二引数は切り捨てられ、左端の部分のみが詰め込まれます。

例えば、8文字の数値文字列が欲しいとします。

この場合、8文字に満たない文字列は、ゼロ（0）で埋められます。

let sampleString = '9876'.padStart(10,'0');

console.log(sampleString); // "0000009876"

第二引数を渡さない場合、スペースが文字列に埋め込まれます。

let sampleString = 'xyz'.padStart(5);

console.log(sampleString); // "  xyz"

padStart()メソッドと同様に、padEnd()メソッドはJavaScriptのString型のメソッドであり、ある長さの文字列を別の文字列で埋めます。

ただし、padEnd()メソッドは、文字列の末尾からパディングします。

以下は、padEnd()メソッドの構文です。

文字列.padEnd(文字列の長さ, 詰め込む文字列);

以下の例では、第2引数を与えていないため、padEnd()メソッドはスペース「’ ‘」を使用して「xyz」の後ろを埋めています。

let sampleString1 = 'xyz'.padEnd(5);

console.log(sampleString1); // "xyz  "

この例では、「*」を第2引数として使用し、結果の文字列は2つの「*」でパディングされ、長さが5文字となります。

let sampleString2 = 'xyz'.padEnd(5,'*');

console.log(sampleString2); // "xyz**"

また以下の例では、結果の文字列の長さは5でなければならないので、「”c”」を切り捨て、その左端の部分である「”ab”」だけをパッドすることになります。

let sampleString3 = 'xyz'.padEnd(5,'abc');

console.log(sampleString3); // "xyzab"