配列の要素を連結して1つの文字列にする

配列の要素を連結して1つの文字列を作る

配列にjoinメソッドを使うと、全ての要素を連結した文字列を取得することができます。

以下の例は変数animals1に入っている配列の要素をjoinメソッドで結合し、取得した文字列を変数animals_strに入れて内容を出力します。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];
let animals_str = animals.join();
console.log(animals_str);
// cat,dog,mouse

変数zooの配列を出力すると、配列の要素を「,」で区切った1つの文字列が表示されます。

要素を区切る文字は何も指定がない場合は「,」になりますが、他の文字や記号を指定することもできます。
次の例では半角スペースを区切る文字として指定します。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];
let animals_str = animals.join(' ');
console.log(animals_str);
// cat dog mouse

多次元配列を連結して1つの文字列を作る

多次元配列についても、上記の配列と同様に連結して文字列を作成することができます。

JS コード例

let animals = [
	['cat','dog'],
	['fox',['rhinos', 'dolphin']],
	['lion','penguin']
];

let animals_str = animals.join();
console.log(animals_str);
// cat,dog,fox,rhinos,dolphin,lion,penguin

出力した文字列の値を見ると、配列の先頭から順に文字列として連結していることが分かります。

オブジェクトを含む配列を文字列にする

配列の要素にオブジェクトが含まれている場合、joinメソッドではうまく文字列を作成することができません。
以下の例では、要素にオブジェクトを含む配列に対してjoinメソッドを使用したときの結果を確認します。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

let animals_str = animals.join();
console.log(animals_str);
// [object Object],[object Object],[object Object]

出力した文字列の値を見ると、キーや値は無視されたオブジェクトの型のみが文字列になってしまいます。
そこで、joinメソッドを実行する前にオブジェクトのプロパティ名と値を配列形式に変換するようにして実行するよう変更していきます。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

let zoo = '';

animals.forEach(function(value){

	// オブジェクトを配列に変換
	let property = Object.entries(value);

	property.forEach(function(v){
		zoo += v.join(':');
		zoo += ',';
	});
});

console.log(zoo);
// name:cat,id:150001,voice:にゃん,name:dog,id:150002,voice:ワン,name:mouse,id:150003,voice:チュウ,

この例では、変数animalsの配列に対してforEachメソッドで要素の数だけループを実行します。
ループ内で処理を実行するときに、要素の値（オブジェクト）を変数valueで渡しています。

受け取ったvalueに対して、Object.entriesメソッドでオブジェクトを配列に変換します。
次のような変換です。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

animals.forEach(function(value){
	console.log(Object.entries(value));
});

// 1回目のループ
// (3) [Array(2), Array(2), Array(2)]
//  0: (2) ["name", "cat"]
//  1: (2) ["id", 150001]
//  2: (2) ["voice", "にゃん"]

// 2回目のループ
// (3) [Array(2), Array(2), Array(2)]
//  0: (2) ["name", "dog"]
//  1: (2) ["id", 150002]
//  2: (2) ["voice", "ワン"]

// 3回目のループ
// (3) [Array(2), Array(2), Array(2)]
//  0: (2) ["name", "mouse"]
//  1: (2) ["id", 150003]
//  2: (2) ["voice", "チュウ"]

出力結果の通り、オブジェクトのプロパティ名と値に対応した2次元配列に変換されます。

続いて、変換した後の配列に対してforEachメソッドでループ処理を実行します。
ここでは配列の要素を変数vに渡します。

JS コード例

property.forEach(function(v){
	zoo += v.join(':');
	zoo += ',';
});

変数vに対してjoinメソッドを実行します。
プロパティ名と値の関係が分かるように、文字列の区切りを「:」に指定しているところがポイントです。

ここのループ処理によって、配列の要素「["name", "cat"]」が文字列の「name:cat」へと変換されていきます。
変換したら末尾に「,」を追加して、「name:cat,id:150001」のように区切ります。

この処理を配列の要素の数だけ繰り返していくと、最終的に「name:cat,id:150001,voice:にゃん,name:dog,id:150002,voice:ワン,name:mouse,id:150003,voice:チュウ,」という文字列を取得することができます。

擬似的な連想配列を文字列にする

配列の添字（キー）に文字列を使用している場合、擬似的な連想配列となりますが実際には要素ではなくオブジェクトのプロパティになります。
そのため、そのまま配列のjoinメソッドを実行するだけでは文字列を作成することができません。
以下のような空の値になってしまいます。

JS コード例

let animals = new Array();
animals["a"] = 'cat';
animals["b"] = 'dog';
animals["c"] = 'mouse';

let animals_str = animals.join();
console.log(animals_str);
// （空）

オブジェクトのプロパティと値のセットを文字列にするためには、配列を1つ別に作成して対応します。

JS コード例

let animals = new Array();
animals["a"] = 'cat';
animals["b"] = 'dog';
animals["c"] = 'mouse';

let zoo = new Array();

for (let k in animals) {
	zoo.push(k + ':' + animals[k]);
}

let animals_str = zoo.join();
console.log(animals_str);
// a:cat,b:dog,c:mouse

擬似的な連想配列であるanimalsとは別に、新しい配列をzooに作成しておきます。
この新しい配列に、for…in文でanimalsから添字（キー）と値を1つずつ取り出し、zooへpushメソッドを使って値を追加していきます。
このとき、添字（キー）と値は「:」を間に挟んだ1つの文字列としてzooに挿入されます。

最後に、配列zooに対してjoinメソッドを実行して最終的な1つの文字列を作成します。
今回はjoinメソッドを使う形で解説していますが、for…in文によるループだけで文字列を作成する方法もあります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。