【JavaScript】substr()で指定した文字列の一部を取り出す!

(この記事は2022年9月24日に投稿されました。)

JavaScriptで指定した文字列の一部を取り出す方法の1つとして、substr()があります。

substr()とは指定した文字列の一部を取り出すメソッドになります。

指定した文字列をの一部を取り出すことから、「取得した一部の文字列」を返り値として返すようになります。

substr()はパラメータを1つだけ指定すると、開始位置から最後までの文字列を取得するようになります。

しかし、パラメータを2つ指定することで、「n文字目からm文字だけ」取得するように一部の文字列を取得することが可能になります。

文字列の一部を取り出すようなメソッドは他にもありますので、どのメソッドを使用すれば良いか迷う時があります。

そのため、まずはこちらの記事を見て、substr()について先に学習しておきましょう。

今回はJavaScriptのsubstr()で指定した文字列の一部を取り出す方法について紹介していきます。

この記事はこんな方におすすめ
・指定した文字列のn文字目からm文字だけ取り出したい人




substr()とは

substr()とは、指定した文字列の一部を切り取るメソッドになります。

substr()の書き方

substr()の書き方は下記のようになります。

対象の文字列の後ろにsubstr()と追記し、パラメータを指定することで、対象の文字列から一部の文字列を取り出すことができます。

substr()のパラメータ

substr()のパラメータは下記のようになります。

  1. 開始インデックス(必須):
    切り始める文字列の開始位置をインデックスで指定する
  2. 取得文字数(任意):
    開始位置から切り取る文字数をインデックスで指定する

substr()は必須パラメータとして「開始インデックス」を指定します。

そして、任意パラメータとして「取得文字数」を指定することができます。

substr()の返り値

substr()の返り値は「切り取った文字列」となります。

substr()で指定した文字列の一部を取り出すサンプルコード

substr()で指定した文字列の一部を取り出すサンプルコードについてご紹介します。

ここでは、下記の3パターンでsubstr()を使用します。

  1. 開始インデックスに正の数を指定する場合
  2. 開始インデックスに負の数を指定する場合
  3. 開始インデックスに0を指定する場合

開始インデックスに正の数を指定する場合

開始インデックスに正の数を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の開始インデックスに正の数を指定して指定した文字列の一部を取り出した結果

substr()によって指定した文字列の一部が取り出されています。

そのため、指定した文字列の4文字目以降の文字列が表示されています。

開始インデックスに負の数を指定する場合

開始インデックスに負の数を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の開始インデックスに負の数を指定して指定した文字列の一部を取り出した結果

開始インデックスに負の数を指定すると、開始位置が設定されずに文字列が取り出されています。

そのため、指定した文字列の全てが表示されています。

開始インデックスに0を指定する場合

開始インデックスに0を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の開始インデックスに0を指定して指定した文字列の一部を取り出した結果

開始インデックス0を指定すると、開始位置が設定されずに文字列が取り出されています。

そのため、こちらも指定した文字列の全てが表示されています。

substr()で切り取る文字数を指定して文字列の一部を取り出す場合

 

substr()で切り取る文字数を指定して文字列の一部を取り出す場合はパラメータに取得文字数を指定します。

ここでは、下記の3つのパターンでsubstr()を使用します。

  1. 取得文字数に正の数を指定する場合
  2. 取得文字数に負の数を指定する場合
  3. 取得文字数に0を指定する場合

取得文字数に正の数を指定する場合

取得文字数に正の数を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の取得文字数に正の数を指定して指定した文字列の一部を取り出した結果

substr()によって取得文字数が設定された一部の文字列を取得しています。

そのため、4文字目をスタートとして、そこから11文字である「山縣有朋伊藤博文桂太郎」が表示されています。

取得文字数に負の数を指定する場合

取得文字数に負の数を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の取得文字数に負の数を指定して指定した文字列の一部を取り出した結果

substr()の取得文字数に負の数を指定すると、何も取得することができません。

そのため、空文字が表示されています。

取得文字数に0を指定する場合

取得文字数に0を指定して、substr()を使用してみます。

⚫︎ Main.js

実行結果

substr()の取得文字数に0を指定して指定した文字列の一部を取り出した結果

substr()の取得文字数に0を指定すると、何も取得することができません。

そのため、こちらも空文字が表示されています。

substr()を実際に使用したケース

substr()を実際に使用したケースについてご紹介します。

例えば、JavaScriptで定義されている変数の値の一部を取り出した文字列をHTMLの要素に表示してみます。

⚫︎ Main.js

実行結果

substr()で変数の値の一部を取り出した文字列をHTMLの要素に表示した結果

substr()によって文字列の一部を取り出し、取り出した値をHTMLの要素として表示しています。

そのため、総理大臣の名前が画面に表示されています。

指定した文字列の開始位置と終了位置の間にある文字を取り出す場合

指定した文字列の開始位置と終了位置の間にある文字を取り出す場合は、substring()を使用します。

substring()とは指定した文字列の開始位置から最後までを取り出すメソッドとなります。

substr()とそれほど変わりはありませんが、パラメータを指定することで、開始位置から終了位置の間にある文字列を取り出すことができます。

⚫︎ Main.js

実行結果

substring()で指定した文字列の開始位置と終了位置の間にある文字を取り出した結果

substring()によって指定した文字列の開始位置と終了位置の間にある文字が取り出されています。

そのため、どちらとも「桂太郎」が表示されています。

開始位置と終了位置を指定して文字列を切り取る場合

開始位置と終了位置を指定して文字列を切り取る場合はslice()を使用します。

slice()とは、指定した文字列の開始位置から最後までを切り取るメソッドになります。

⚫︎ Main.js

実行結果

slice()で開始位置と終了位置を指定して文字列を切り取った結果

slice()によって開始位置と終了位置を指定して文字列を切り取っています。

そのため、開始位置より終了位置の方が小さい場合は切り取れませんが、大きい場合は「西園寺公望」が表示されています。

まとめ

⚫︎ substr()とは指定した文字列を配列に分割するメソッドである

⚫︎ substr()を使用するには1つのパラメータが必須であり、最大で2つのパラメータを指定できる
・ 開始インデックス(必須)
・ 取得文字数(任意)

⚫︎ 開始インデックスに正の数を指定してsubstr()を使用すると、指定した文字列のn文字目から文末までを返す

⚫︎ 開始インデックスに負の数を指定してsubstr()を使用すると、指定した文字列全てを返す

⚫︎ 開始インデックスに0を指定してsubstr()を使用すると、指定した文字列全てを返す

⚫︎ 取得文字数に正の数を指定してsubstr()を使用すると、指定した文字列のn文字目からm文字目までを返す

⚫︎ 取得文字数に負の数を指定してsubstr()を使用すると、空文字を返す

⚫︎ 取得文字数に0を指定してsubstr()を使用すると、空文字を返す

⚫︎ 指定した文字列の開始位置と終了位置の間にある文字を取り出す場合は、substring()を使用する

⚫︎ 開始位置と終了位置を指定して文字列を切り取る場合はslice()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です