定義と使い方

配列の join() 関数は、指定された 配列の各要素を、指定した区切り文字で結合（join）して一つの文字列として返します。

この関数は、配列を文字列に変換する、簡単で便利な方法です。

基本例

JavaScript 
/* * 文字列タイプ要素の結合
 */

const fruits = ["りんご", "バナナ", "いちご"];

console.log(fruits.join());
// "りんご,バナナ,いちご"

console.log(fruits.join(""));
// "りんごバナナいちご"

console.log(fruits.join(" "));
// "りんご バナナ いちご"

console.log(fruits.join(", "));
// "りんご, バナナ, いちご"

console.log(fruits.join("-"));
// "りんご-バナナ-いちご"

console.log(fruits.join("+"));
// "りんご+バナナ+いちご"


/* * 数値タイプ要素の結合
 */

const numbers = [1, 2, 3];

console.log(numbers.join());
// "1,2,3"

console.log(numbers.join(""));
// "123"

console.log(numbers.join("-"));
// "1-2-3"


/* * Booleanタイプ要素の結合
 */

const bool = [true, false];

console.log(bool.join());
// "true,false"

console.log(bool.join(""));
// "truefalse"

console.log(bool.join("-"));
// "true-false"


/* * オブジェクトタイプ要素の結合
 */

const fruitsObject = ["りんご", "バナナ", {name: "いちご", color: "赤"}];

console.log(fruitsObject.join());
// "りんご,バナナ,[object Object]"

console.log(fruitsObject.join(""));
// "りんごバナナ[object Object]"

console.log(fruitsObject.join("-"));
// "りんご-バナナ-[object Object]"


/* * 配列要素の結合
 */

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix.join());
// "1,2,3,4,5,6,7,8,9"

console.log(matrix.join(""));
// "1,2,34,5,67,8,9"

console.log(matrix.join("-"));
// "1,2,3-4,5,6-7,8,9"


/* * 疎な配列（Sparse Array）
 */

const sparseArr = [1, , 3, undefined];

console.log(sparseArr.join());
// "1,,3,"

console.log(sparseArr.join(""));
// "13"

console.log(sparseArr.join("-"));
// "1--3-"

構文

JavaScript 
arr.join()
arr.join(separator)

arrは join() 関数を適用する配列です。

引数

配列 join() 関数の引数
separator オプション。
各配列要素を結合する区切り文字であり、文字列で指定します。
省略した場合は、コンマ（,）が使用されます。

戻り値

配列のすべての要素を、指定した区切り文字で結合した文字列です。

引数による戻り値

引数に応じて返される値の例です。

元の配列が空の配列の場合

元の配列が空の配列の場合、要素が存在しないため文字列に変換する対象がなく、空の文字列（""）が返されます。

JavaScript 
const emptyArr = [];

console.log(emptyArr.join(",")); // "" => 空の文字列を返す

配列の要素が undefined または null の場合

配列の要素が undefined や null の場合、該当する要素は空の文字列（""）として扱われます。そのため、空の文字列（""）が返されます。

JavaScript 
const arr = [undefined, 1, null];

console.log(arr.join(",")); // ",1,"

配列の要素が一つのみの場合

配列に要素が一つだけ存在する場合でも、join() 関数はその要素を文字列として返します。
この際、指定した区切り文字で結合する相手の要素がないため、配列内にある一つの要素のみが文字列として返されることになります。

JavaScript 
const arr = ["うどん"];

console.log(arr.join(", ")); // "うどん"

活用例

join() 関数は、さまざまな状況で効果的に活用できます。ここでは、いくつかの例を紹介します。

配列要素を反転させて文字列として結合する

JavaScript 
const numbers = [1, 2, 3, 4, 5];
const reversedString = numbers.reverse().join("");

console.log(reversedString); // "54321"

コードの補足説明
配列の reverse() 関数は、元の配列の要素の順序を逆（reverse）に直接入れ替えます。

配列要素をHTMLリストアイテムとして結合する

JavaScript 
const vegetables = ["にんじん", "ブロッコリー", "じゃがいも"];
const htmlList = "<ul><li>" + vegetables.join("</li><li>") + "</li></ul>";

console.log(htmlList);
// "<ul><li>にんじん</li><li>ブロッコリー</li><li>じゃがいも</li></ul>"

オブジェクトデータを利用する

以下の例は、join() 関数を使用してオブジェクト配列の要素を結合する方法を示しています。各要素のオブジェクトデータを活用する方法を理解するのに役立つでしょう。

JavaScript 
// オブジェクトが格納された配列
const people = [
    {name: "結衣", age: 25},
    {name: "翔太", age: 30},
    {name: "美咲", age: 28}
];

// 配列のオブジェクトの名前と年齢を結合して文字列にする
const personStrings = people.map(function(person) {
    return "<li>" + person.name + "さんは " + person.age + "歳です。</li>";
});

// 配列の文字列を <ul> タグで囲み、空の文字列で結合して全体の文字列を作成
const resultString = "<ul>" + personStrings.join("") + "</ul>";

console.log(resultString);
// "<ul><li>結衣さんは 25歳です。</li><li>翔太さんは 30歳です。</li><li>美咲さんは 28歳です。</li></ul>"

コードの補足説明
map() 関数は、配列を反復処理し、各要素にコールバック関数を適用して生成された結果をまとめた新しい配列を返します。

動的なURLの生成

JavaScript 
const baseURL = "https://api.example.com";

const params = {
    category: "books",
    limit: 10,
    sort: "desc"
};

// オブジェクトのプロパティをクエリ文字列に変換
const queryString = Object.keys(params)
    .map(key => key + "=" + encodeURIComponent(params[key]))
    .join("&");

const endpoint = `${baseURL}/search?${queryString}`;

console.log(endpoint);
// "https://api.example.com/search?category=books&limit=10&sort=desc"

コードの補足説明
encodeURIComponent() 関数は、URIコンポーネントをエンコードします。

互換性

配列 join() 関数の互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Node.js
Node.js
join() 1 12 1 1 0.10

仕様書

配列 join() 関数の仕様
仕様書
join() ECMAScript® 2026 Language Specification
#sec-array.prototype.join

参考資料

関連項目