JavaScriptのpadStartの使い方！数値の0埋めなど

JavaScriptで文字列の先頭を指定した長さになるように文字埋めするpadStartメソッドについて解説します。

padStartメソッドを使うと、文字列の先頭に指定した文字列を繰り返し追加して、文字列を指定した長さにすることができます。
数値の0埋めや、文字列の長さを揃えたい場合、特定の形式で文字列を整形したい場合に便利です。

padStartメソッドの基本的な使い方

padStartメソッドは、文字列の先頭を指定した長さになるように文字埋めし、新しい文字列を返します。
基本的な構文は以下のとおりです。

string.padStart(targetLength, padString)

• targetLength: 結果の文字列の長さ（必須）。
  • 0以上の整数値を指定します。
  • 現在の文字列の長さより小さい値を指定した場合、現在の文字列がそのまま返されます。
• padString: 埋める文字列（省略可能）。
  • 省略した場合、空白文字で埋められます。
  • 埋める文字列が長すぎる場合、指定された長さに収まるように切り捨てられます。

数値の0埋め

数値を0埋めしてみます。

    const number = 123;
    const paddedNumber = String(number).padStart(5, '0');
    console.log(paddedNumber); // 結果：00123

最初にnumber変数に数値の123を代入しています。
そして数値123を文字列に変換し、padStartメソッドを呼び出しています。

第1引数に文字列の全体の長さで「5」、第2引数に埋めたい文字の「0」を指定しました。
これで、先頭に「0」を繰り返し追加して、文字列の長さを「5」にしています。

結果「00123」になりました。

文字列の先頭を文字埋めする

文字列の先頭を指定した文字で埋めてみます。

const str = 'abc';

console.log(str.padStart(5, '-')); // 結果：--abc
console.log(str.padStart(8, '*')); // 結果：*****abc

str文字列の先頭をpadStartメソッドで文字埋めしています。

1つ目の例では、str文字列の先頭に’-‘を繰り返し追加して、文字列の長さを5にしています。
2つ目の例では、str文字列の先頭に’*’を繰り返し追加して、文字列の長さを8にしています。

それぞれ、文字列が先頭に指定した文字で埋まることが確認できました。

埋める文字列を省略する

padStartメソッドの第2引数padStringを省略すると、空白文字で埋められます。

const str = 'abc';

console.log('test' + str.padStart(5)); // 結果：test  abc

文字列を入れたstr変数からpadStartメソッドを使って、先頭の文字を空白文字で埋めました。
コンソールログにtestという文字列と一緒に出力すると、abcの先頭に空白が入ったことが確認できました。

JavaScriptのpadStartメソッドの使い方まとめ

今回はJavaScriptのpadStartメソッドの使い方について解説しました。
この記事の内容をまとめます。