【JavaScript】配列と文字列の変換

こんにちは、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()は、指定された配列の全要素を連結した新たな文字列を返します。区切り文字はカンマもしくは引数に指定された文字列です。配列の要素が一つの場合は、区切り文字なしの文字列が返ります。lengthが0の場合は空文字が返ります。

区切り文字指定なし

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)"]

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