[javascript入門] 配列の中身を文字列連結して出力する方法まとめ

今回の投稿はjavascriptの入門編として、配列の中身を文字列結合して出力する方法のまとめとなります。

今回は下記のケースに対して説明していきます。

普通の配列の要素を結合して出力
多次元配列を結合して出力
Key:Valueオブジェクト配列を結合して出力

デバッグ時などでよく利用する場合が多いと思いますので、是非覚えておいてください。

文字列連結して出力する方法
最後に

文字列連結して出力する方法

配列要素を結合して出力

通常配列の要素を文字列として結合する場合は下記のメソッドを使います。

Array.join([結合文字列]);

このArray.join()は配列内の要素を指定した結合文字列で連結してくれます。例として下記は「カンマ(,)」区切りで文字列連結して出力しています。

const commonArr = ["aaa", "bbb", "ccc"];
console.log(commonArr.join(","));
// aaa,bbb,ccc

では配列内に数値やBoolen値が入っていた場合はどうでしょう

const commonArr2 = ["aaa", 200, true];
console.log(commonArr2.join(","));
// aaa,200,true

文字列として出力されているのがわかります。

上記のように、配列内の要素が文字列や数値にかかわらず、joinメソッドを使うことで、文字列を結合して出力してくれます。

多次元配列に対しての文字列結合

多次元配列とは、下記のように配列の要素が配列となっているケースのことを指します。

const multidimensionalArr1 = [["aaa", "bbb"], "ccc", ["ddd",["eee", "fff"]]];

実はこの多次元配列に対しても「join()」は使うことができます。

const multidimensionalArr1 = [["aaa", "bbb"], "ccc", ["ddd",["eee", "fff"]]];
console.log(multidimensionalArr1.join(","));
// aaa,bbb,ccc,ddd,eee,fff

普通にカンマ区切りで出力されているのがわかります。
同じように、多次元配列の要素に数値やBoolean値を入れてみましょう。

const multidimensionalArr2 = [["aaa", 200], "ccc", ["ddd",[true, false]]];
console.log(multidimensionalArr2.join(","));
// aaa,200,ccc,ddd,true,false

数値やBoolean値に関係なく、文字列連結されていることがわかります。

KeyValueオブジェクトを含む配列要素を文字列として結合する

KeyValueオブジェクトとは下記のようなオブジェクトを指します。

const keyValueObjectArr = [
    {
        id: "TK0001",
        name: "TK Sample1",
        isActive: true
    },
    {
        id: "TK0002",
        name: "TK Sample2",
        isActive: false
    },
    {
        id: "TK0003",
        name: "TK Sample3",
        isActive: false
    }
];

「Key: Value」のような構成が複数ある配列ですね。
この配列をまずjoin()を使って連結してみましょう。

const keyValueObjectArr1 = [
    {
        id: "TK0001",
        name: "TK Sample1",
        isActive: true
    },
    {
        id: "TK0002",
        name: "TK Sample2",
        isActive: false
    },
    {
        id: "TK0003",
        name: "TK Sample3",
        isActive: false
    }
];
console.log(keyValueObjectArr1.join(","));
// [object Object],[object Object],[object Object]

「[object Object],[object Object],[object Object]」のように出力されてしまい、要素がわかりません。

ですので、KeyValueオブジェクト配列の中身を文字列結合したい場合は、中の要素を通常配列の状態に戻してあげる必要があります。

const result = keyValueObjectArr1.map(val => {
  return 'id:' + val.id + "," + "name:" + val.name + "," + "isActive:" + val.isActive;
});
console.log(result.join(','));
// id:TK0001,name:TK Sample1,isActive:true,id:TK0002,name:TK Sample2,isActive:false,id:TK0003,name:TK Sample3,isActive:false

今回はKeyValueオブジェクトを配列かするためにmapを利用しましたが、forEachなどを使って出力することも可能です。その場合ちょっとコードが多くなっちゃうので私はお勧めしません。