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

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

 

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

 

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

 

 

substringメソッドとは

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

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

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

substringメソッドの使い方

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

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

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

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

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

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

[PR] フロントエンドで副業する学習方法を動画で公開中

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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