JavaScriptの文字列の部分を抽出する方法（slice・substring・substr）を徹底解説！

1. JavaScriptで文字列を部分的に取り出すとは？

1. JavaScriptで文字列を部分的に取り出すとは？

プログラムを書いていると、「文章の中の一部分だけを取り出したい」と思うことがあります。例えば「Hello, World!」という文字列から「Hello」だけを取り出したい場合などです。
JavaScriptには、このような文字列操作を簡単に行うためのメソッドが用意されています。それがslice()・substring()・substr()の3つです。

これらはどれも「文字列の一部を切り取る（抽出する）」ためのメソッドですが、少しずつ使い方が異なります。順番に見ていきましょう。

2. slice()メソッドの使い方

2. slice()メソッドの使い方

slice()メソッドは、文字列の一部を取り出して新しい文字列を返すメソッドです。最初の引数に「開始位置」、2番目の引数に「終了位置」を指定します。

基本の構文は次のとおりです。

const text = "Hello, World!";
const result = text.slice(0, 5);
console.log(result);

Hello

この例では、textの0文字目（最初の文字）から4文字目までを取り出しています。JavaScriptでは「終了位置」は含まれない点に注意してください。

また、slice()の特徴として、負の値（マイナスの数）を指定すると、文字列の末尾から数えることができます。

const text = "Hello, World!";
const result = text.slice(-6, -1);
console.log(result);

World

このように、slice()は柔軟で、後ろから文字を数えることもできる便利なメソッドです。

3. substring()メソッドの使い方

3. substring()メソッドの使い方

substring()メソッドも、指定した範囲の文字列を取り出します。構文はslice()と似ていますが、少しだけ動きが異なります。

const text = "Hello, World!";
const result = text.substring(0, 5);
console.log(result);

Hello

この結果はslice()と同じですが、substring()ではマイナスの値を指定してもエラーにはならず、自動的に「0」として扱われます。また、開始位置と終了位置を逆に指定した場合、自動的に入れ替えてくれます。

const text = "Hello, World!";
const result = text.substring(5, 0);
console.log(result);

Hello

このように、substring()は少し優しい動きをしますが、負の値が使えないため、末尾から数えるような場面には不向きです。

4. substr()メソッドの使い方

4. substr()メソッドの使い方

substr()メソッドは、他の2つとは少し違う指定方法をします。最初の引数に「開始位置」、2番目の引数に「取り出す文字数」を指定します。

const text = "Hello, World!";
const result = text.substr(0, 5);
console.log(result);

Hello

また、substr()もマイナスの値を使うことができ、末尾から文字を数えることができます。

const text = "Hello, World!";
const result = text.substr(-6, 5);
console.log(result);

World

このように、substr()は「どこから」「何文字取り出すか」という考え方をします。
ただし、substr()は古い仕様で、今後のJavaScriptでは非推奨（deprecated）とされています。そのため、新しくコードを書く場合はslice()やsubstring()を使うのがおすすめです。

5. 3つのメソッドの違いを比較してみよう

5. 3つのメソッドの違いを比較してみよう

ここまで紹介した3つのメソッドの違いを表にまとめると、次のようになります。

<table class="table table-bordered">
    <thead>
        <tr>
            <th>メソッド名</th>
            <th>引数の意味</th>
            <th>負の値の扱い</th>
            <th>特徴</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>slice(start, end)</code></td>
            <td>開始位置と終了位置</td>
            <td>使える（末尾から数える）</td>
            <td>柔軟で現在もっとも推奨される</td>
        </tr>
        <tr>
            <td><code>substring(start, end)</code></td>
            <td>開始位置と終了位置</td>
            <td>負の値は0になる</td>
            <td>古いブラウザでも安全に動作</td>
        </tr>
        <tr>
            <td><code>substr(start, length)</code></td>
            <td>開始位置と文字数</td>
            <td>使える（末尾から数える）</td>
            <td>非推奨（将来的に削除される可能性あり）</td>
        </tr>
    </tbody>
</table>

基本的には、slice()を使えばほとんどのケースをカバーできます。シンプルでわかりやすく、柔軟性も高いため、初心者の方にもおすすめです。

6. 実用例：メールアドレスからドメイン名を取り出す

6. 実用例：メールアドレスからドメイン名を取り出す

最後に、slice()を使った実用的なサンプルを見てみましょう。例えば、メールアドレス「user@example.com」から「example.com」だけを取り出す場合です。

const email = "user@example.com";
const index = email.indexOf("@");
const domain = email.slice(index + 1);
console.log(domain);

example.com

このようにslice()を使えば、特定の記号以降の部分を簡単に取得できます。文字列処理では頻繁に使われるテクニックです。