JavaScript で文字列を配列に変換する

  1. JSON.parse() 式を使用して文字列を配列に変換する
  2. Array.from() 式を使用して、文字列を配列に変換する
  3. ...Spread 演算子を使用して、文字列を配列に変換する
JavaScript で文字列を配列に変換する

JavaScript で文字列を配列に変換する 3つの方法を紹介します。文字列を数値配列と文字列の配列に変換する方法を変換します。

JSON.parse() 式を使用して文字列を配列に変換する

JSON.parse() 式は、Web サーバーから受信したデータをオブジェクトと配列に解析するために使用されます。受信したデータが JSON オブジェクトの形式である場合、JavaScript オブジェクトに変換されます。また、データが配列から派生した JSON 値である場合、JSON.parse() はデータを JavaScript 配列に変換します。JSON.parse() を使用して、コンマで区切られた数値の文字列を配列に変換できます。角かっこを文字列と連結して、数値の配列に変換できます。

たとえば、変数 data を作成し、値 0,1,2,3 を文字列として変数に格納します。data 変数で JSON.parse() を使用し、変数の前後の開始括弧と終了括弧を連結します。式を変数 arr に格納します。次に、変数をコンソールに記録します。また、配列の最初の要素である typeof をコンソールに記録します。

以下の例では、数値の文字列を数値の配列に変換しました。typeof キーワードを使用して、配列アイテムのタイプを知ることができます。出力セクションは、配列要素が number タイプであることを示しています。

サンプルコード:

JavaScript
 javascriptCopyvar data = '0,1,2,3';
var arr = JSON.parse('[' + data + ']');
console.log(arr)
console.log(typeof arr[0])

出力:

 textCopy(4) [0, 1, 2, 3]
number

Array.from() 式を使用して、文字列を配列に変換する

Array.from() メソッドを使用すると、特定の長さの文字列から配列を作成できます。メソッドに変換する必要のある文字列を渡すことができ、メソッドはそれを文字列の配列に変換します。ただし、. がある場合、この方法は役に立ちません。文字列の配列に , も追加されるため、文字列の間にあります。

たとえば、変数 num を作成し、値 1234 を文字列として変数に格納します。オブジェクト Array を使用して from() メソッドを呼び出し、関数のパラメーターとして num 変数を指定します。式を変数 arr に格納します。次に、console.log() を使用して変数をコンソールに表示します。また、配列の最初の要素である typeof をコンソールに記録します。

以下の例では、数値の文字列を文字列の配列に変換します。文字列の各文字は、配列の文字列要素として変換されます。出力セクションは、配列要素が string タイプであることを示しています。

サンプルコード:

JavaScript
 javascriptCopyvar num = '1234';
var arr = Array.from(data);
console.log(arr)
console.log(typeof arr[0])

出力:

 textCopy(4) ["1", "2", "3", "4"]
string

...Spread 演算子を使用して、文字列を配列に変換する

スプレッド演算子は、3つのドットとそれに続く変数 [...data] で示されます。広く使われている ES6 機能です。このメソッドは、文字列を文字列の配列に変換します。ただし、このメソッドは、文字列の配列に , も追加するため、文字列の間にコンマがある場合は役に立ちません。大きな角かっこで囲まれた文字列を含む変数を渡すことができます。そして、変数の前に、3つのドットを追加できます。つまり、[...data]

たとえば、1234 の値を文字列として変数 data に格納します。括弧内に変数 data を書き込み、その前に 3つのドットを追加します。この式を変数 arr に格納します。次に、変数をコンソールに記録します。また、配列の最初の要素の前に typeof キーワードを使用して、コンソールにログインします。

この例では、2 番目の方法と同様に、数値の文字列を文字列の配列に変換しました。ただし、今回はスプレッド演算子を使用しました。出力セクションは、配列要素が文字列タイプであることを示しています。

コード例:

JavaScript
 javascriptCopyvar data = '1234';
var arr = [...data];
console.log(arr)
console.log(typeof arr[0])

出力:

 textCopy(4) ["1", "2", "3", "4"]
string
チュートリアルを楽しんでいますか? <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

関連記事 - JavaScript Array

関連記事 - JavaScript String