JavaScriptのsubstringメソッドで文字列を切り出す方法【初心者向け】

JavaScriptで文字列を扱う際に欠かせないのが、文字列の一部分を切り出すsubstring()メソッドです。

substringを使いこなせば、文字列から必要な部分だけを簡単に取り出すことができます。
しかし、初心者にはsubstringの使い方がピンとこないかもしれません。

そこで本記事では、substringメソッドについて以下の内容を詳しく解説します。

サンプルコードを交えながら、初心者でもわかりやすく説明していきます。
これを読めば、substringメソッドを使いこなせるようになること間違いなしです。

文字列操作は JavaScriptの基本中の基本。ぜひsubstringメソッドをマスターして、JavaScript力を一段階上げましょう！

この記事を書いた人

• 未経験からWebエンジニアとして転職成功（年収 30% アップ）
• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

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メソッドを使いこなせば、文字列操作の幅がぐっと広がります。

ぜひ実際のコーディングの中で使ってみて、感覚を掴んでいってください。

文字列操作はJavaScriptの基本です。substringメソッドをマスターして、JavaScriptの理解を深めていきましょう！