---
type: reference
language: javascript
slug: array/join
title: "join() — 配列を1本の文字列にする"
title_tag: "JavaScript の join() — 区切り文字と null が消える罠"
summary: >
  join() は要素を区切り文字で繋ぎます。null と undefined が空文字になること、
  区切りを省くとカンマになること、入れ子の配列が平らに見えることまで実行して確かめます。
description: >
  join() では null と undefined が空文字になり、区切り文字だけが残ります。
  空配列が空文字になること、concat() や toString() との違いまで実行して確かめられます。
status: published
difficulty: 1
minutes: 6

versions:
  verified: "Node 22.22.3"
  since: "ES1"
  deprecated: null
  removed: null

sources:
  - title: "Array.prototype.join — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.join"
  - title: "Array.prototype.concat — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.concat"
  - title: "Array.prototype.join() — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join"

terms: [区切り文字, 文字列化, 非破壊]

links:
  related:
    - javascript/reference/string/template
    - javascript/reference/string/split
    - javascript/reference/array/push
    - javascript/reference/array/map

content_updated_at: 2026-09-08
published_at: 2026-09-08
---

```js run
console.log([1, 2, 3].join('-'));
console.log([1, 2, 3].join());
console.log([].join('-') === '');
```
```output
1-2-3
1,2,3
true
```

**引数を省くとカンマ**になります。空文字にしたいなら `join('')` と明示してください。

元の配列は変わりません。返るのは新しい文字列です。

## `null` と `undefined` は空文字になる

**ここがいちばん事故になります。**

```js bad
console.log([1, null, undefined, 2].join('-'));
```
```output
1---2
```

消えるのは値だけで、**区切り文字は残ります。**
「`-` が並んでいる」ことでしか気づけません。

落としたいなら、先に取り除いてください。

```js run
const values = [1, null, undefined, 2];

console.log(values.filter((v) => v != null).join('-'));
```
```output
1-2
```

[dim:`v != null` は `null` と `undefined` の両方に当たります。ここでは意図した書き方です。]

`0` や空文字は**残ります。**

```js run
console.log([0, '', false, 'a'].join('-'));
```
```output
0--false-a
```

`false` は `'false'` になり、空文字だけが消えたように見えます。

## 穴も空文字になる

```js run
const holed = [1, , 2];

console.log(holed.length);
console.log(holed.join('-'));
```
```output
3
1--2
```

穴と `undefined` は[bad:繋いだ後では見分けが付きません。]

## 入れ子は平らに見える

```js run
console.log([[1, 2], [3]].join('-'));
```
```output
1,2-3
```

内側の配列は、**自分のカンマで繋がれてから**外側に並びます。
指定した区切りが効くのは[key:いちばん外側だけ]です。

平らにしてから繋いでください。

```js run
console.log([[1, 2], [3]].flat().join('-'));
```
```output
1-2-3
```

→ [入れ子の配列を平らにする](/ja/javascript/how-to/array/flatten/)

## `toString()` と `String()` との関係

```js run
console.log([1, 2].toString());
console.log(String([1, 2]));
console.log(`${[1, 2]}`);
console.log([1, 2] + '');
```
```output
1,2
1,2
1,2
1,2
```

**どれも `join()` を呼んでいます。** 区切りはカンマで固定です。

配列をそのまま文字列に混ぜると、この形になります。
[bad:意図してカンマ区切りにしたのか、うっかり混ざったのかが読み手に伝わりません。]
繋ぐつもりなら `join()` と書いてください。

## `concat()` は別のもの

`join()` は**文字列**を返し、`concat()` は**配列**を返します。

```js run
const a = [1, 2];
const b = [3];

console.log(a.concat(b));
console.log(a.concat(4, [5, [6]]));
console.log(a);
```
```output
[ 1, 2, 3 ]
[ 1, 2, 4, 5, [ 6 ] ]
[ 1, 2 ]
```

配列は1段だけ開かれ、それ以外はそのまま入ります。
`a` は変わっていません。

いまはスプレッド構文で書くほうが多いです。
[dim:`concat()` が要るのは、配列かどうか分からないものを混ぜるときです。要素なら1つとして、配列なら開いて入ります。]
→ [スプレッド構文と残余](/ja/javascript/reference/operator/spread/)

## 逆向き：文字列を配列に戻す

```js run
const joined = [1, 2, 3].join('-');

console.log(joined.split('-'));
console.log(joined.split('-').map(Number));
```
```output
[ '1', '2', '3' ]
[ 1, 2, 3 ]
```

**戻ってくるのは文字列**です。数として使うなら変換が要ります。
→ [String.prototype.split()](/ja/javascript/reference/string/split/)

区切り文字が値の中にも入っていると、**戻せません。**

```js bad
const names = ['田中', '佐藤・鈴木'];
const joined = names.join('・');

console.log(joined);
console.log(joined.split('・').length);
```
```output
田中・佐藤・鈴木
3
```

2件だったものが3件になりました。
値に含まれない区切りを選ぶか、[key:JSON にしてください]。
→ [JSON.parse() と JSON.stringify()](/ja/javascript/reference/json/parse/)

## まとめ

- 引数を省くと**カンマ**。空文字なら `join('')` と書く
- **`null` / `undefined` / 穴は空文字になり、区切りだけが残る**
- `0` や `false` は残る
- 入れ子は内側がカンマで繋がれる。**先に `flat()`**
- `String()` も `${}` も `+` も、中では `join()` を呼んでいる
- `concat()` が返すのは**配列**
- 値に区切り文字が入っていると[bad:元に戻せない]