JavaScript

レシピ

文字列

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

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

この記事のポイント

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

目次

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

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

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

文字列の先頭を埋める

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

コード例

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

var 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文字だけ残して、以降の文字を「*(アスタリスク)」で伏せて非表示にします。

コード例

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

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

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

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

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

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

コード例

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

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

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

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

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

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

コード例

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

console.log(hidden_email); // test

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。