【JavaScript入門】文字列の分割と切り出し(substr/substring/slice)

こんにちは、ライターのマサトです!

今回は、文字列を「分割(切り出し)」する方法を学習します!JavaScriptにおける「分割(切り出し)」方法は、いろいろなメソッドが用意されており、それぞれ使い方や活用方法、注意するべきポイントなどが異なります。

そのため、プログラミング初心者の方は勉強する際に迷うことも少なくありません。

そこで、この記事では文字列を「分割(切り出し)」することができるメソッドを1つずつ解説し、サンプルコードと共に頭の中を整理しながら学習できるようにしましたので、ぜひ参考にしてみてください!

目次

文字列を部分的に分割/切り出す方法

まずは、最も一般的な「分割」方法から見ていきましょう!

ある文字列を対象にして、文字の「位置」や「文字数」などを指定することで、任意の箇所を分割することができるメソッドがいくつかあるのでご紹介致します。

また、文字の「位置」を取得する方法としては、文字の「検索」手法を活用するのがベストなのですが、こちらは次の記事で詳細に解説しているので、合わせて参考にしてみてください!

「substr」を使った分割/切り出し方法

ここでご紹介するのは、分割したい「文字数」を指定できる「substr」メソッドになります!

一般的な構文は次のとおりです。

var str = 文字列;

str.substr( 開始位置, 文字数 );

分割したい文字列の「開始位置」と、そこから数えた「文字数」を指定することで、その範囲を切り取ってくれます。

それでは、次のサンプルで実際に試してみましょう!

var str = 'user-123';

// 0文字目から4文字分を指定
var result = str.substr( 0, 4 );

console.log( result );

出力結果は…

user

となります。対象となる文字列「user-123」の0文字目から数えて4文字分だけを抽出し、その結果が表示されているのが分かります。

また、「文字数」は省略することも可能で、その場合は「開始位置」から末尾まで全部が対象になります。

var str = 'user-123';

// 文字数を省略して、末尾まですべてを抽出する
var result = str.substr( 5 );

console.log( result );

出力結果は…

123

となります。

「開始位置」が5文字目からになっており、文字数が省略されていることで自動的に末尾まで全部が対象になり、結果的に「123」だけを抽出しているのが分かります。

ちなみに、「開始位置」にマイナス値を記述すると、全体の「文字数」から「開始位置」を引いた数になります。例えば、次のサンプルを見てみましょう。

var str = 'user-123';

// 開始位置にマイナス値を記述
var result = str.substr( -3 );

console.log( result );

// 文字数を取得
console.log( '全体の文字数:' + str.length );

出力結果は…

123
全体の文字数:8

となります。この例では、全体の文字数が「8」であり、「開始位置」に「-3」を記述しているので、「8 – 3 =」は「5」となります。

そのため、このサンプルで利用した「substr」の開始位置は「5」となり、5文字目から末尾までを抽出して「123」となるわけです。

substrの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

「substring」を使った分割/切り出し方法

ここからは「substring」を使った分割方法を解説致します!

先ほどの「substr」と少し名称が似ていますが、「substring」は文字数を指定するのではなく、「開始位置」と「終了位置」を指定することで「分割」処理を行います。

一般的な構文は次のとおりです!

var str = 文字列;

str.substring( 開始位置, 終了位置 );

特定の文字列の中で、分割(切り取り)したい「開始位置」と「終了位置」を決め、その範囲を結果として返すことになります。
(終了位置は省略可能で、その場合は開始位置から末尾までになります)

それでは、基本的なサンプルを試してみましょう!

var str = 'user-123';

// 0〜4文字目までの範囲を抽出
var result = str.substring( 0, 4 );

console.log( result );

出力結果は…

user

となります。このサンプルでは、開始位置が「0文字目」で終了位置が「4文字目」に指定されているので、結果的に「user」を抽出したというわけです。

注意が必要なのは、「substr」と違ってマイナス値を記述した場合は、無条件に「0」に置き換えられる点です。

