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

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

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

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

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

JavaScript初心者におすすめの 無料プログラミングサイト3選

	1位：侍テラコヤ	2位：Progate	3位：ドットインストール
サイト名
学べる内容	JavaScript、HTML/CSS、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど	JavaScript、HTML/CSS、PHP、Ruby、Python、Java、Go、Git、SQL など	JavaScript、HTML/CSS、Ruby、Python、Java、C言語 など
質問 相談サポート
練習問題の数
特徴	現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能	環境構築をしなくても学べる イラスト付きのスライド式教材　　　スマホアプリでも学べて手軽	レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる
詳細	公式サイト	公式サイト	公式サイト

これからJavascriptのスキルを向上させていきたい方に向けて、おすすめのJavascript学習サイト16選を別で紹介しているので、そちらもぜひ参考にしてみてください。

Javascriptのおすすめ学習サイト16選！選ぶコツや注意点を解説

更新日：2024年3月1日

プログラミング初心者は学習サイトを登録するのがおすすめ

初心者が効率的にプログラミングを学習するには、プログラミング学習サイトを使うのがおすすめです。

無料で使用できるものであれば、余計な費用をかけることなく効率的に勉強することができ、他の人よりも早くスキルアップすることが可能になります。

無料で現場で活躍しているプロのエンジニアに相談ができる学習サイトなどもあるため、気になった方はぜひ利用してみるとよいでしょう。

＼　現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る

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

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

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

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

【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)

更新日：2024年5月6日

「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」となり、５文字目から末尾までを抽出して「123」となるわけです。

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

【JavaScript入門】substrで文字列を切り出す方法(substring/slice)

更新日：2024年5月6日

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

「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の詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】substringで文字列の切り出しを行う方法まとめ！

更新日：2024年5月6日

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

「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の詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ

更新日：2024年5月6日

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

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

ここからは、「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」が表示されているわけです。

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

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の詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】split()で文字列の分割＆正規表現の活用法まとめ！

更新日：2024年5月6日

文字列操作総まとめ

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

JavaScriptの文字列操作（置換・連結・検索・比較など）を徹底解説！

更新日：2024年5月6日

まとめ

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

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

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

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