【JavaScript入門】文字列を分割して切り出す（substring/slice/split） │ TechMania

文字列を扱う時に、「必要箇所だけ文字を切り出したい」というケースや、「特定のブロックごとに文字列を分割したい」といったケースが発生することがあります。
JavaScriptには、そうしたケースに対応する方法として、文字列の分割・切り出しを行うためのメソッドがいくつか用意されています。

今回の記事では、それぞれのメソッドの使い方や注意点などについて、詳しく解説をしていきたいと思います。

1. JavaScriptで文字列を部分的に分割・切り出す方法は？
- 1.1. substringメソッドで文字列の分割・切り出しをする
- 1.2. sliceメソッドで文字列の分割・切り出しをする
2. 1文字ずつ分割・切り出しをする方法
- 2.1. charAtメソッドで1文字ずつ抽出する
- 2.2. codePointAtメソッドで完全な形で1文字ずつ抽出する
3. splitメソッドで分割した文字列を配列に格納する
4. まとめ
5. 関連記事
6. JavaScriptの勉強方法は？

JavaScriptで文字列を部分的に分割・切り出す方法は？

JavaScriptでは、文字列を部分的に分割したり切り出したりするためのメソッドとして「substring」「slice」「split」などがあります。

まずは、任意の範囲で文字列を切り出す方法について見ていきましょう。
メソッドごとの特徴や基本的な使い方について、順に説明します。

substringメソッドで文字列の分割・切り出しをする

1つ目は、「substring」メソッドを使用するやり方についてです。
substringメソッドでは、対象の文字列に対して範囲を指定することで、その位置にある文字列を結果として取得することができます。

基本構文は次のように記述します。

【基本構文】

文字列.substring(開始位置, 終了位置);

切り出しを開始する位置と終了する位置を、それぞれメソッドの引数に指定します。
指定した位置の間にある文字が、メソッドの戻り値として返却されます。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const str = "Hello,World!";

const result = str.substring(0, 5);

console.log(result);

【実行結果】

Hello

substringメソッドの1つ目の注意点として、文字の位置を示すインデックス番号（引数に渡す数値）は、1からではなく0から数えます。
例えば、上記のコードの場合は「H」が1文字目にあたりますが、インデックス番号は0番が割り振られているため、開始位置に1を指定するとその次の「e」から文字が取得されてしまいます。
開始位置に指定する数値は、実際の文字数の順番から1を引いた数を指定するようにしましょう。
また、終了位置に指定したインデックス番号の文字は取得内容に含まれないため、注意が必要です。

なお、終了位置については省略することが可能で、その場合は開始位置から末尾までの文字が取得されます。

【サンプルコード】

const str = "Hello,World!";

const result = str.substring(6);

console.log(result);

【実行結果】

World!

2つ目の注意点として、終了位置の数値が開始位置よりも小さかった場合、substringメソッドでは自動で数値の反転が行われます。
使用するケースによっては、意図せぬ不具合を生む原因にもなりかねないため、値の指定には注意が必要です。

また、指定した値が負の数だった場合には、「0」を指定したものとして扱われます。

【サンプルコード】

const str = "Hello,World!";

// マイナス値は０になる
const result1 = str.substring(-2, 5);

// 終了位置の方が小さい場合は数値が反転する
const result2 = str.substring(12, 6);

console.log(result1);
console.log(result2);

実行結果:
Hello
World!

値の正負や大小による動作の違いはメソッドごとに変わるので、使用するメソッドの特徴をしっかりと覚えておくことが重要です。

sliceメソッドで文字列の分割・切り出しをする

続いては、「slice」メソッドを使った方法について説明していきます。

基本的な機能はsubstringメソッドと同じで、開始位置と終了位置で指定した範囲内の文字を結果として返してくれるメソッドになります。
基本構文は次のとおりです。

【基本構文】

文字列.slice(開始位置, 終了位置);

終了位置の文字が取得内容に含まれない点や、終了位置を省略できる点もsubstringメソッドと同様です。
以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const str = "Hello,World!";

const result1 = str.slice(0, 5);
const result2 = str.slice(6);

console.log(result1);
console.log(result2);

【実行結果】

Hello
World!

先ほどのサンプルコードの一部をsliceメソッドに置き換えてみましたが、実行結果には同じ文字列が出力されています。
このように、基本的な動作についてはsubstringメソッドとsliceメソッドに違いはありません。

2つのメソッドで異なる点は、引数に負の数を指定した場合の挙動が違うことです。
substringメソッドでは値が自動で「0」に置き換えられていましたが、sliceメソッドで負の数を指定した場合、文字列全体の文字数から値を引いた数に変換されます。

【サンプルコード】

const str = "Hello,World!";

console.log("文字数：" + str.length);

const result1 = str.slice(-12, -7);
const result2 = str.slice(-6);

console.log(result1);
console.log(result2);

【実行結果】

文字数：12
Hello
World!