var str = 'user-123';

// マイナス値を記述してみる
var result = str.substring( -2, 4 );

console.log( result );

出力結果は…

user

となります。

この例では、開始位置が「-2」になっていますが、自動的に「0」へ置き換わるので、最終的に「0, 4」と同じ意味になります。そのため、最初のサンプルと同じように、0〜4文字目までを抽出することになるので、出力結果は「user」になるわけです。

さらにもう1つ知っておくべき特徴として、「終了位置」よりも「開始位置」の方が数値が大きくなった場合は、自動的に反転するということです!

これも、サンプルを見てみましょう!

var str = 'user-123';

// 開始位置の数値を「4」にして、終了位置よりも大きくする
var result = str.substring( 4, 0 );

console.log( result );

出力結果は…

user

となります。

本来は「開始位置」の方が小さな数値になるはずですが、この例では「4」と記述されているので終了位置よりも大きな数値になっています。

この場合は、自動的に反転して「0, 4」に変更されます。そのため、「substring(0, 4)」と同じ処理を行うことになり、結果的に「user」が抽出されるというわけです。

この仕組みを知らないと、エラーにならずにバグが発生して混乱を招くことになるので、ぜひ忘れないようにしておきましょう!

substringの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

「slice」を使った分割/切り出し方法

ここからは、「slice」を使った分割処理を見ていきましょう!

これは「substring」と同じように、「開始位置」と「終了位置」を指定してその範囲の文字を分割(切り取り)してくれるメソッドになります。

一般的な構文は次のとおりです!

var str = 文字列;

str.slice( 開始位置, 終了位置 );

基本的な処理は「substring」と同じで、文字列の中で分割したい開始位置を決め、終了位置までの範囲を切り取ることができます。
(終了位置は省略可能で、その場合は開始位置から末尾までになります)

次のサンプルは、基本的な「Slice」を使った分割処理の例です。

var str = 'user-123';

// 0〜4文字目までの範囲を指定
var result = str.slice( 0, 4 );

console.log( result );

出力結果は…

user

となります。

この例では、開始位置に「0」が記述されて終了位置に「4」が設定されているため、0文字目から4文字目までの範囲が抽出されているのが分かりますね。ここまでは「substring」と同じように扱えていますが、もちろん異なる点もあります。

例えば、マイナス値を指定した場合、「substring」は無条件に「0」へ変換されましたよね?ところが、「slice」は「substr」と同じように全体の文字数から引いた数値に変換されます。

次のサンプルを見てみましょう!

var str = 'user-123';

// 開始位置に「マイナス値」を指定
var result = str.slice( -3 );

console.log( result );

// 全体の文字数を取得
console.log( '全体の文字数:' + str.length );

出力結果は…

123
全体の文字数:8

となります。

開始位置に「-3」を指定しているので、「8(文字数) – 3 =」で「5」となり、最終的に5文字目から末尾までを抽出しているわけです。

また、「開始位置」の方が「終了位置」よりも大きな数値になった場合も見てみましょう!

var str = 'user-123';

// 開始位置が終了位置よりも大きな「4」を指定
var result = str.slice( 4, 0 );

console.log( result );

出力結果は何も表示されませんが、空文字が返ってきています。「substring」の場合は、自動的に反転されて結果が表示されていましたが、そのような処理にならない点に注意が必要です。

sliceの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

charAtで1文字づつ分割/切り出す方法

ここからは、「charAt」を使った文字列の分割処理を学習していきましょう!

今ままでの分割方法と異なり、「charAt」は指定した文字の位置を「1文字」だけ取得することができるメソッドになります。

一般的な構文は次のとおりです!

var str = 文字列;

str.charAt( 文字の位置 );

「charAt」の引数は1つだけで、抽出したい文字の位置を指定するだけで、その1文字を取得することができるメソッドになります。

次のサンプルで、基本的な使い方を見てみましょう。

var str = 'user-123';

