JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsplit()メソッド徹底解説:文字列を配列に分割するステップバイステップガイド

JavaScriptのsplit()メソッドは、文字列を部分文字列(サブストリング)の配列に分割します。分割された部分文字列は新しい配列に格納され、split()はその新しい配列を返します。


プログラミングをしていると、大きな文字列の中から特定のテキストを取り出したい場面によく出会います。例えば、1つの文字列からユーザーの姓と名を別々に取得したい場合、どうすればよいのでしょうか?

そんなときに役立つのが、JavaScriptのsplit()メソッドです。split()は文字列を複数の部分文字列のリストに分割します。この記事では、実際のコード例を交えながら、split()メソッドの使い方を詳しく解説します。

文字列の基礎のおさらい

split()やslice()などの関数を見ていく前に、まず文字列の仕組みをおさらいしておきましょう。文字列とは、文字・記号・数字など1つ以上の文字が並んだシーケンス(連なり)のことです。

文字列内の各文字には、0から始まるインデックス番号でアクセスできます。次の例で、文字列のインデックス構造を確認してみましょう。

Hello there
012345678910

ご覧のとおり、最初の文字「H」のインデックス値は「0」、最後の文字「e」のインデックス値は「10」です。なお、2つの単語の間にあるスペースにもインデックス値が割り当てられている点に注意してください。

JavaScriptのsplit()メソッドとは

JavaScriptの文字列メソッドであるsplit()は、1つの文字列を複数の部分文字列に分割し、その結果を新しい配列に格納します。元の文字列は、スペースなどの指定した区切り文字(セパレーター)を基準に分割されます。

split()メソッドの基本構文は以下のとおりです。

var new_list = text.split(character, limit);

split()メソッドは「text」変数の末尾に追加します。text変数は、指定した区切り文字を基準に分割され、その結果がnew_listという変数に代入されます。

limitパラメータを指定すると、最終的な配列に含める部分文字列の最大数を制限できます。

また、split()の実行結果は必ず変数に代入するようにしましょう。これは、split()が新しい配列を作成するだけで、元の文字列自体は変更しないためです。

split()で文字列を分割する具体例

ここで、ユーザーから姓名を入力してもらい、それを1つの文字列として保存しているケースを考えてみましょう。姓と名を別々に取得したい場合、split()メソッドが活躍します。

例えば、ユーザーがアカウントにログインした際に、フルネームを表示する代わりに「こんにちは、〇〇さん」と名前だけを表示したいといった場面です。

今回は、区切り文字として半角スペースを使用して文字列を分割してみます。

var fullName = "Forename Surname";
var fullNameSplit = fullName.split(" ");

console.log(fullNameSplit);

このコードを実行すると、次の出力が得られます。

["Forename", "Surname"]

split()関数によって、文字列が部分文字列の配列に分割されました。これで、インデックス番号を使って配列内の各文字列にアクセスできるようになります。例えば、次のように記述します。

fullNameSplit[1];

このコードの出力結果は以下のとおりです。

Surname

split()メソッドは配列を返すため、そこから個々の値を取り出せます。配列の各要素は、元の文字列内の各単語に対応しており、上の例ではインデックス位置1の値を取得しました。

文字列をそのまま1つの配列要素にする方法

split()メソッドは、文字列の内容をそのまま配列に移すことにも使えます。次のコードを見てみましょう。

var name_as_list = name.split();
console.log(name_as_list);

このコードの出力結果は「Forename Surname」です。区切り文字を指定しなかったため、複数の部分文字列には分割されず、文字列全体が1つの要素としてname_as_list変数に格納されます。

まとめ

split()メソッドは、文字列を部分文字列のリストに分割するためのメソッドです。インデックスを使って文字列内の個々の単語や値にアクセスできるようにするために使われます。区切り文字には、スペースやカンマなど、任意の文字を指定できます。

JavaScriptについてさらに学びたい方は、初心者向けのチュートリアルや公式ドキュメント(MDN Web Docsなど)もあわせて参考にすると良いでしょう。

  1. JavaScript関数の使い方を徹底解説!初心者向けステップバイステップガイド

    JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。 これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済

  2. JavaScript onclickイベント入門:初心者向けステップバイステップガイド

    JavaScriptのonclickイベントは、ユーザーがボタンやその他のWeb要素をクリックしたときに関数を実行するための仕組みです。HTMLドキュメント内にインラインで記述することも、JavaScriptファイル内で定義することもできます。 JavaScriptで開発をしていると、ユーザーがWebページを操作したタイミングで特定のコードを実行したい場面がよくあります。たとえば、「ボタンが押されたら何か処理をしたい」といったケースです。では、このような機能はJavaScriptでどう実装すればよいのでしょうか。 そこで役立つのが「onclick」イベントです。onclickは最もよく使われ