JavaScriptのsubstringメソッドで文字列を抽出する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのsubstringメソッドで文字列を抽出する方法について現役エンジニアが解説しています。substringメソッドは、指定した文字列を切り取る処理を行います。開始位置と終了位置を指定し終了位置を省略することも出来ます。似ているsliceメソッドとの違いも解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのsubstringメソッドで文字列を抽出する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのsubstringメソッドで文字列を抽出する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

substringメソッドとは

平たく言うと文字列の指定した箇所を切り取るメソッドです。

何文字目から何文字目までを取得したい場合に使用します。

MDNのリファレンスはこちら
 

substringメソッドの使い方

下記のコードのように文字列に.substring(何文字目から, 何文字目まで)と文字数を指定して呼び出します。
 

'あいうえお'.substring(2,4);

 
ここでは「うえ」が戻されます。2つ目の引数は省略の可能です。

省略して下記のコードのようにした場合は、1つ目の引数で指定した文字から最後までが返されます。
 

'あいうえお'.substring(2);

 
ここでは「うえお」が戻されます。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

substringメソッドの注意点

1つめの引数である「何文字目から」は0から始めります。また文字列を変数に格納している場合にsubstringを実行しても、

もとの文字列は変更されず、切り取った新しい文字列が返されます。
 

var string = 'あいうえお';
var newString = string.substring(2,4);
alert('stringは' + string + ' newStringは' + newString);

 

substringメソッドとsliceメソッドの違い

sliceメソッドは、1つ目の引数に「何文字目から」、2つ目の引数に「何文字目まで」を指定して使います。

引数の指定方法が特殊な場合に動作に違いが出るので参考までに紹介します。

下記のコードの実行結果を踏まえながら、違う動作になるケースを2つお見せします。
 

var string = 'あいうえおかきくけこ';

console.log(string.slice(4,2));
console.log(string.substring(4,2));

console.log(string.slice(4,-2));
console.log(string.substring(4,-2));

 
1:引数の1つ目の「何文字目から」、2つ目の「何文字目まで」が逆(つまり1つ目の数の方が2つ目より大きい)場合
sliceでは空文字が返されます。上のコードでは「”」
substringでは、1つ目と2つ目を逆にして切り取った文字を返します。上のコードでは「うえ」

2:引数のどちらかがマイナスの場合
sliceではマイナスの数字は後ろからの文字数として扱われます。上のコードでは「おかきく」
substringではマイナスの数字は0として扱われます。上のコードでは「あいうえ」

MDNのリファレンスはこちら
 

筆者プロフィール

この記事を監修してくれた方

横山茂雄(よこやましげお)
フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。