【JavaScript】join()実践ガイド: 配列の要素を綺麗に文字列として結合

JavaScriptを学ぶ上で、配列の要素を文字列として結合する方法を知っておくことは必須です。その際に役立つのが「join()」メソッドです。この記事では、join()の基本から応用例、類似のメソッドとの違いまで、幅広く解説していきます。

「join()」の基本的な使い方

「join()」とは？

JavaScriptのjoin()メソッドは、配列内の全ての要素を文字列として結合し、1つの文字列を返すメソッドです。結合する際のセパレータも自由に指定できます。

let fruits = ['apple', 'orange', 'banana'];
let text = fruits.join(', ');
console.log(text); // "apple, orange, banana"

「join()」の使用例4パターン

空白をセパレータとして結合

let words = ['Hello', 'world'];
let sentence = words.join(' ');
console.log(sentence); // "Hello world"

配列の文字列要素を単なる空白で結合します。

ハイフンでの結合

let dateParts = ['2023', '09', '05'];
let date = dateParts.join('-');
console.log(date); // "2023-09-05"

日付などのフォーマット時に便利です。

セパレータなしでの結合

let numbers = [1, 2, 3];
let combined = numbers.join('');
console.log(combined); // "123"

join()の引数に空文字を設定した場合、要素は直接連結されます。

他のデータ型との結合

let mixedArray = ['Age:', 30, true];
let result = mixedArray.join(' ');
console.log(result); // "Age: 30 true"

文字列以外のデータ型も自動的に文字列化されて結合されます。

「join()」と「toString()」

「toString()」とは？

toString()もJavaScriptの配列でよく使われるメソッドの一つです。配列の要素を文字列に変換し、,で区切られた1つの文字列として返します。

let fruits = ['apple', 'orange', 'banana'];
console.log(fruits.toString()); // "apple,orange,banana"

「join()」と「toString()」の違い

join()とtoString()の主な違いは、join()はセパレータを自由に設定できるのに対して、toString()は常に,がセパレータとして使用される点です。

let numbers = [1, 2, 3];
console.log(numbers.join('-'));  // "1-2-3"
console.log(numbers.toString()); // "1,2,3"

「join()」を使用する際の注意点

配列要素の型変換

join()メソッドは配列の要素を文字列として結合します。このとき、非文字列要素は自動的に文字列型に変換される点に注意が必要です。

let mixedArray = [10, true, 'hello'];
console.log(mixedArray.join(', ')); // "10, true, hello"

「join()」の使い方まとめ

• join()メソッドを利用することで、

配列の要素を綺麗に文字列として結合できます。

• セパレータを指定することで、さまざまなフォーマットの文字列を生成することが可能です。
• toString()との違いや、非文字列要素の自動変換など、使用時の注意点も把握しておきましょう。

このガイドを参考にして、join()メソッドを上手く活用してください！