JavaScript

最終更新日:
公開日:

レシピ

文字列

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

文字列が指定した長さになるまで特定の文字を埋めて調整する方法について解説します。

この記事のポイント

  • 先頭に文字を追加するときはpadStartメソッドを使う
  • 末尾に文字を追加するときはpadEndメソッドを使う
  • 元の文字列がすでに長さに達しているときは何も起こらない

目次

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

一定の長さにしたい文字列に対して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_numberpadStartメソッドを使って、元の電話番号の長さまで先頭に「*」を追加した文字列を作成し、変数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