Web開発で文字列を扱う際、特定の部分だけを取り出したい場面はよくあります。
例えば、ファイル名から拡張子を取り除いたり、日付データの一部を取得したりする場合です。
この記事では、JavaScriptの文字列切り出しメソッド（substr・substring・slice）の使い方を中心に、実践的なコード例を交えて違いをわかりやすく解説します。
JavaScriptで文字列を切り出す基本を理解しよう
JavaScriptでは、文字列の部分抽出は非常に重要な操作です。フォームの値処理、APIレスポンスの整形など、日常的に登場します。
切り出し処理でできる主な例は以下の通りです。
- 日付文字列の一部を取得（例：2025-11-06 → 2025）
- ファイル名から拡張子を取得（例：index.html → html）
- 文章の最初の数文字だけをプレビュー表示
これらはすべて、JavaScriptの文字列切り出しメソッドで実現できます。
substrメソッドの使い方と注意点
基本構文：
substr(開始位置, 文字数)例：
const text = "JavaScript";
console.log(text.substr(0, 4)); // "Java"
負の値を使う方法：
console.log(text.substr(-6, 6)); // "Script"substr()は非推奨になっています。
その理由や代替方法については、slice・substring・substrの違いと使い分けで詳しく解説されています。
新しいコードでは、slice()またはsubstring()を使用するのが推奨です。
substringメソッドで柔軟に範囲を指定する
基本構文：
substring(開始位置, 終了位置)例：
const text = "JavaScript";
console.log(text.substring(0, 4)); // "Java"
substring()は、終了位置の直前までの部分を抽出します。
開始位置と終了位置を逆にしても自動的に入れ替えて処理するため、エラーになりません。
console.log(text.substring(4, 0)); // "Java"この挙動の違いを理解することで、slice()との使い分けがしやすくなります。
sliceメソッドでシンプルかつ直感的に切り出す
基本構文：
slice(開始位置, 終了位置)例：
const text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"
console.log(text.slice(4)); // "Script"
負のインデックス対応：
console.log(text.slice(-6)); // "Script"負の値を指定すると末尾からカウントできるため、柔軟に文字列を操作できます。
この点が、substring()にはないslice()の大きな強みです。
具体的な使用例や違いを比較したい方は、JavaScriptで文字列を分割・切り出す方法まとめも参考になります。
charAt・splitで応用的な切り出しを行う
charAt()で1文字を抽出
const text = "Hello";
console.log(text.charAt(1)); // "e"
split()で区切り文字を使って配列化
const str = "apple,banana,grape";
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "grape"]
split()を活用すれば、文字列を区切り文字で分割して配列として操作できます。正規表現を組み合わせれば、複雑なパターンの抽出も可能です。
メソッドの選び方と実践ポイント
| 目的 | おすすめメソッド | 特徴 |
|---|---|---|
| 固定の文字数を取得したい | substr() | 簡単だが非推奨 |
| 位置で範囲を指定したい | substring() | 安定性が高い |
| 柔軟に操作したい | slice() | 負の値に対応・最も汎用的 |
実用サンプル：
const file = "report_2025_11.txt";
const ext = file.slice(file.lastIndexOf(".") + 1);
console.log(ext); // "txt"
上記のように、slice()を使えば、ファイル名から拡張子を簡単に抽出できます。
まとめ｜目的に応じて最適なメソッドを選ぼう
- substr()：簡単に使えるが現在は非推奨（古い環境のみ）
- substring()：範囲指定に強く、順序の入れ替えにも対応
- slice()：負のインデックスが使えて柔軟・モダン開発向け
JavaScriptでの文字列操作は頻出スキルです。
メソッドの違いを理解して使い分けることで、開発の効率が大幅に向上します。
さらに次のステップとして、正規表現を組み合わせた文字列処理を学べば、より高度な抽出・整形も可能になります。
