【コピペOK】超簡単！JavaScriptで文字列を切り出す方法

ポチ

JavaScriptを使って文字列から一部分を切り出すには、一体何をどうすればいいの…？

ユウマ

それなら主に3種類のメソッドを使い分けるだけでOKだよ！コピペしてそのまま使えるように、実際のコードを見ながら詳しく解説していくね。

JavaScriptで文字列を切り出すためには、基本的には「substr / substring / slice」メソッドを目的に応じて使い分けるだけで、簡単に実装可能です。

具体的な実装方法を、この記事を通して見ていきましょう！

【substr】開始位置＋文字数の指定で文字列を切り出す ※非推奨

substrメソッドは現在非推奨とされているため、文字列を切り出したい場合は、基本的に後述する「substring / slice」メソッドを活用しましょう。

substrメソッドでは、引数に「開始位置と文字数」を指定することで、文字列を切り出すことができます。

次のコードで基本構文と一例を見てみましょう。

substrメソッドの基本構文

substr(開始位置, 文字数)

substrメソッドのコード一例

let str = "帰りにお肉と野菜を買ってきて！";
let result = str.substr(3, 2); // 3文字目から2文字を切り出し

console.log(result); // 出力結果：お肉

抜き出したい文字の開始位置と、そこから数えた文字数を指定するだけなので、難しいことは考えずに簡単に切り出すことができますね。

substrメソッドで引数を省略した場合の挙動

引数は省略可能で、第2引数を省略した場合は開始位置から末尾までの全てを切り出すことができるようになっています。

第1引数と第2引数のどちらも省略した場合は、文字列全てを切り出すことになり、要素のコピーを作ることが可能です。

引数の文字数を省略した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.substr(3); // 3文字目から末尾まで切り出し
let resul2 = str.substr(); // 全て切り出し ※要素のコピーを作成

console.log(result1); // 出力結果：お肉と野菜を買ってきて！
console.log(result2); // 出力結果：帰りにお肉と野菜を買ってきて！

substrメソッドで引数に負の数を指定した場合の挙動

引数に負の数を指定した場合ですが、第1引数（開始位置）を負の数にした場合は「末尾から位置を数える」ことになり、第2引数（文字数）に負の数を指定した場合は「0」に変換されます。

引数に負の数を指定した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.substr(-12); // 3文字目から末尾まで切り出し ※substr(3)と同じ意味
let result2 = str.substr(-12, -3); // 何も切り出されない ※substr(3, 0)と同じ意味

console.log(result1); // 出力結果：お肉と野菜を買ってきて！
console.log(result2); // 出力結果："" ※空文字

【substring】開始位置＋終了位置の指定で文字列を切り出す

substringメソッドでは、引数に「開始位置と終了位置」を指定することで、文字列を切り出すことができます。

次のコードで基本構文と一例を見てみましょう。

substringメソッドの基本構文

substring(開始位置, 終了位置)

substringメソッドのコード一例

let str = "帰りにお肉と野菜を買ってきて！";
let result = str.substring(3, 8); // 3文字目から7文字目の範囲を切り出し ※終了位置は「n＋1」で数える

console.log(result); // 出力結果：お肉と野菜

substrメソッドでは開始位置からの文字数を指定して切り出しましたが、substringメソッドでは「開始位置〜終了位置までの範囲」で、文字列を切り出していることが分かります。

substringメソッドで引数を省略した場合の挙動

引数は省略可能で、第2引数を省略した場合は開始位置から末尾までの全てを切り出すことができるようになっています。

第1引数と第2引数のどちらも省略した場合は、文字列全てを切り出すことになり、要素のコピーを作ることが可能です。

引数の文字数を省略した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.substring(3); // 3文字目から末尾まで切り出し
let resul2 = str.substring(); // 全て切り出し ※要素のコピーを作成

console.log(result1); // 出力結果：お肉と野菜を買ってきて！
console.log(result2); // 出力結果：帰りにお肉と野菜を買ってきて！

substringメソッドで引数に負の数を指定した場合の挙動

引数に負の数を指定した場合、substringメソッドでは全て「0」に変換されることになります。

そのため、第1引数と第2引数のどちらにも負の数を指定した場合は、何も切り出されないので注意が必要です。

引数に負の数を指定した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.substring(-12); // 0文字目から末尾まで切り出し ※substring(0)と同じ意味
let result2 = str.substring(-12, -7); // 何も切り出されない ※substring(0, 0)と同じ意味

console.log(result1); // 出力結果：帰りにお肉と野菜を買ってきて！
console.log(result2); // 出力結果："" ※空文字

substringメソッドで開始位置を終了位置よりも大きい値にした場合の挙動

「substring(8, 3)」のように、開始位置の数を終了位置より大きい値にした場合は、自動的に引数の数値が入れ替わった結果が返ってきます。

開始位置を終了位置よりも大きい値にした場合

let str = "帰りにお肉と野菜を買ってきて！";
let result = str.substring(8, 3); // 3文字目から7文字目の範囲を切り出し ※substring(3, 8)と同じ意味

