文字列が指定した長さになるまで文字を追加する

文字列を指定した長さにする

一定の長さにしたい文字列に対してpadStartメソッドかpadEndメソッドを使うと、指定した文字で埋めて調整することができます。

2つのメソッドは文字を埋める場所に違いがあり、padStartメソッドは文字列の先頭に追加を行い、反対にpadEndメソッドは文字列の末尾に追加を行います。

文字列の先頭を埋める

次の例はpadStartメソッドを使って電話番号の下4桁のみを表示し、それ以外は「*(アスタリスク)」で伏せて非表示にします。

JS コード例

let phone_number = "080-1010-2020";
let slice_number = phone_number.slice(-4);

let hidden_number = slice_number.padStart( phone_number.length, '*');

console.log(hidden_number); // *********2020

変数phone_numberには元の電話番号が入っており、一度sliceメソッドを使って下4桁だけを抜き出して変数slice_numberに入れています。
続いてslice_numberにpadStartメソッドを使って、元の電話番号の長さまで先頭に「*」を追加した文字列を作成し、変数hidden_numberに入れる流れです。

padStartメソッドは第1パラメータに調整後の文字列の長さ、第2パラメータに追加する文字を指定します。
また、このメソッドを実行しても元の文字列には影響しません。

文字列の末尾を埋める

次の例はpadEndメソッドを使ってメールアドレスの先頭5文字だけ残して、以降の文字を「*(アスタリスク)」で伏せて非表示にします。

JS コード例

let email = "testemail@gray-code.com";
let slice_email = email.slice(0,5);

let hidden_email = slice_email.padEnd( email.length, '*');

console.log(hidden_email); // teste******************

基本的な流れは先述のpadStartメソッドを使った例と同じですが、文字列に「*」を追加する場所が末尾になっています。

追加する文字を2文字以上にする

どちらのメソッドも第2パラメータに追加する文字を指定しますが、1文字ではなく2文字以上を指定することも可能です。
次の例では追加する文字として「*_+-」を指定しています。

JS コード例

let email = "testemail@gray-code.com";
let slice_email = email.slice(0,5);

let hidden_email = slice_email.padEnd( email.length, '*_+-');

console.log(hidden_email); // teste*_+-*_+-*_+-*_+-*_

padEndメソッドによって文字列が指定した長さになるまで「*_+-」を追加します。

元の文字列がすでに指定した長さに達している場合

padStartメソッドとpadEndメソッドは、元の文字列がすでに第1パラメータに指定した長さ以上ある場合は何もせず、元の文字列をそのまま返します。
切り詰める処理も起こりません。

JS コード例

let email = "test";
let hidden_email = email.padEnd( 2, '*');

console.log(hidden_email); // test