配列を単一の文字列に変換する - join, toString, toLocaleString

《初回公開：2023/10/19 , 最終更新：未》

【　目次　】

配列を単一の文字列に変換する - join, toString, toLocaleString

join

joinメソッドは、配列の全ての要素を指定した区切り文字で連結し、1つの文字列として返す。

構文: array.join(separator)

引数

separator (オプション): 配列の要素を連結する際に使用する区切り文字、デフォルトは ,（カンマ）。

joinメソッドの例を示す。

const array = ["a", "b", "c", 1, 2, { name: "愚鈍人", age: 99 }];
let result = "「" + array.join("」と「") + "」";
console.log(result);    // 「a」と「b」と「c」と「1」と「2」と「[object Object]」

joinメソッドはtoStringメソッドを使って配列の要素を文字列に変換するため、オブジェクトは[object Object]として変換してしまう。
以下のコードはクラスを定義してtoStringメソッドをオーバライトする例。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    toString() {
        return `{name: ${this.name}, age: ${this.age}}`;
    }
}
const array = [new Person("愚鈍人", 99), new Person("愚鈍人の妻", 17)];
let result = "「" + array.join("」と「") + "」";
console.log(result);    // 「{name: 愚鈍人, age: 99}」と「{name: 愚鈍人の妻, age: 17}」

JoinメソッドはString.prototype.split()メソッドと逆の動作になる。

const array = ["a", "b", "c", 1, 2];
let result = array.join("+");
console.log(result);    // a+b+c+1+2
console.log(result.split("+")); // ['a', 'b', 'c', '1', '2']

toString

toString メソッドは、JavaScriptの組み込みオブジェクトである全てのオブジェクトが持つメソッド。
オブジェクトを文字列として表現するために使用される。
配列に対して toString メソッドを呼び出すと、配列の各要素がカンマで区切られた文字列として結合されて返される。
toStringメソッドは内部で区切り文字カンマを引数としたjoinメソッドを呼び出し配列の要素を結合している。

構文: array.toString()
引数: なし。
戻り値: 配列の各要素がカンマで区切られた文字列を返す

例

{
    const array = [1, 2, 'a', 'b'];
    console.log(array.toString());  // 1,2,a,b
}
{
    const array = [1, 2, 'a', 'b'];
    // toString メソッドは区切り文字カンマを引数としたjoinメソッドと等価
    console.log(array.join());  // 1,2,a,b
    // 別のは区切り文字を使いたい場合はjoinメソッドを使う。
    console.log(array.join("と"));   // 1と2とaとb
}
{
    // 空の配列を表示
    const array = [];
    console.log("[" + array.toString() + "]");  // []
}
{
    // スパース配列の場合、空のスロットの要素は空文字に
    const array = ["a", , "c", , "e"];
    console.log(array.toString());  // a,,c,,e
}
{
    // undefinedの要素も空文字に
    const array = ["a", undefined, "c", undefined, "e"];
    console.log(array.toString());  // a,,c,,e
}

toLocaleString

このメソッドは、配列内の要素をローカルの文字列表現に変換して返すために使用される。
要素がプリミティブ値である場合、それらは自動的に文字列に変換される。
要素が数値や日付などを示すオブジェクトである場合に、言語と地域に沿った形式でそれを出力するのに有効。

構文

array.toLocaleString([locales[, options]])

引数

locales（オプション）

ロケール（言語と地域）を指定する文字列または文字列の配列。デフォルトのロケールは実行環境のデフォルト。
以下を参照

Intl - JavaScript | MDN

options（オプション）

ロケールに対する詳細な設定プロパティを指定したオブジェクト
以下を参照

戻り値

配列の各要素がカンマで区切られたロケールに沿った文字列を返す。

例

const array = [1, 2, 3.5];
const result = array.toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
});
console.log(result);    // $1.00,$2.00,$3.50