取得結果を見ると、それぞれ文字数から値を引いた数値が指定されているのが分かると思います。
substringメソッドの場合とは挙動が異なるので、使用の際には注意が必要です。

また、終了位置が開始位置より小さい数値だった場合にも、それぞれのメソッドで挙動が異なります。
実際に動きを見てみましょう。

【サンプルコード】

const str = "Hello,World!";

// substringメソッドの場合
const resultSubstr = str.substring(5, 0);

// sliceメソッドの場合
const resultSlice = str.slice(5, 0);

console.log(resultSubstr);
console.log(resultSlice);

【実行結果】

Hello

substringメソッドの場合は数値が自動で反転されるのに対し、sliceメソッドは入力した数値のまま切り出しを行おうとします。その結果、範囲が正常に指定されず空文字が返却されています。

数値によって結果が変化してしまうsubstringメソッドに比べ、必ず空文字が返却されるという点はメリットにもなるので、状況に応じてメソッドを使い分けるといいでしょう。

1文字ずつ分割・切り出しをする方法

先ほど解説した2つのメソッドは、一定範囲の文字を切り出すのに役立つものでした。
ここからは、単体の文字を切り出すのに使えるメソッドを紹介していきます。

charAtメソッドで1文字ずつ抽出する

まずは、「charAt」メソッドを使用する方法について解説します。
charAtメソッドは、対象の文字列に対してインデックス番号（文字位置）を指定することで、対応する箇所の1文字を取得することができるメソッドです。

使用する際の基本構文は次のように記述します。

【基本構文】

文字列.charAt(文字位置);

substringメソッドやsliceメソッドとは異なり、指定の1文字のみを切り出すメソッドであるため、引数に渡す値も1つのみとなります。
以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const str = "Hello,World!";

const result = str.charAt(0);

console.log(result);

【実行結果】

メソッドの引数は省略することも可能です。その場合は、「0」を指定したものとして動作します。
また、指定した数値が文字列の総数を超える場合や、負の数を指定した場合には、空文字が返却されます。

charAtメソッドを、全体の文字数を取得する「length」と組み合わせて使用すると、文字数に関わらず自動で末尾の文字を取得することができるようになります。
この方法は、他のメソッドにも応用することができます。

【サンプルコード】

const str = "Hello,World!";

const result = str.charAt(str.length - 1);

console.log(result);

【実行結果】

特定の文字の数を数えたりなど、各文字に対して処理を行いたい場合は、ループ処理と合わせて使用しましょう。

【サンプルコード】

let str = "Hello,World!";
let count = 0;

for (let i = 0; i < str.length; i++) {
    if (str.charAt(i) === 'l') {
        count++;
    }
}

console.log("「l」の個数：" + count);

【実行結果】

「l」の個数：3

なお、JavaScriptのバージョンがES6以降であれば、charAtメソッドを使用する代わりに配列と同じような方法で文字を取得することもできます。

【サンプルコード】

const str = "Hello,World!";

console.log(str[0]);

【実行結果】

ただし、この方法を使用して文字を取得する場合、範囲外の数値を指定すると空文字ではなく「undefined」が返却されるので、注意が必要です。

codePointAtメソッドで完全な形で1文字ずつ抽出する

単体の文字を切り出すのに使用できるcharAtメソッドですが、実はケースによっては上手く文字が取得できない場合があります。
まずは、以下のサンプルコードを見てみましょう。

【サンプルコード】

const str = "𩸽";

const result = str.charAt(0);

console.log(result);

【実行結果】

�

実行結果を見ると、文字が正常に取得されていないのが分かります。
この不具合は、取得対象が「サロゲートペア」と呼ばれる文字であるために発生しているものです。

JavaScriptは、文字コードにUnicodeを採用しています。
Unicodeでは、全ての文字に対して一意の番号が割り振られており、この番号のことをCode Point（符号位置）と呼びます。

一方、Unicodeをコンピュータが扱う際には符号化（エンコード）が行われますが、1文字を何bit単位で表現するかによって、いくつかの方式に分かれます。JavaScriptで採用されているのは、16bit単位で表現するUTF-16です。
符号化された文字コードのことをCode Unit（符号単位）と呼び、基本的には1つのCode Unitで1文字が表現されます。

【サンプルコード】

// Code Unitを取得
const result = "あ".charCodeAt(0).toString(16);

console.log(result);

// 同じCode Unitで文字を表示
console.log("\u3042");

【実行結果】

3042
あ

この方法で表現できる文字の種類は6万5536種類までですが、現状Unicodeに登録されている文字は10万種類を超えているため、全ての文字を16bitのみで表現することができません。
そこで、既存の方式を残したままに文字を表現する方法として考えられたのが、サロゲートペアです。

UTF-16では、Unicode上で文字が未割り当てとなっている領域（サロゲート領域）を確保しており、「\uD800～\uDBFF」の範囲を上位サロゲート、「\uDC00～\uDFFF」の範囲を下位サロゲートと呼びます。
サロゲートペアは、この2つの領域から1つずつCode Pointを選択し、その組み合わせによって1つの文字を表現する方法のことを指します。

