JavaScript 配列結合

概要：このチュートリアルでは、JavaScript 配列の join() メソッドを使用して、配列のすべての要素を区切り文字で区切られた文字列に連結する方法を学びます。

JavaScript 配列 join() メソッドの紹介

join() メソッドを使用すると、配列のすべての要素を連結し、新しい文字列を返すことができます。

Array.prototype.join([separator])Code language: CSS (css)

join() メソッドは、オプションの引数として separator を受け取ります。これは、結果の文字列内で配列の隣接する要素の各ペアを区切る文字列です。

separator を join() メソッドに渡さない場合、デフォルトではコンマになります。

配列に要素が 1 つしかない場合、join() メソッドは、separator を使用せずにその要素を文字列として返します。

配列が空の場合、join() メソッドは空の文字列を返します。

配列の要素が文字列でない場合、join() メソッドは結合する前にそれらを文字列に変換します。

join() メソッドは、undefined、null、および空の配列 [] を空の文字列に変換することに注意してください。

JavaScript 配列 join() メソッドの例

join() メソッドの使用例をいくつか見てみましょう。

1) JavaScript 配列 join() メソッドを使用して CSS クラスを結合する

次の例では、JavaScript 配列の join() メソッドを使用して CSS クラスを結合します。

const cssClasses = ['btn', 'btn-primary', 'btn-active'];
const btnClass = cssClasses.join(' ');

console.log(btnClass);Code language: JavaScript (javascript)

出力

btn btn-primary btn-active

この例では、CSS クラスのリストを保持する配列があります。 そして、join() メソッドを使用して、cssClasses 配列のすべての要素を結合し、スペースで区切られた CSS クラスの文字列を返します。

2) JavaScript 配列 join() メソッドを使用して文字列のすべての出現箇所を置換する

この例では、JavaScript 配列の join() メソッドを使用して、スペース ' ' のすべての出現箇所をハイフン (-) に置換します。

const title = 'JavaScript array join example';
const url = title.split(' ')
    .join('-')
    .toLowerCase();

console.log(url);Code language: JavaScript (javascript)

出力

javascript-array-join-exampleCode language: PHP (php)

仕組み

• まず、title 文字列をスペースで分割して、split() 文字列メソッドを使用して配列にします。
• 次に、join() メソッドを使用して、結果の配列内のすべての要素を文字列に連結します。
• 3 番目に、toLowerCase() メソッドを使用して、結果の文字列を小文字に変換します。

概要

• JavaScript 配列の join() メソッドを使用して、配列のすべての要素を区切り文字で区切られた文字列に連結します。