はじめに
この記事では、JavaScript String オブジェクトのインスタンスメソッドである padStart の概要や用途を記載します。
概要
padStart では、対象の文字列が第1引数で指定した長さになるよう文字列の先頭に第2引数で指定した文字列を繰り返し追加します。
padStart(targetLength, padString)
以下の例では、文字列の長さが 10 になるまで、文字列の先頭に . を追加しています。Pizza が5文字なので、. が5つ追加されます。
sample.js
const str = "Pizza";
const formattedStr = str.padStart(10, ".");
console.log(formattedStr);
// Output: ".....Pizza"
対象の文字列が padStart の第1引数で指定した長さになっている場合、実行前と結果は変わりません。
sample.js
const str = "Pizza";
export const formattedStr = str.padStart(5, ".");
console.log(formattedStr);
// Output: "Pizza"
用途
次は padStart の用途（ユースケース）を考えてみます。
1. 固定の桁数表示
本記事のタイトルにあたるユースケースです。
以下の例では、数字の先頭に0をつけて2桁表示にしています。
sample.js
const index = "1";
const formattedIndex = index.padStart(2, "0");
console.log(formattedIndex);
// Output: "01"
2. データのマスキング
以下の例では、cardNumbe の下4桁以外を * でマスキングしています。
sample.js
const cardNumber = "1234567812345678";
const maskedCardNumber = cardNumber.slice(-4).padStart(cardNumber.length, "*");
console.log(maskedCardNumber);
// Output: "************5678"
3. プレフィックスの追加
以下の例では、category のプレフィックスに # を3つ追加しています。
sample.js
const category = "Science";
const formattedCategory = category.padStart(category.length + 3, "#");
console.log(formattedCategory);
// Output: "###Science"