例えば、先ほどの「𩸽」をCode Unitで表す場合、「\uD867」と「\uDE3D」の組み合わせで表現することができます。

【サロゲートペアの表現例】

console.log("\uD867\uDE3D"); // => 𩸽

charAtメソッドでサロゲートペアに対応できないのは、16bit単位で文字数を判断するメソッドの仕様上、片方のCode Unitのみしか切り出すことができないからです。単体では文字としての意味を持たないため、正常に値を取得することができません。

サロゲートペアを含む文字列を扱いたい場合は、codePointAtメソッドを使って文字の取得を行いましょう。
このメソッドでは、対象の文字に割り振られているCode Pointを取得することができます。

【サンプルコード】

// 10進数でCode Pointを取得
const result1 = str.codePointAt(0);

// 16進数でCode Pointを取得
const result2 = str.codePointAt(0).toString(16);

console.log(result1);
console.log(result2);

// fromCodePointメソッドで、10進数のCode Pontを使って文字表示も可能
console.log(String.fromCodePoint(result1));

【実行結果】

171581
29e3d
𩸽

ただし、codePointAtメソッドを使用する場合、文字列に対して直接インデックス番号を指定することはおすすめしません。
先ほども説明した通り、文字数は基本的に16bit単位ごとに1文字と数えられるため、サロゲートペアはプログラム側では2文字として判断されます。そのため、インデックス番号も1文字につき2つ割り振られているのです。
指定したインデックス番号が上位サロゲートのものであれば正常に値が取得できますが、下位サロゲートのものだった場合は、charAtメソッドと同様の結果が起きてしまいます。

codePointAtメソッドで文字列を扱う場合は、for…of 文やスプレッド構文と組み合わせて使うようにしましょう。

【サンプルコード】

    let str = "🍎𩸽";

    // for...of文の場合
    for (const point of str) {

        let codePoint1 = point.codePointAt(0);
        console.log(String.fromCodePoint(codePoint1));

    }
    // スプレッド構文の場合
    let arr = [...str]

    let codePoint2 = arr[0].codePointAt(0);
    let codePoint3 = arr[1].codePointAt(0);

    console.log(String.fromCodePoint(codePoint2));
    console.log(String.fromCodePoint(codePoint3));

【実行結果】

🍎
𩸽
🍎
𩸽

splitメソッドで分割した文字列を配列に格納する

最後に、「split」メソッドを使った分割方法について紹介していきます。

これまで紹介してきたメソッドはいずれも、指定した範囲の文字を切り出すためのメソッドでしたが、splitメソッドは指定の文字を基準に文字列を区切るメソッドとなります。

メソッドの戻り値は配列となっており、区切った後の各ブロックが配列の要素として格納されています。
切り出した文字のみが返却されていたこれまでのメソッドと異なり、戻り値の配列を使用することで、指定した区切り文字以外の全ての文字を取り出すことができます。

splitメソッドの基本構文は次の通りです。

【基本構文】

文字列.split(区切り文字);

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const str = "sample@test.com";

const result = str.split("@");

console.log(result);

【実行結果】

['sample', 'test.com']

指定した「@」の前後で文字列が分かれ、それぞれが配列の要素として格納されています。

区切り文字の指定には、正規表現を使用することもできます。

【サンプルコード】

const str = "sample@test.com";

const result = str.split(/[@, .]/);

console.log(result);

【実行結果】

['sample', 'test', 'com']

また、分割する回数を任意で指定することも可能です。

【サンプルコード】

const str = "りんご、みかん、もも、ぶどう、いちご";

const result = str.split("、", 3);

console.log(result);

【実行結果】

['りんご', 'みかん', 'もも']

回数を指定した場合、範囲外の文字列は配列の要素に含まれないので注意が必要です。

まとめ

今回は、JavaScriptで文字列を分割・切り出しする方法について解説しました。
メソッドごとに使用できる文字列や範囲が異なるので、それぞれの特徴を押さえて上手に活用していきましょう！

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

2025.03.14
Programming

【JavaScript入門】文字列を分割して切り出す（substring/slice/split）

JavaScriptで文字列を部分的に分割・切り出す方法は？

substringメソッドで文字列の分割・切り出しをする

sliceメソッドで文字列の分割・切り出しをする

1文字ずつ分割・切り出しをする方法

charAtメソッドで1文字ずつ抽出する

codePointAtメソッドで完全な形で1文字ずつ抽出する

splitメソッドで分割した文字列を配列に格納する

まとめ

関連記事

JavaScriptの勉強方法は？

Programmingカテゴリの最新記事

【Python入門】classの使い方をわかりやすく解説

【JavaScript入門】文字列を分割して切り出す（substring/slice/split）

【JavaScript入門】処理を一時停止するsleep機能を実装する

【C#入門】正規表現でパターンに一致する文字列を検索・抽出・置換する

【Python入門】print関数で文字列を出力する

【PHP入門】三項演算子とは？使い方を基礎から応用まで解説