こんにちは、ライターのマサトです！
今回は、文字列を部分的に抽出する際に便利な「substring」メソッドを学習していきましょう！
この記事では、
などの使い方に関して解説していきます。
この記事で、「substring」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
substringとは
それでは、「substring」メソッドについて基本的な知識を勉強していきましょう！
「substring」メソッドは、Stringオブジェクトの組み込みメソッドとして用意されており、文字列を分割したり任意の箇所を抽出したりする際によく利用されています。
まず最初に、一般的な構文とその使い方を集中的に学習しましょう。
substringの使い方
substringの構文と書き方
「substring」メソッドの一般的によく使われる構文は次の通りです！
var str = '文字列'; str.substring(開始位置, 終了位置);
Stringオブジェクトの組み込みメソッドなので、文字列が格納された変数「str」に「.(ドット)」で「substring」メソッドを繋げるカタチで利用するのが基本です。
文字列は1文字ずつ先頭から0番目、1番目・・・というように文字数を数えていくのですが、文字を分割もしくは抽出する際に「開始位置」と「終了位置」を引数に与える必要があります。これは、0番目から数えて何番目の文字を「開始位置」「終了位置」にするのか？という考え方になるわけです。
基本的な文字列を抽出する方法
一般的な構文を学習したところで、実際にプログラミングをしてみましょう！
次のサンプルは、「substring」メソッドを使って文字列の一部を抽出しています。
var str = 'イチゴメロンバナナ'; var result = str.substring(0, 3); console.log(result);
出力結果
イチゴ
このサンプルでは「substring」メソッドの引数である開始位置が「0」と指定しているので、文字列の0番目の位置にある「イ」から終了位置である3番目の「メ」までの範囲を抽出することになります。
注意点としては、終了位置の文字の手前までを抽出するので、3番目の文字「メ」は含まれないということを忘れないようにしましょう。
ちなみに、開始位置だけを指定した場合は、無条件に文字列の末尾までを指定することになります。
var str = 'イチゴメロンバナナ'; var result = str.substring(6); console.log(result);
出力結果
バナナ
このサンプルでは、開始位置を6文字目の「バ」に指定しており、終了位置は指定していないので末尾までを抽出範囲として「バナナ」が表示されているのが分かりますね。
lengthプロパティで文字数を取得する
今度は「length」プロパティについて見ていきましょう！
「length」は、文字列型(String)のプロパティで「文字数」が格納されているのが特徴です。
例えば、次のサンプル例を見てください！
var str = 'イチゴメロンバナナ'; console.log(str.length);
実行結果
9
この例では、文字列に対してlengthを使って結果をコンソールログに出力しています。実行結果を見ると、文字数が「9文字」であることが分かりますね。
このようにlengthプロパティを使うと全体の文字数が取得できるので、substringと組み合わせると効果的です。組み合わせ例としてよく使われるのは、対象となる文字の末尾を後ろから取得するというケースです。
この活用方法は本記事の後半で詳しく解説しているので、ぜひ参考にしてみてください！
substringでエラーになる理由
さて、「substring」メソッドの基本を把握したところで、勘違いによってコードがエラーになりやすいポイントについて見ていきましょう！
「substring」メソッドは、引数に「開始位置」と「終了位置」を指定するだけなので、とても簡単に利用できるわけですが、細かい仕様について知っておかないとバグの原因になりやすいメソッドでもあります。
そこで、知っておかないと大きなエラーに発展しやすい2つのポイントを解説するので、ぜひ参考にしてみてください！
引数のマイナス値について
まず最初は、「substring」メソッドの引数に「マイナス値」を指定した場合について見ていきましょう！
次のサンプルを見てください。
var str = 'イチゴメロンバナナ'; var result = str.substring(0, -4); console.log(result);
出力結果
このサンプルでは、終了位置を「-4」と指定しているわけですが、「substring」メソッドではマイナス値はすべて無条件に「0」へと変換される仕様になっています。
そのため、(0, -4)という引数は(0, 0)に変換されるため、出力結果には空文字が表示されるというわけです。
開始位置と終了位置の関係性について
次に、引数の開始位置が終了位置よりも大きな値になった場合について見ていきましょう！
次のサンプルを見てください。
var str = 'イチゴメロンバナナ'; var result = str.substring(3, 0); console.log(result);
出力結果
イチゴ
このサンプルでは、開始位置が「3」と指定されているので、終了位置よりも大きな値になっていますね。
この場合、「substring」メソッドは「開始位置」と「終了位置」を無条件に反転させる仕様になっているので、(3, 0)という引数は(0, 3)に反転されるわけです。そのため、出力結果には「イチゴ」という文字が表示されるのです。
次のサンプルも注意が必要です！
var str = 'イチゴメロンバナナ'; var result = str.substring(3, -4); console.log(result);
出力結果
イチゴ
このサンプルでは、終了位置に「-4」と指定されているので「0」に変換されるわけですが、よく見ると開始位置の方が大きい値になっているので、さらに「反転」も適用されるわけです。
つまり、(3, -4)という引数は(3, 0)に変換されてから、さらに(0, 3)に反転されたうえで実行されるので、最終的に「イチゴ」という文字が出力されます。
このあたりの仕様については間違いやすいので、実際にコードを書いて実行結果を何度も確認するようにしましょう！
substringの類似メソッド
この章では、substringと使い方がよく似たメソッドについて見ていきましょう！
主に、substrメソッドとsliceメソッドの基本的な使い方について学んでいきます。
substringとsubstrとの違いについて
「substring」メソッドは、Stringオブジェクトの組み込みメソッドなのですが、他にも類似のメソッドがいくつかあります。
なかでも特に間違いやすいのが「substr」メソッドでしょう。名称がよく似ており、引数の指定方法も同じようなカタチなので勘違いしやすいわけですが、根本的な仕様は大きく違うのでここで解説しておきます！
次のサンプルを見てください。
var str = 'イチゴメロンバナナ';
var result1 = str.substr(0, 3);
var result2 = str.substring(0, 3);
console.log('substr：' + result1);
console.log('substring：' + result2);
出力結果
substr：イチゴ substring：イチゴ
ここで注目すべきは、どちらも引数を(0, 3)と指定しており、出力結果もまったく同じであるという点です！このサンプルだけを見ると、それぞれのメソッドは一体何が違うのか？と疑問に感じるでしょう。
しかしながら意味は異なっており、「substring」は0〜3文字目までを抽出しているのに対して、「substr」は0文字目から3文字分だけを抽出する仕様になっています。
つまり、「substr」の第2引数は終了位置ではなく、抽出する「文字数」を指定するという意味になります！
この違いを具体的に解説するために、次のサンプルを見てみましょう！
var str = 'イチゴメロンバナナ';
var result1 = str.substr(3, 3);
var result2 = str.substring(3, 3);
console.log('substr：' + result1);
console.log('substring：' + result2);
出力結果
substr：メロン substring：
先ほどのサンプルと同じように、それぞれのメソッドへ(3, 3)の同じ引数を指定していますが、今度は出力結果が異なっているのが分かりますね。
「substr」は、3文字目から3文字分を抽出しているので結果的に「メロン」を表示しているのですが、「substring」は3文字目から3文字目までを抽出する意味になっているので結果的に「空文字」を表示してしまっているわけです。
sliceで文字列を切り抜く方法
「slice」メソッドは、substringとほぼ同じように利用できるメソッドになります。
ただし、注意が必要なのは「マイナス値」を扱う場合です。
substringメソッドは「マイナス値」が無条件に「0」へ変換されるのに対して、sliceはマイナス値がそのまま利用できます。
次のサンプル例を見てください！
var str = 'イチゴメロンバナナ';
var r1 = str.substring(3, -3);
var r2 = str.slice(3, -3);
console.log('substring=' + r1);
console.log('substr=' + r2);
実行結果
substring=イチゴ substr=メロン
この例では、substring / sliceそれぞれで文字列を「3, -3」の範囲で切り出しています。これまで学んだ通り、substringはマイナス値が「0」に変換されるので結果的に「イチゴ」の文字列を取得しています。
sliceの場合はマイナス値が利用可能で、その場合は文字列の末尾から数えるようになります。そのため、ちょうど「メロン」文字列を取得できるというわけです。
さらに詳しいsliceの使い方については、以下の記事で体系的にまとめているのでぜひ参考にしてみてください！
substringの活用
この章では、substringをさらに活用した実践的な使い方について見ていきましょう！
主に、文字列を後ろから切り出す方法とindexOfと組み合わせた検索との併用について学んでいきます。
文字列の末尾を後ろから取得する方法
substringはマイナス値が無条件に「0」へと変換されてしまうため、文字列を後ろから切り出すのが困難です。
そこで、もっともお手軽に文字列の末尾を後ろから取得する方法として使われているのが「length」プロパティです！「length」は冒頭でも少し解説しましたが、対象となる文字列全体の文字数を取得することができます。
そこで、このlengthプロパティを活用して例えば電話番号の末尾4桁を後ろから切り出す方法について見ていきましょう！
次のサンプル例を見てください！
var number = '047-123-5678'; var result = number.substring(number.length - 4); console.log(result);
実行結果
5678
この例では、電話番号の文字列に対してsubstringで切り出しを行っています。
substringの引数にはlengthプロパティを使って文字数を取得し、それに「4」を引いていますね。つまり、全体の文字数から4を引くという意味になります。
これにより、文字列の後ろから4文字分だけを切り出すことが出来るわけです。
indexOfメソッドで文字列を検索して抽出する
ここからは、「substring」メソッドと「indexOf」メソッドを組み合わせた応用例を学習していきましょう！
「indexOf」メソッドは、任意の文字列内に指定したキーワードがどの位置に存在するかを取得することができます。
例えば、次のサンプルを見てください！
var str = 'イチゴバナナメロン';
//「バナナ」の文字位置を取得する
var target = str.indexOf('バナナ');
//「バナナ」以降の文字を取得する
var result = str.substring(target);
console.log('バナナの位置：' + target);
console.log(result);
出力結果
バナナの位置：3 バナナメロン
このサンプルでは、「indexOf」メソッドを使い「バナナ」というキーワードが文字列内のどの位置に存在するかを取得し、その位置情報を「substring」メソッドの引数として活用しています。
出力結果からも分かるように、「バナナ」というキーワードが文字列の3番目から始まっていることが分かり、その値を「substring」の引数に代入しているのが分かります。
さらに、「IF文」を使うことで効率よくプログラミングすることも可能です。
var str = 'user-1, user-2, user-3, user-4, user-5';
var target = str.indexOf( 'user-3' );
if(target !== -1) {
console.log(str.substring(target));
}
else {
console.log('存在しません');
}
出力結果
user-3, user-4, user-5
このサンプルでは、ユーザーデータとして「user-3」の引数を使い、そのユーザー以降のすべての情報を出力しています。
まず最初に、「indexOf」メソッドで「user-3」の位置を取得し、条件分岐によって「user-3」がもし存在しなければ処理を中断するという仕組みになっています。このように、途中で条件分岐を行い処理を分けることができるという点は、とても有効なので忘れないようにしましょう！
indexOfメソッドは今回のような使い方の他に文字列の検索に関して様々な処理に応用することが可能です。
そのあたりの詳しい解説は以下の記事で行なっておりますので、ぜひ学習の参考にしてみてください。
まとめ
今回は、文字列の任意の箇所を抽出したり分割できる「substring」メソッドの使い方を学習しました！
最後に、もう一度おさらいをしておきましょう。
上記の内容を踏まえて、ぜひ自分のプログラムにも組み込んで活用できるようにしておきましょう！
