【JavaScript入門】substrで文字列を切り出す方法(substring/slice)

こんにちは、ライターのマサトです！

今回は、JavaScriptで文字列を抽出して切り出すことが出来る「substr()」について学習をしていきましょう！

この記事では、

・「substr()」とは？
・「substr()」の使い方

という基本的な内容から、

・「substr」の活用例
・「substr()」と「substring()」の違い

などの応用的な使い方に関しても解説していきます。

この記事で、「substr()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！

「substr()」とは？

それでは、まず最初に「substr()」メソッドについて基本的な知識を学習していきましょう！

「substr()」は、任意の文字列の中から指定した文字列を抽出して切り出すことが出来るメソッドです。

例えば、次のような文字列があるとします。

var str1 = 'イチゴバナナメロン';

var str2 = 'user-1,user-2,user-3';

例えば「str1」から「バナナ」という文字列を切り出したい場合や、「str2」から「user-2」を取得したい場合があります。

このようなケースで「substr()」メソッドを使うと、簡単に目的の文字列を抽出して切り出すことができるわけです。

また、テキストファイルやCSVなど何らかの文字列データを取得した場合にも「substr()」は有効です。

「substr()」の使い方

この章では、「substr()」メソッドの基本的な使い方について見ていきましょう！

一般的な構文の書き方、簡単な文字列の切り出し、任意の範囲を決めて切り出す方法などを学びます。

基本的な構文と書き方について

まずは、「substr()」の基本的な構文から見ていきましょう！

一般的には、特定の文字列に対してそのまま「substr()」メソッドを実行できるので簡単です。

次の構文を見てください！

var = 文字列

str.substr( 開始位置, 文字数 )

文字列に対して「substr()」を実行し、引数に「開始位置」と「文字数」を設定することで切り出しができます。

「文字数」は省略することが可能で、その場合は開始位置から末尾までが選択されます。

「substr()」で文字列の位置を指定して切り出す方法

それでは、実際に「substr()」を使った簡単なプログラムを作ってみましょう！

任意の文字列から位置を決めて切り出すには次のように記述します！

var str = 'イチゴバナナメロン';

var result = str.substr( 3 );

console.log( result );

実行結果

バナナメロン

この例では、文字列に対して「substr(3)」と記述しています。

つまり、３文字目から末尾までを切り出すという意味になります。

実行結果を見ると「バナナメロン」と出力されており、３文字目から切り出せているのが分かりますね。

「substr()」で文字列の範囲を指定して切り出す方法

今度は、第２引数を使って抽出したい「範囲」を決めて文字列を切り出してみましょう！

先ほど利用したサンプル例を使って、次のように記述します。

var str = 'イチゴバナナメロン';

var result = str.substr( 6, 3 );

console.log( result );

実行結果

メロン

substr()の指定方法に注目してください！

「substr( 6, 3 )」と記述することで、文字列の６文字目から数えて３文字分の範囲を切り出すという意味になります。

つまり、この例で言うと「メロン」という文字列が抽出されているのが実行結果を見ても分かりますね。

「substr」の活用例

この章では、「substr()」を使ったより実践的な方法について学習します。

主に、負の数を使った後方抽出や返り値を使った条件分岐について学びます。

文字列の後ろから数えて切り出す方法

まずは、負の数を使って文字列の後ろから数える後方抽出を見ていきましょう！

これまで「substr()」の開始位置には正の数を使って指定してきました。

ところが、「負の数」を指定することも可能で、その場合は文字列の末尾から数えることになります。

次のサンプル例を見てください！

var str = 'イチゴバナナメロン';

var result = str.substr( -6, 3 );

console.log( result );

実行結果

バナナ

この例では「substr( -6, 3 )」のように、開始位置に負の数を指定していますよね？

これにより、文字列の後ろから（末尾）数えて６文字目のところが開始位置になるという意味になります。

後ろから数えて６文字目は「バ」になるので、そこから３文字分ということで結果は「バナナ」になるわけです。

返り値の「空文字」を使った条件分岐処理の方法

「substr()」は想定外のエラーが起きると「空文字」を返すという特性があります。

この「空文字」を取得することで条件分岐を作り、JavaScript側で制御することができるようになります。

例えば、次のサンプル例を見てください！

var str = 'イチゴバナナメロン';

var result = str.substr( 10 );

この場合は、「substr(10)」と記述しており対象文字列の文字数よりも大きな値を指定しています。

そのため処理はエラーとなるのですが、返り値として「空文字」を取得します。

これにより、「空文字」を条件式とした分岐処理を次のように書くことができます。

var str = 'イチゴバナナメロン';

var result = str.substr( 10 );

if( !result ) {

  console.log('空文字です');

}
else {

  console.log('正常です！');

}

実行結果

空文字です

この例では、空文字を代入された変数「result」をIF文の条件式として設定しています。

このような分岐処理を作成すれば、想定外のエラーが起きてもある程度プログラム側で制御できるので覚えておきましょう！

「substr()」と「substring()」の違い

「substr()」とよく似たメソッドとして「substring()」があるのでご紹介しておきます。

名前もよく似ているのですが、記述方法もほとんど同じので混乱する方も少なくありません。

決定的に違う点としては、第２引数の指定方法です！

substr( 開始位置, 文字数 )

substring( 開始位置, 終了位置)

このように、substring()の第２引数は文字数ではなく「終了位置」を指定します。

そのため、次のようなケースではそれぞれの結果が異なるのが分かります。

var str = '太郎、田中、花子';

var result1 = str.substr( 3, 2 );
var result2 = str.substring( 3, 2);

console.log( result1 );
console.log( result2 );

実行結果

田中

、

この例では、指定している引数はどちらも同じです。

しかし、実行結果は異なっており切り出す文字列が違うことが分かりますね。

substr()は３文字目から２文字分だけを切り出します。

substring()は３文字目から２文字目の範囲を切り出します。

このようなsubstring()の基本や特性については次の記事でさらに詳しく解説しているので参考にして見てください！

sliceで文字列を切り抜く方法

文字列を切り抜く類似のメソッドにはsliceメソッドがあります。

sliceメソッドの使い方を次のプログラムで確認してみましょう。

var str = 'あおあかきいろ';

//開始位置を4文字目に指定
var result = str.slice( 4 );

console.log( result );

実行結果

きいろ

このサンプルでは、sliceの開始位置を4文字目に指定しています。

そのため、0文字目の「あ」から数え始めて4文字目の「き」から末尾までを抜き取っています。

実行結果を見ると「きいろ」という文字列を返しているのが分かります。

sliceメソッドで文字列を切り抜く方法は次の記事で詳しく解説しているので、ぜひ確認してください。

まとめ

今回は、JavaScripitで文字列を切り出すことが出来る「substr()」について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

・「substr()」は開始位置と文字数を指定することで文字列を切り出すことが出来る
・負の数を開始位置に指定することで文字列の後ろから数えることが出来る
・返り値を取得することで条件分岐処理をプログラムすることが出来る

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！