• 1.  JavaScriptのsubstringメソッドとは？
• 2.  substringメソッドの基本構文
• 3．substringメソッドの使い方
• 4．さまざまなインデックスの指定方法
• 5．substringメソッドの実践的な使い方
• 6．substringと類似メソッドの違い
• 7．substringメソッドは非推奨？
  

今回は、文字列を切り抜くsubstringメソッドについて解説していきます。

本記事では、

「JavaScriptのsubstringメソッドとは？」

「substringメソッドの基本構文は？」

といった基本的な内容から、

「substringメソッドの実践的な使い方は？」

「substringメソッドとsubstrメソッドの違いは何？」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1.     JavaScriptのsubstringメソッドとは？

substringメソッドとは、Stringオブジェクトのインスタンスメソッドとして用意されている、指定の開始位置から終了位置までの文字を抽出するメソッドです。

2．substringメソッドの基本構文

はじめに、substringメソッドの基本構文について解説します。

substringメソッドの基本構文は次のとおりです。

strObj.substring(Start, End[省略可能])

①引数

substringメソッドの引数には、StartとEndがあります。それぞれについて説明します。

Start

1番目の引数Startは、抽出する文字の開始位置を示す値で、整数を指定します。

End

2番目の引数Endには、抽出終了位置を指定します。ただしEnd自体は含みません。

また、Endは省略可能です。省略するとStartから文字列の最後までを抽出します。

②返り値

substringメソッドでは、StartからEndの手前までを抽出した文字列を返します。

3．substringメソッドの使い方

substringメソッドの基本構文を押さえたところで、substringメソッドの基本的な使い方を見ていきましょう。

①文字列の一部分を切り出す

文字列”substringメソッドの使い方”から”メソッド”だけを切り出してみましょう。

let strObj = "substringメソッドの使い方";
//文字列から"メソッド"を切り出す
console.log(strObj.substring(9,13));

実行結果：

メソッド

substring(9,13)とすると、文字列のインデックス9からインデックス13の手前までを切り出すので、実行結果が”メソッド”になります。

②指定位置から最後まで切り出す

次に、2番目の引数を省略してみましょう。

let strObj = "substringメソッドで最後までを切り出す";
//2番目の引数を省略する
console.log(strObj.substring(14));

実行結果：

最後までを切り出す

2番目の引数を省略すると、指定位置から最後までを切り出します。

実行結果から、インデックス14から最後までを切り出しているのがわかりますね。

4．さまざまなインデックスの指定方法

substringメソッドの引数には、さまざまなインデックスを指定できます。

①インデックスにマイナスを指定

まず、引数にマイナス値を指定してみましょう。

let strObj = "インデックスの指定方法";
//第一引数にマイナス値を指定
console.log(strObj.substring(-5));

実行結果：

インデックスの指定方法

1番目の引数にマイナス値を指定すると文字列の切り出しは行われず、文字列をそのまま返します。

②終了インデックスを開始インデックスよりも小さく指定

次に、終了インデックスに開始インデックスよりも小さい値を指定してみましょう。

let strObj = "インデックスの指定方法";
//終了インデックスに開始インデックスより小さい値を指定
console.log(strObj.substring(5,1));

実行結果：

ンデック

終了インデックスに開始インデックスよりも小さい値を指定すると、自動的にインデックスが反転されます。

そのため、

strObj.substring(1,5)

を実行したときと、同じ結果になります。

5．substringメソッドの実践的な使い方

ここでは、文字列の末尾から取得する方法や文字列の検索など、substringメソッドの実践的な使い方について紹介します。

①lengthプロパティを使って末尾を後ろから取得する

substringメソッドのインデックス指定だけでは、文字列の末尾から取得することはできません。

文字列の末尾から取得するにはlengthプロパティを組み合わせて使う必要があります。

以下は、ファイル名から拡張子を取得するサンプルコードです。

et strObj = "substring_method_sample.html";
//ファイルの拡張子を取得
console.log(strObj.substring(strObj.length-4));

実行結果：

html

サンプルコードでは、lengthプロパティで文字数を取得し、その文字数から”4”を引いた値を引数として指定しています。

全体の文字数から”4”を引いたインデックス位置から切り出すことになるので、実行結果の通り、拡張子だけ取得できるのです。

②indexOfメソッドで文字列を検索して取得する

次に、substringメソッドとindexOfメソッドを組み合わせて、文字列を検索する方法を解説します。

indexOfメソッドは文字列に指定したキーワードが、文字列中のどの位置に存在しているかを取得できます。

サンプルコードで確認してみましょう。

let strObj = "substringメソッドで検索する方法";

//indexOfで"メソッド"の文字位置を取得する
let StartPos = strObj.indexOf("メソッド")
console.log('"メソッド"の開始位置は' + StartPos + '桁目です。');

//"メソッド"以降を取得する
console.log(strObj.substring(StartPos));

実行結果：

“メソッド”の開始位置は9桁目です。

メソッドで検索する方法

はじめに、indexOfメソッドで”メソッド”が文字列中のどの位置に存在しているかを取得しましょう。

取得した位置をsubstringメソッドの引数として設定することで、指定の文字列以降を切り出しています。

6．substringと類似メソッドの違い

ここからは、substringと似た機能を持つsubstrメソッドとsliceメソッドを紹介します。

それぞれのメソッドの特徴を把握し、用途に合った使い方をしましょう。

①substrとの違い

substrメソッドも文字列を切り出すメソッドですが、substringメソッドとの違いは第2引数の扱い方です。

substringメソッドの第2引数には抽出終了位置を指定しますが、substrメソッドでは開始位置から抽出する文字数を指定します。

サンプルコードで確認してみましょう。

let strObj = "substringメソッドとsubstrメソッドの違い";

//substringメソッドの場合
console.log(strObj.substring(3,11));
//substrメソッドの場合
console.log(strObj.substr(3,11));

実行結果：

stringメソ

stringメソッドと

実行結果から、substr(3,11)は、3文字目から11文字分を切り出していることがわかりますね。

②sliceメソッドとの違い

sliceメソッドも、開始位置と終了位置を指定して文字列を抽出するメソッドです。

sliceメソッドとの違いをサンプルコードで確認していきましょう。

let strObj = "substringメソッドとsliceメソッドの違い";

//substringでマイナスを指定すると0に変換される
console.log('結果1: ' + strObj.substring(-7));
//sliceでマイナスを指定すると文字列の後ろから取得する
console.log('結果2: ' + strObj.slice(-7));

//substringで開始index >= 終了indexの場合、自動で開始indexと終了indexを反転する
console.log('結果3: ' + strObj.substring(9,3));
//sliceで開始index >= 終了indexの場合、空文字を返す
console.log('結果4: ' + strObj.slice(9,3));

実行結果：

結果1: substringメソッドとsliceメソッドの違い

結果2: メソッドの違い

結果3: string

結果4:

substringメソッドの引数にマイナス値を指定すると自動で0に変換され先頭から切り出されますが、sliceメソッドの場合、文字列の後ろから指定した値分の文字を取得します。

また”開始index >= 終了index”の場合、substringメソッドは引数の値を(9,3)を(3,9)に自動反転しますが、sliceメソッドの場合は空文字を返します。

7．substringメソッドは非推奨？

「substringメソッドは非推奨」と認識している方がいるかもしれませんが、2022年11月現在、非推奨となっているのはsubstrメソッドで、substringメソッドは非推奨ではありません。

substrメソッドはECMAScript言語としては古い機能とされており、将来的に削除される可能性があるため、使用しないようにしましょう。

※掲載された社名、製品名は、各社の商標及び登録商標です。