JavaScriptのプログラムを開発する際、文字列の中から特定の部分だけを抽出したい場面は非常に多く存在します。
ユーザー名の一部を切り出したり、長いテキストの冒頭だけを表示したりするなど、その用途は多岐にわたります。
JavaScriptには文字列を切り出すためのメソッドとして、主にslice、substring、substrの3種類が用意されています。
しかし、これらのメソッドは一見似ているものの、引数の扱いや挙動に細かな違いがあるため、正しく使い分けることが重要です。
本記事では、これら3つのメソッドの使い方と、それぞれの決定的な違いについて詳しく解説していきます。
JavaScriptで文字列を切り出す3つの主要メソッド
JavaScriptにおいて、文字列（Stringオブジェクト）から部分的な文字列を取得することを「切り出し」や「抽出」と呼びます。
現代的なJavaScript開発において、最も頻繁に使用されるのはsliceメソッドです。
他にも古くから存在するsubstringメソッドや、現在は非推奨となっているsubstrメソッドも存在します。
これらのメソッドは、元の文字列を直接書き換えるのではなく、新しく抽出された文字列を返り値として返すという特徴を持っています。
まずは、それぞれの基本的な構文と書き方を確認していきましょう。
sliceメソッド：最も汎用的で推奨される方法
sliceメソッドは、現代のJavaScriptにおいて最も推奨される文字列切り出しの方法です。
このメソッドは、開始位置と終了位置を指定して、その間の文字を取り出します。
sliceの基本構文
sliceメソッドの第一引数には「開始インデックス」を、第二引数には「終了インデックス」を指定します。
// 基本的なsliceの使い方
const text = "JavaScriptプログラミング";
const result = text.slice(4, 10); // 4文字目から10文字目の直前まで
console.log(result);Script注意点として、第二引数に指定したインデックスの文字自体は抽出結果に含まれません。
つまり、slice(4, 10)とした場合、インデックス4からインデックス9までの文字が取り出されます。
負のインデックスを指定する場合
sliceメソッドの最大の特徴は、引数にマイナスの値を指定できることです。
マイナスの値を指定すると、文字列の末尾から数えた位置を基準に切り出しを行います。
// 末尾からの切り出し
const filename = "image.png";
const extension = filename.slice(-3); // 末尾から3文字分を取得
console.log(extension);pngこのように、文字列の長さが動的に変わる場合でも、末尾の特定の文字数を取り出すのが非常に簡単です。
substringメソッド：sliceとの微妙な違い
substringメソッドは、sliceと非常によく似た挙動を示します。
しかし、特定の条件下での振る舞いが異なるため、注意が必要です。
substringの基本挙動
基本的な使い方はsliceと同じで、開始位置と終了位置を指定します。
// substringの使い方
const str = "HelloJavaScript";
console.log(str.substring(0, 5));Hello引数の順序が逆転した場合の挙動
substringのユニークな点は、第一引数が第二引数よりも大きい場合に、自動的に値を入れ替えて処理してくれることです。
// 開始と終了が逆の場合
const str = "HelloJavaScript";
console.log(str.substring(5, 0)); // 自動的に(0, 5)として扱われるHello
一方で、sliceメソッドで同じことを行うと、空の文字列が返されます。
この挙動の違いは、バグの原因になることもあるため、しっかりと覚えておきましょう。
負の引数の扱い
substringメソッドでは、マイナスの値を指定すると一律で「0」として扱われます。
末尾からカウントする機能はないため、後ろから切り出したい場合にはsliceを選択するのが正解です。
substrメソッド：現在は非推奨（Legacy）
substrメソッドは、開始位置から「何文字分取り出すか」を指定する方式です。
しかし、このメソッドは現在、ECMAScriptの仕様において非推奨（Deprecated）とされています。
substrの基本構文
第一引数に開始位置、第二引数に「抽出する文字数」を指定します。
// substrの使い方（非推奨）
const text = "WebDevelopment";
console.log(text.substr(3, 11)); // インデックス3から11文字分Development直感的で分かりやすい側面もありますが、将来的にブラウザでのサポートが終了する可能性があるため、新規の開発で利用することは避けるべきです。
slice, substring, substrの比較まとめ
これら3つのメソッドの違いを理解しやすくするために、表形式でまとめました。
| 特徴 | slice | substring | substr |
|---|---|---|---|
| 第二引数の意味 | 終了インデックス | 終了インデックス | 抽出する文字数 |
| 負の値（第一引数） | 末尾から数える | 0として扱われる | 末尾から数える |
| 引数の逆転 | 空文字を返す | 自動で入れ替える | （仕様上なし） |
| 推奨度 | 高い（標準的） | 普通 | 低い（非推奨） |
基本的にはsliceを使い、古いコードをメンテナンスする際に他のメソッドの仕様を確認するというスタンスが良いでしょう。
実践的な文字列切り出しのテクニック
実際の開発現場でよく使われる、具体的な文字列切り出しのパターンをいくつか紹介します。
メールアドレスからドメイン名を抽出する
indexOfメソッドと組み合わせることで、特定の文字を基準に切り出すことができます。
const email = "user@example.com";
const domain = email.slice(email.indexOf("@") + 1);
console.log(domain);example.com
indexOf("@")でアットマークの位置を探し、その次の文字から最後までをsliceで取得しています。
一定以上の長さの文字列を省略する
ニュースの見出しなどを表示する際、文字数制限を設けて「…」を付ける処理は一般的です。
const title = "JavaScriptの文字列操作は非常に奥が深く、様々なメソッドが存在します。";
const limit = 20;
const summary = title.length > limit ? title.slice(0, limit) + "..." : title;
console.log(summary);JavaScriptの文字列操作は非常に奥が深...三項演算子を活用することで、簡潔に省略処理を記述できます。
サロゲートペア（絵文字など）を扱う際の注意点
JavaScriptの文字列操作において、近年特に注意が必要なのがサロゲートペアです。
絵文字や一部の特殊な漢字は、内部的に2文字分（4バイト）としてカウントされることがあります。
const emoji = "🍎JavaScript";
console.log(emoji.slice(0, 1));（文字化けしたような出力、または期待しない結果）
リンゴの絵文字「🍎」は1文字に見えますが、sliceでは正しく切り出せない場合があります。
このような場合は、スプレッド構文を使用して配列に変換してから処理するのが2026年現在のベストプラクティスです。
// 配列に展開してから切り出す
const emojiStr = "🍎JavaScript";
const array = [...emojiStr];
const result = array.slice(0, 1).join("");
console.log(result);🍎この方法であれば、サロゲートペアが含まれていても正確に「1文字」として扱うことができます。
まとめ
JavaScriptで文字列を切り出す方法は複数ありますが、結論としてまずはsliceメソッドを第一選択肢にしてください。
sliceは負のインデックス指定が可能であり、挙動も一貫しているため、最もエラーを引き起こしにくいメソッドです。
歴史的な背景からsubstringが必要になる場面もありますが、その仕様の違いを理解しておくことでトラブルを未然に防ぐことができます。
また、substrについては今後の互換性のために、できるだけsliceへの書き換えを検討しましょう。
絵文字などのマルチバイト文字を扱う際は、標準のメソッドだけでは不十分なケースがあることも忘れないでください。
今回紹介した各メソッドの特性を理解して、適切な文字列操作を行い、より堅牢なJavaScriptプログラムを構築していきましょう。