【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)」と記述しています。

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

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

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

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

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

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

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

console.log( result );

実行結果

メロン

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

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

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

「substr」の活用例

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

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

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

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

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

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

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

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

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

console.log( result );

実行結果

バナナ

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

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

後ろから数えて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()」があるのでご紹介しておきます。

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

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

substr( 開始位置, 文字数 )

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

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

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

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

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

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

実行結果

田中

、

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

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

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

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

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

【JavaScript入門】substringで文字列の切り出しを行う方法まとめ!
更新日 : 2019年3月28日

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

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

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

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

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

console.log( result );

実行結果

きいろ

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

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

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

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

【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ
更新日 : 2019年4月25日

まとめ

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

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

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

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

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー