JavaScriptのArray.join()メソッドとは？配列を文字列に結合する使い方を解説
Array.join()メソッドとは
JavaScriptのArray.join()メソッドは、配列内のすべての要素を指定した区切り文字で連結し、ひとつの文字列として返すメソッドです。配列をカンマ区切りのテキストに変換したい場合や、独自の区切り文字を使ってデータを整形したい場合などに活用できます。
基本構文
array.join(separator)
separatorには、要素同士をつなぐ区切り文字を指定します。引数を省略した場合は、デフォルトでカンマ（,）が使用されます。
押さえておきたいポイント
- 引数を省略すると、カンマ区切りの文字列が返される
- 元の配列は変更されない（非破壊的なメソッド）
- 空の配列に対しては空文字列が返される
実装例1：区切り文字なしで結合する
まず、引数を指定せずにjoin()メソッドを使用した基本的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p>これは配列ですか？</p>
<p id="test"></p>
<script>
var arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
var res = document.getElementById("test");
res.innerHTML = Array.isArray(arr)+" = "+arr.join()
</script>
</body>
</html>
出力結果
この例では、Array.isArray(arr)によって変数arrが配列であることを確認した上で、join()によりすべての要素がカンマ区切りの文字列として表示されます。引数を渡していないため、各要素は自動的にカンマで連結されています。
実装例2：区切り文字を指定して結合する
次に、任意の区切り文字を指定した場合の例です。
<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p id="test"></p>
<script>
var arrStud = ["Laptop", "Desktop", "Tablet"];
document.getElementById("test").innerHTML = "初期配列 = "+arrStud+", <br>区切り文字付き文字列 = "+arrStud.join("...");
</script>
</body>
</html>
出力結果
この例では、初期状態の配列と、「...」を区切り文字として連結した文字列の両方が画面に出力されます。このように、join()メソッドの引数に任意の文字列を渡すことで、自由なフォーマットで配列を文字列化することが可能です。
まとめ
Array.join()メソッドを使えば、配列の要素を簡単にひとつの文字列へと結合できます。区切り文字を省略すればカンマ区切りになり、任意の文字列を指定すれば柔軟な形式での出力が可能です。ログの出力やCSV形式データの生成など、さまざまな場面で役立つ便利なメソッドなので、ぜひ日々の開発で活用してみてください。
-
JavaScriptのArray.flat()メソッドとは？使い方をわかりやすく解説
Array.flat()メソッドの基本JavaScriptのArray.flat()メソッドは、ネストされた（入れ子になった）配列を、指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列は変更されず、新しい平坦化された配列が生成される点が特徴です。引数には平坦化の深さ（depth）を数値で指定します。深さを指定しない場合のデフォルト値は「1」です。また、「Infinity」を指定すると、どれほど深くネストされた配列でも完全に平坦化できます。構文arr.flat(depth)depth（省略可能）：ネストされた配列を展開する深さ。デフォルトは1。サンプルコード以下は、Ar
-
JavaScriptのArray.prototype.includes()メソッドとは？配列内に特定の要素が含まれるか判定する方法
Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement：検索対象となる要素を指定します。 fromIndex（省略可能）：検索を開始するインデックス位置です。省略した場合は先頭（0）から検索されます。 サンプルコード 以下は、in