文字列が指定した長さになるまで文字を追加する | GRAYCODE JavaScript
PHPプログラミング
HTML & CSS
JavaScript
BLOG
PHPプログラミング
レシピ
ワークショップ
入門
HTML & CSS
レシピ
ワークショップ
基礎
リファレンス
JavaScript
レシピ
BLOG
WEB制作
WordPress
働き方
本
コーヒー
旅
インプット
ファイナンス
時事ネタ
その他
GRAYCODEについて
お問い合わせ
プライバシーポリシー
サイトポリシー
JavaScript
facebook
Tweet
hatena
line
2020.07.03
レシピ
文字列
文字列が指定した長さになるまで文字を追加する
文字列が指定した長さになるまで特定の文字を埋めて調整する方法について解説します。
この記事のポイント
先頭に文字を追加するときはpadStartメソッドを使う
末尾に文字を追加するときはpadEndメソッドを使う
元の文字列がすでに長さに達しているときは何も起こらない
目次
文字列を指定した長さにする
追加する文字を2文字以上にする
元の文字列がすでに指定した長さに達している場合
文字列を指定した長さにする
一定の長さにしたい文字列に対して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_numberにpadStartメソッドを使って、元の電話番号の長さまで先頭に「*」を追加した文字列を作成し、変数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
こちらの記事は役に立ちましたか？
Good
Bad
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。
コメント送信
コメントありがとうございます！
運営の参考にさせていただきます。
facebook
Tweet
hatena
line
前のページへ 一覧に戻る 次のページへ
レシピ
ワークショップ
Ajax
XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧
アニメーション
CSSアニメーションを設定する
Web Animations APIを使う
HTML要素に透過エフィクトをつける
HTML要素の背景色をアニメーションで変化させる
HTML要素に移動エフィクトをつける
HTML要素のサイズをアニメーションで変化させる
画像の明度をアニメーションで変化させる
画像の彩度をアニメーションで変化させる
画像のぼかしをアニメーションで変化させる
画像の色相回転をアニメーションで変化させる
画像の色の反転（ネガポジ反転）をアニメーションで変化させる
画像の透過度をアニメーションで変化させる
画像をセピア調にアニメーションさせる
配列
配列を使う
配列の長さを取得する
配列に要素を追加する
配列の要素を取り出す
配列の空要素を削除する
配列のループ
配列の各要素に対して処理を実行する
配列の要素の一部を置き換える
複数の配列を連結する
配列の要素を連結して1つの文字列にする
配列から特定の値を持つ要素を検索する
配列の要素をソートする
配列の要素の並びを逆順にする
すでにある配列から新しい配列を作る
配列の要素の合計を計算する
文字列を配列に変換する
配列の全要素に値を一括で代入する
配列の要素の並びをシャッフルする
配列から最大値と最小値を取得する
音声
audio要素／video要素のプロパティ、メソッド、イベント一覧
音声ファイルの再生、一時停止を操作する
音声ファイルのボリュームを操作する
音声ファイルの再生をスキップする
音声ファイルの再生位置を表示する
音声ファイルを自動再生する
音声ファイルの再生速度を速くしたり遅くする
音声ファイルを逆再生する
メディアファイルを再生できるか確認する
ブラウザ
アラートメッセージを表示する
確認ウインドウを表示する
テキスト入力欄を作る
ブラウザのウインドウサイズを取得する
端末のピクセル比を取得する
端末がタッチ（タップ）に対応しているか確認する
指定したURIに移動する
ページをリロード （再読み込み）する
現在のページの前ページ・次ページに移動する
URIからハッシュを取得する
新しいウインドウを開く
スクロールした量を取得する
指定した位置にスクロールする
ページのタイトルを書き換える
ページをフルスクリーンで表示／解除する
ページ表示中にブラウザがオンライン／オフラインか確認する
データについて
値の型を調べる
型を変換する
変数の値渡しと参照渡し
変数が「undefined」になる事例と対処方法
特定のオブジェクトのインスタンスであるか調べる
イベント
イベントリスナーを設定する
マウスの各操作に対応したイベント一覧
クリックしたときに処理を実行する
タッチ（タップ）したときに処理を実行する
設定したイベントリスナーを解除する
スワイプ／フリックしたときに処理を実行する
マウスカーソルの位置座標を取得する
タッチ（タップ）したときの位置座標を取得する
スクロールしたときに処理を実行する
ページが読み込まれたら処理を実行する
テキストを選択したときに処理を実行する
キーボード入力時に処理を実行する
キーボードの押されたキーを取得する
全角入力の未確定の状態を取得する
全角入力の開始と終了を検出する
ページの表示状態の切り替わりを取得する
ブラウザのタブが表示／非表示になるタイミングで処理を実行する
ブラウザの画面サイズが変更されたときに処理を実行する
JavaScriptコードにメディアクエリを設定する
指定したイベントを発生させる
HTMLのデフォルトの挙動をキャンセルする
ドラッグ・ドロップしたときに処理を実行する
ドラッグ・ドロップでファイルを選択する
フォームが入力されたタイミングで処理を実行する
フォーム送信時に処理を実行する
CSSのtransitionプロパティによるアニメーションの開始や終了時に処理を実行する
CSSのanimationプロパティによるアニメーションが実行されたときに処理を実行する
画像の読み込みが完了したら処理を実行する
実行するタイミング
一定時間が経過したら処理を実行する
定期的に処理を実行する
setIntervalメソッドとsetTimeoutメソッドの違い
フォーム
フォームに入力された値を取得する
チェックボックスの選択状態を取得・変更する
選択したチェックボックスだけを取得する
ラジオボタンの選択状態を取得・変更する
プルダウンメニューの選択した項目を取得・変更する
ファイル選択時にファイル情報を取得する
選択されたファイルの内容を取得する
スライダーの値を取得する
スライダーを特定の範囲で動かせないように設定する
カラーピッカーの値を取得する
HTML・DOM
JavaScriptでHTMLを操作する
html要素、head要素、body要素を取得する
特定のHTML要素の子要素、親要素、前後の要素を取得する
指定した位置にHTML要素を挿入する
HTML要素が子要素を持つか確認する
新しいHTML要素を作成する
指定したHTML要素を削除する
img要素を動的に作成して画像を表示する
HTML要素を複製（コピー）する
HTML要素を他のHTML要素に置き換える
HTML要素内のテキストを取得、編集する
HTML要素のソースコードを取得、編集する
HTML要素の属性を取得、編集する
HTML要素が特定の属性を持つか確認する
別タブを開くリンク「_blank」に「rel="noopener"」を付与する
HTML要素のクラスを追加、削除する
HTML要素が特定のクラス名を持つか確認する
HTML要素に直接スタイルを設定する
HTML要素に適用されたスタイルを取得する
画像
JavaScriptで画像ファイルを読み込む
画像を遅延読み込みする
Base64形式の画像を表示する
数値
数値（Number）について
ランダムな数値を取得する
四捨五入、切り捨て、切り上げ
浮動小数点数を指定した桁数にする
数値を指定した桁数の文字列に変換する
数値を指定した桁数の表記にする
JavaScriptで数学の計算を実行する
オブジェクト
オブジェクトの作成とアクセス方法
オブジェクトを複製する
オブジェクトが特定のプロパティを持っているか確認する
オブジェクトの各キーごとに処理を実行する
オブジェクトを編集できないようにする
オブジェクトのプロパティを配列形式で取得する
正規表現
JavaScriptの正規表現
正規表現で文字列から特定の文字を検索する
正規表現で文字列に含まれる特定の文字を置き換える
正規表現で文字列から空白を取り除く
文字列
文字列の長さを取得する
文字列の先頭、末尾にある空白を取り除く
文字列をURIエンコード（エスケープ）・デコードする
文字列の中で変数を展開する
文字列を検索する
文字列から指定した位置にある文字を取得する
文字列から指定した文字を取り出す
特定の文字を他の文字に置き換える
アルファベットを大文字、小文字に変換する
文字列を分割する
文字列を結合する
文字列が指定した長さになるまで文字を追加する
文字列を置き換えてハイライト表示する
日付・時間
日付や時刻を取得する
指定した日時のDateインスタンスを作る
現時刻のタイムスタンプを取得する
指定した日時からタイムスタンプを取得する
2つの日時の差分を計算する
日付・時刻の計算
特定の日時から経過した時間を計算する
URL
URLからドメイン、パス、プロトコル、GETパラメータなど各種情報を取得する
ファイルからURLを取得してページに表示する
URLに含まれるGETパラメータを取得する
URLに特定のGETパラメータが含まれるか確認する
URLにGETパラメータを追加する
URLのGETパラメータの値を更新する
URLから指定したGETパラメータを削除する
ページ移動せずにアドレスバーのURLを変更する
動画
audio要素／video要素のプロパティ、メソッド、イベント一覧
メディアファイルを再生できるか確認する
動画ファイルの再生、一時停止を操作する
動画ファイルを逆再生する
動画ファイルの再生をスキップする
動画ファイルのボリュームを操作する
動画ファイルの再生位置を表示する
動画ファイルを自動再生する
動画ファイルの再生速度を速くしたり遅くする
よく読まれている記事
HTML & CSS
2019-11-25
どの環境でも綺麗なゴシック体、明朝体のフォントを指定する
PHP
2019-12-18
ひと言掲示板を作る
PHP
2020-09-28
お問い合わせフォームを作る
JavaScript
2020-09-11
JavaScriptでHTMLを操作する
HTML & CSS
2020-01-07
HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）
RECOMMEND
キャラバンコーヒー ゴールデンキャメル
作業中はほぼ必ずコーヒーを飲みながらなのですが、スタバのコーヒー豆を一周したところで出会ったのがこのキャラバンコーヒー。「パッケージ綺麗だなあ」ぐらいの軽い気持ちでポチったところ、これがなかなか美味しいのです。コーヒー好きな方はぜひ一度お試しを。
値段はAmazonの方が安いですが、豆を挽いた粉タイプをお求めの場合はAmazonだと無さそうなので公式サイトがおすすめです。
トップ
JavaScript
文字列が指定した長さになるまで文字を追加する
PHPプログラミング
レシピ
ワークショップ
入門
HTML & CSS
レシピ
ワークショップ
基礎
リファレンス
JavaScript
レシピ
BLOG
WEB制作
WordPress
働き方
本
コーヒー
旅
インプット
ファイナンス
時事ネタ
その他
GRAYCODEについて
お問い合わせ
プライバシーポリシー
サイトポリシー
Copyright©2014-2019 GRAYCODE.
