9 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptの.join()について簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

.join()とは

配列の要素を文字列として連結するメソッドです。

メソッドに引数を記述することで要素を引数で区切ることができます。(省略時は,(カンマ)です。)

サンプルコードを見た方が理解しやすいのでそうします。

const arr = [1, 2, 3];

console.log(arr.join()); // 結果は"1,2,3"
console.log(arr.join(' - ')); // 結果は"1 - 2 - 3"

const arr = [1, 2, 3];

console.log(arr.join()); // 結果は"1,2,3"
console.log(arr.join(' - ')); // 結果は"1 - 2 - 3"

メリット

元の配列を変更しないので使い回しが利きます。

例えば下記のコードです。

const tags = ['vue', 'laravel', 'php'];

const forUrl  = tags.join('+');
console.log(forUrl);  // 結果は"vue+laravel+php"

const forView = tags.join(', ');  
console.log(forView)// 結果は"vue, laravel, php"

const tags = ['vue', 'laravel', 'php'];

const forUrl  = tags.join('+');
console.log(forUrl);  // 結果は"vue+laravel+php"

const forView = tags.join(', ');  
console.log(forView)// 結果は"vue, laravel, php"

.join()を使うとtagsはずっと「[‘vue’, ‘laravel’, ‘php’];」のままです。