JavaScriptのsubstringメソッドで文字列を抽出する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのsubstringメソッドで文字列を抽出する方法について現役エンジニアが解説しています。substringメソッドは、指定した文字列を切り取る処理を行います。開始位置と終了位置を指定し終了位置を省略することも出来ます。似ているsliceメソッドとの違いも解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
JavaScriptのsubstringメソッドで文字列を抽出する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

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

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

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

お願いします!
substringメソッドとは
平たく言うと文字列の指定した箇所を切り取るメソッドです。
何文字目から何文字目までを取得したい場合に使用します。
substringメソッドの使い方
下記のコードのように文字列に.substring(何文字目から, 何文字目まで)と文字数を指定して呼び出します。
'あいうえお'.substring(2,4);
ここでは「うえ」が戻されます。2つ目の引数は省略の可能です。
省略して下記のコードのようにした場合は、1つ目の引数で指定した文字から最後までが返されます。
'あいうえお'.substring(2);
ここでは「うえお」が戻されます。
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として扱われます。上のコードでは「あいうえ」
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
筆者プロフィール
この記事を監修してくれた方
横山茂雄(よこやましげお) 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 |

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

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

分かりました。ありがとうございます!
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)