JavaScriptで配列の要素を結合して文字列に変換したい場合、join()メソッドを使用します。今回は、join()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。
目次 非表示
join()メソッドは、配列の要素を指定した区切り文字で結合し、1つの文字列として返すメソッドです。
JavaScript
array.join(separator);| パラメータ | 説明 |
|---|---|
separator | （省略可能）要素を結合する際の区切り文字（デフォルトは , ） |
JavaScript
const drinks = ['coffee', 'espresso', 'cappuccino'];
const result = drinks.join();
console.log(result); // 'coffee, espresso, cappuccino'配列drinksの要素を,で区切って1つの文字列に結合します。デフォルトの区切り文字は ,です。
JavaScript
const words = ['hello', 'world', 'JavaScript'];
const sentence = words.join('-');
console.log(sentence); // 'hello-world-JavaScript'JavaScript
const words = ['Welcome', 'to', 'JavaScript'];
const sentence = words.join(' ');
console.log(sentence); // 'Welcome to JavaScript'JavaScript
const lines = ['Line 1', 'Line 2', 'Line 3'];
const multilineText = lines.join('\n');
console.log(multilineText);
/* 出力：
Line 1
Line 2
Line 3
*/JavaScript
const numbers = [100, 200, 300, 400];
const csvString = numbers.join(',');
console.log(csvString); // '100,200,300,400'JavaScript
const pathSegments = ['https:', '', 'example.com', 'page', 'index.html'];
const url = pathSegments.join('/');
console.log(url); // 'https://example.com/page/index.html'JavaScript
const items = ['<li>Item 1</li>', '<li>Item 2</li>', '<li>Item 3</li>'];
const listHtml = `<ul>${items.join('')}</ul>`;
console.log(listHtml);
// 出力
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
JavaScript
const arr = ['A', 'B', 'C'];
const result = arr.join('-');
console.log(arr); // A, B, C（元の配列はそのまま）
console.log(result); // 'A-B-C'join()は元の配列を変更せず、新しい文字列を返します。
JavaScript
console.log([].join()); // 空の文字列
console.log([].join('-')); // 空の文字列空の配列にjoin()を適用すると、空の文字列''が返ります。
JavaScript
const data = ['a', null, 'b', undefined, 'c'];
console.log(data.join('-')); // 'a--b--c'nullやundefinedの要素はjoin()を適用すると、空文字列''に変換される。