console.log(result); // 出力結果：お肉と野菜

【slice】開始位置＋終了位置の指定で文字列を切り出す

sliceメソッドでは、引数に「開始位置と終了位置」を指定することで、文字列を切り出すことができます。

次のコードで基本構文と一例を見てみましょう。

sliceメソッドの基本構文

slice(開始位置, 終了位置)

sliceメソッドのコード一例

let str = "帰りにお肉と野菜を買ってきて！";
let result = str.slice(3, 8); // 3文字目から7文字目の範囲を切り出し ※終了位置は「n＋1」で数える

console.log(result); // 出力結果：お肉と野菜

sliceメソッドで引数を省略した場合の挙動

引数は省略可能で、第2引数を省略した場合は開始位置から末尾までの全てを切り出すことができるようになっています。

第1引数と第2引数のどちらも省略した場合は、文字列全てを切り出すことになり、要素のコピーを作ることが可能です。

引数の文字数を省略した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.slice(3); // 3文字目から末尾まで切り出し
let resul2 = str.slice(); // 全て切り出し ※要素のコピーを作成

console.log(result1); // 出力結果：お肉と野菜を買ってきて！
console.log(result2); // 出力結果：帰りにお肉と野菜を買ってきて！

ここまでのsliceメソッドの使い方及び挙動は、substringメソッドと一緒であることが分かりますね。もちろんsubstringとsliceメソッドで異なる部分もあるので、ここから詳しく見ていきましょう！

sliceメソッドで引数に負の数を指定した場合の挙動

引数に負の数を指定した場合、sliceメソッドでは「末尾から位置を数える」ことになります。

substringメソッドで負の数を指定した場合は「0」に変換されるため、これはsubstringとsliceメソッドの大きな違いと言えるでしょう。

引数に負の数を指定した場合

let str = "帰りにお肉と野菜を買ってきて！";
let result1 = str.slice(-12); // 3文字目から末尾まで切り出し ※slice(3)と同じ意味
let result2 = str.slice(-12, -7); // 何も切り出されない ※slice(3, 8)と同じ意味

console.log(result1); // 出力結果：お肉と野菜を買ってきて！
console.log(result2); // 出力結果：お肉と野菜

sliceメソッドで開始位置を終了位置よりも大きい値にした場合の挙動

開始位置の数を終了位置より大きい値にした場合は、substringメソッドとは違い、引数の入れ替えを行いません。

つまり「slice(8, 3)」のように引数を指定した場合は、結果として空文字が返ってくることになります。

開始位置を終了位置よりも大きい値にした場合

let str = "帰りにお肉と野菜を買ってきて！";
let result = str.substring(8, 3); // 引数の入れ替えは行われない

console.log(result); // 出力結果："" ※空文字

【補足】初心者が悩みがちな文字列操作系メソッドの引数の指定方法について

ポチ

解説してもらったメソッドを使えば、簡単に文字列を切り出せることは分かったけれど、引数で指定する文字位置がイマイチ理解できない。

ユウマ

確かに初心者だとイマイチ分かりづらいポイントではあるよね。それじゃあここから先は、文字列操作系メソッドの引数を、正しく理解するためのコツを解説するよ！

ここまで解説した各メソッドは、引数で位置を指定することで、文字列中の特定部分を切り出してきました。

しかし初心者の場合、意図した位置で文字が切り出されない…と悩む方も多いでしょう。その悩みを解消するためには、引数の指定時に次の1点を意識することが重要です。

ポチ

文面で説明されてもよく分からん。もっと簡単に説明してほしいんだけれども。

ユウマ

それじゃあイラストを交えながら、もう少し簡単に解説するね！

文字列操作系メソッドの引数は「文字間」で数えると簡単に理解できる

例えば「こんにちは、世界！」という文字列から、「世界」という二文字を切り出したいとしましょう。

この時単純に引数を指定しようとすると、6文字目と7文字目を切り出すために「substring(6, 7)」のような引数指定になるかと思います。

しかし(6, 7)という引数で切り出されるのは、「世」という1文字だけになります。

これは初心者にありがちで、「文字の位置 = 切り出し位置」として考えてしまっているために起こってしまう現象です。

この引数指定の分かりづらさを解消するためには、次の画像のように、文字そのものではなく「文字間を数える」というイメージをもちましょう。

ポチ

おぉ！今までは文字を数えてたから頭がこんがらがってたけれど、これなら迷わず簡単に引数指定ができそうだ！

【まとめ】各メソッドの特徴を理解して文字列を切り出そう！

この記事ではJavaScriptで文字列を切り出すための、3つのメソッドについて解説しました。

最後に、今回解説した3つのメソッドの特徴をおさらいしましょう！

ポチ

文字列の切り出しって、想像してたよりも案外簡単にできるんだね。

ユウマ

そうだね！各メソッドの特徴を理解して、状況に応じて正しく使い分けができるようにステップアップしていきましょう！