// 3文字目を抽出する
var result = str.charAt( 3 );

console.log( result );

出力結果は…

r

となります。このサンプルでは、文字の位置を「3」と指定しているので、3文字目の位置にある「r」を取得して表示したわけです。

1文字だけの取得ですが、繰り返し処理などを組み合わせると、文字列全体を取得することも可能です。

var str = 'user-123';
var result = '';

// 文字列をすべて取得するまで繰り返す
for(var i=0; i<str.length; i++) {

    // 1文字ずつ「result」に格納していく
    result += str.charAt( i );

}

console.log( result );

出力結果は…

user-123

となります。この例では、「for文」を活用してカウンタ変数「i」を、「charAt」の引数に当てはめることで、対象となる文字列を1文字ずつ連結させているのが分かります。

ちなみに、「文字の位置」を省略すると「0」と同じ意味になります。

var str = 'user-123';

// 引数を省略
var result = str.charAt();

console.log( result );

出力結果は…

u

となります。この例では、「charAt」の引数である「文字の位置」が省略されているので、「0」と同じ扱いになり結果的に「u」が表示されているわけです。

また、マイナス値や範囲外の数値を記述した場合は、いずれも「空文字」が返るようになっています。

splitで結果を配列に分割/切り出す方法

ここからは「split」メソッドを使った分割処理を学習していきましょう!

「split」を使うと、指定した「区切り文字」のところで文字列を分割してくれて、そのまま扱いやすい「配列データ」として格納してくれます。

一般的な構文は次のとおりです!

var str = 文字列;

str.split( 区切り文字 );

単純に「区切り文字」を指定するだけなので、簡単で理解しやすいのが特徴です。

まずは、基本的なサンプルに挑戦してみましょう!

var str = '2017-03-30';

// 区切り文字に「-(ハイフン)」を指定
var result = str.split( '-' );

console.log( result );

出力結果は…

[ "2017", "03", "30" ]

となります。文字列「2017-03-30」にハイフンがあることに注目し、区切り文字を「 – 」で指定することで、「年・月・日」を要素とする配列が完成しているのが分かりますね。

この区切り文字は「正規表現」を使うことも可能なので、より詳細な指定をすることもできます!

var str = '2017-03-30,2017_04_01,2017/04/02';

// 区切り文字を「正規表現」で指定
var result = str.split( /-|_|/|,/ );

console.log( result );

出力結果は…

[ "2017", "03", "30", "2017", "04", "01", "2017", "04", "02" ]

となります。この例では、正規表現で「 – 」「_」「/」「 , 」をそれぞれ指定し、複数のパターンで記述されている「年・月・日」を配列に格納しているのが分かります。

さらに、区切り文字だけでなく「制限数」を指定することも可能で、配列に格納するデータを制限できるので便利です。

次のサンプルでは、配列に格納するデータを3個までに制限しています。

var str = '2017-03-30,2017_04_01,2017/04/02';

// 制限数を「3」に指定
var result = str.split( /-|_|/|,/, 3 );

console.log(result);

出力結果は…

[ "2017", "03", "30" ]

となります。対象となる文字列は先ほどの例と同じですが、制限数を「3個まで」に指定していることで、配列データがしっかりと3個に制限できているのが分かりますね。

splitの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

文字列操作総まとめ

文字列の様々な使い方についてはこちらの記事で解説しているので、ぜひ確認してください。

まとめ

今回は、文字列の「分割」について学習してきました。

それぞれのポイントをまとめると、次のとおりです!

  • 文字を部分的に分割するには「substr」「substring」「slice」を使う
  • 1文字ずつ抽出することで分割するには「charAt」を使う
  • 分割した文字列を配列に格納して分割するには「split」を使う

利用するメソッドによって、それぞれ用途や注意ポイントが変わってくるので、まずは一通り触ってみることをオススメ致します。

分割するケースに応じて、最も効率が良いメソッドを選択できるように学習を進めていきましょう!

この記事を書いた人

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

目次