JavaScriptで文字列を扱う際に欠かせないのが、文字列の一部分を切り出すsubstring()メソッドです。
substringを使いこなせば、文字列から必要な部分だけを簡単に取り出すことができます。
しかし、初心者にはsubstringの使い方がピンとこないかもしれません。
そこで本記事では、substringメソッドについて以下の内容を詳しく解説します。
- substringの基本的な使い方
- 実践的なsubstringの活用例
- 似たメソッドとの違い
サンプルコードを交えながら、初心者でもわかりやすく説明していきます。
これを読めば、substringメソッドを使いこなせるようになること間違いなしです。
文字列操作は JavaScriptの基本中の基本。ぜひsubstringメソッドをマスターして、JavaScript力を一段階上げましょう！
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
substringメソッドとは？
substringメソッドは、文字列オブジェクトに用意されている組み込みメソッドの1つです。
文字列中の指定した範囲を切り出して、新しい文字列として返してくれます。
基本的な構文は次の通りです。
str.substring(開始位置, 終了位置)文字列strに対してsubstringメソッドを呼び出し、引数に開始位置と終了位置を指定します。
すると、開始位置から終了位置の手前までの文字列を切り出して返します。
終了位置は省略可能で、省略すると文字列の最後までを切り出します。
substringメソッドの基本的な使い方
substringメソッドの基本的な使い方を見ていきましょう。
文字列の一部を切り出す
では、実際にsubstringメソッドを使って文字列を切り出してみましょう。
let str = "Hello World";
console.log(str.substring(0, 5)); // "Hello"
console.log(str.substring(6)); // "World"1行目で文字列 “Hello World” を変数strに代入しています。
2行目では、strに対してsubstringメソッドを呼び出し、開始位置に0、終了位置に5を指定しています。
これにより、0文字目（先頭）から5文字目の手前までの “Hello” が切り出されます。
3行目では終了位置を省略しているので、6文字目（”W”）から最後までの “World” が切り出されます。
マイナスの位置指定
substringメソッドでは、マイナスの位置を指定すると0として扱われます。
let str = "Hello World";
console.log(str.substring(-2)); // "Hello World"
console.log(str.substring(-5, 5)); // "Hello"2行目では開始位置に-2を指定していますが、これは0扱いになるので文字列全体が返ります。
3行目でも開始位置の-5は0として扱われ、結果的にsubstring(0, 5)と同じになります。
開始位置と終了位置が逆転した場合
substringメソッドでは、開始位置が終了位置より大きい場合は自動的に入れ替えられます。
let str = "Hello World";
console.log(str.substring(5, 0)); // "Hello"
console.log(str.substring(11, 5)); // " World"2行目のsubstring(5, 0)は、自動的にsubstring(0, 5)として扱われます。
3行目も同様に、substring(5, 11)と同じ結果になります。
substringメソッドの実践的な使い方
次に、もう少し実践的なsubstringメソッドの使い方を見ていきましょう。
文字列の後ろから指定文字数分を切り出す
substringメソッドとlengthプロパティを組み合わせると、文字列の後ろから指定文字数分を切り出すことができます。
let str = "1234567890";
console.log(str.substring(str.length - 3)); // "890"ここでは、str.length（文字列の長さ）から3を引いた値を開始位置に指定しています。
これにより、後ろから3文字分の “890” が切り出されます。
文字列を検索して切り出す
substringメソッドとindexOfメソッドを組み合わせると、特定のキーワードを検索して、そこから後ろの文字列を切り出すことができます。
let str = "https://www.example.com";
let index = str.indexOf("www");
console.log(str.substring(index)); // "www.example.com"ここでは、indexOfメソッドを使って “www” が何文字目から始まるかを取得しています。
そのインデックスをsubstringメソッドの開始位置に指定することで、“www”以降の文字列 “www.example.com” を切り出しています。
似たメソッドとの違い
substringメソッドと似たメソッドに、slice()とsubstr()があります。
これらの違いを理解しておくことも重要です。
slice()との違い
slice()メソッドもsubstringメソッドと同様に、文字列の一部を切り出すメソッドです。
大きな違いは、マイナスの位置指定の扱い方です。
let str = "0123456789";
console.log(str.substring(0, -3)); // "0123456789"
console.log(str.slice(0, -3)); // "0123456"substringメソッドではマイナスの位置指定は0扱いになりますが、slice()メソッドでは後ろからのインデックスとして扱われます。
そのため2行目のsubstring(0, -3)は開始位置0、終了位置0となり文字列全体が返りますが、
3行目のslice(0, -3)は開始位置0、終了位置-3（後ろから3番目）となるので “0123456” が返ります。
substr()との違い（非推奨）
substr()メソッドは、第2引数に切り出す文字数を指定する点がsubstringメソッドとの違いです。
let str = "Hello World";
console.log(str.substring(0, 5)); // "Hello"
console.log(str.substr(0, 5)); // "Hello"
2行目のsubstring(0, 5)は0文字目から5文字目の手前までを切り出しますが、
3行目のsubstr(0, 5)は0文字目から5文字分を切り出します。
ただし、substr()メソッドは将来的に廃止される可能性があるため、使用は非推奨とされています。
まとめ
JavaScriptのsubstringメソッドについて解説してきました。
ポイントをまとめると以下の通りです。
- substringメソッドは開始位置から終了位置の手前までの文字列を切り出す
- マイナスの位置指定は0扱いになる
- 開始位置が終了位置より大きい場合は自動的に入れ替えられる
- lengthプロパティやindexOfメソッドと組み合わせると便利
- 似たメソッドにslice()とsubstr()（非推奨）がある
substringメソッドを使いこなせば、文字列操作の幅がぐっと広がります。
ぜひ実際のコーディングの中で使ってみて、感覚を掴んでいってください。
文字列操作はJavaScriptの基本です。substringメソッドをマスターして、JavaScriptの理解を深めていきましょう！
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
