こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで配列と文字列の変換方法をご紹介しています。

JavaScriptで配列から文字列に、文字列から配列に変換したいんだけど、どうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

配列を文字列に変換する

配列を文字列に変換するには、toString()join()を使用します。それぞれ簡単な使用例をご紹介します。ドキュメントのリンクも記載していますので、併せてご参照いただければと思います。

toString()で文字列に変換する

toString()は、指定された配列を文字列として返します。実行結果は区切り文字はカンマになります。

const array = new Array('vue.js', 'react', 'angular');
const string = array.toString();
console.log(string);

//実行結果
"vue.js,react,angular"

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString

join()で区切り文字を指定して文字列に変換する

join()は、指定された配列の全要素を連結した新たな文字列を返します。区切り文字はカンマもしくは引数に指定された文字列です。配列の要素が一つの場合は、区切り文字なしの文字列が返ります。length0の場合は空文字が返ります。

区切り文字指定なし

const array = new Array('vue.js', 'react', 'angular');
const string = array.join();
console.log(string);

//実行結果
"vue.js,react,angular" 

区切り文字指定あり

const array = new Array('vue.js', 'react', 'angular');
const string = array.join('+');
console.log(string);

//実行結果
"vue.js+react+angular" 

区切り文字なし

const array = new Array('vue.js', 'react', 'angular');
const string = array.join('');
console.log(string);

//実行結果
"vue.jsreactangular" 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

文字列を配列に変換する

文字列を配列に変換するには、split()Array.from()を使用します。

split()で区切り文字の位置で配列に変換する

split()は、引数に指定した区切り文字の位置で文字列を配列に変換するメソッドです。区切り文字より前の部分を一つの配列として返します。引数の指定がない場合は一つの配列を返します。

const string = 'vue.js,react,angular';
 const array = string.split(',');
 console.log(array);

//実行結果
["vue.js","react","angular"]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

Array.from()で一文字ずつ配列にする

Array.from()は、引数に指定されたオブジェクトを配列に変換するメソッドです。文字列を配列に変換するには下記のようにします。

const string = 'Into the Program';
const array = Array.from(string);
console.log(array);

//実行結果
["I","n","t","o"," ","t","h","e"," ","P","r","o","g","r","a","m"]

第二引数に処理を指定することも可能です。試しに配列にした文字列を()で囲ってみたいと思います。

const string = 'Into the Program';
const array = Array.from(string, str => '(' + str + ')');
console.log(array);

//実行結果
["(I)","(n)","(t)","(o)","( )","(t)","(h)","(e)","( )","(P)","(r)","(o)","(g)","(r)","(a)","(m)"]

ちゃんと配列にした文字列が()で囲まれた形で格納されています。非常に便利になメソッドです。

注意点

Array.from()はES6で追加されたメソッドです。標準ではIE11や古いブラウザでは動作しません。古いブラウザで使用されたい場合は、MDNにポリフィルが用意されているので試してみてください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from

最後に

JavaScriptで配列を文字列に、文字列を配列に変換が必要になるケースは、割と高い頻度であるかなと思います。特にAPI等でJSONを扱う場合に多い印象です。

配列を文字列に変換するjoin()、文字列の区切り文字位置で配列に変換するsplit()。これらの使い方を覚えておけば大体のケースに対応できるかと思いますので、何度か処理を自分で作ってみて、ざっくりと使い方を覚えておくと良いかもしれません。

以上、JavaScriptで配列と文字列の変換方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。