JavaScriptのjoinメソッドは、配列の組み込みメソッドです。配列の要素を指定した文字、セパレータ(separator)で複数の要素をつなぎ合わせ、一つの文字列を作り出すことができます。この記事ではjoinメソッドの基本的な使い方を説明しています。
JavaScriptのjoinとは
JavaScriptのjoinメソッドは、配列であるArrayオブジェクトの組み込みメソッドであり、配列の各要素を指定した文字(separator: セパレータ)で連結し、新たな文字列を生成します。
データを解析し、配列に指定したデータを格納している場合など、joinメソッドを使うことで必要な文字列を生成することができます。joinメソッドはJavaScriptの中でもとても基本的なメソッドの一つになります。
今回は、このJavaScriptのjoinメソッドについて説明していきます。
joinを使って配列の連結を行う方法
JavaScriptのjoinメソッドの基本的な使い方はいたって簡単で、配列であるArrayオブジェクトと区切り文字であるセパレータ(separator)を指定するだけです。
重要なポイントは、配列(Arrayオブジェクト)とセパレータ(separator)です。ここではそれぞれの特徴や注意すべき使い方、joinメソッドのコード例などを紹介していきます。
joinメソッドの基本構造
joinメソッドの基本構造はいたって簡単で、配列であるArrayオブジェクトに”.join( separator )”をくっつけるだけです。具体的には下記が基本構造になります。それぞれわかりやすいように変数を宣言する形にしています。
// 基本形
// var array = ["要素1", "要素2", "要素3",...]
// var test_join = array.join( separator )
// 戻り値
// "要素1要素2要素3..."JavaScriptの配列とは
joinメソッドで登場する配列と呼ばれるArrayオブジェクトは、JavaScriptの標準オブジェクトの一つで、内部で複数の要素を持つオブジェクトです。角かっこ( [ )で複数の要素を囲んでいます。具体的には下記のようなものが配列として認識されます。
// 配列
var test_arrayOBJ = ["cat", "dog", "lion", "fox"]
var test_arrayOBJ2 = ["cat", "dog", "lion", "fox", 1, 100] // 数字を混在Arrayオブジェクトは、その要素が必ずしも文字列に限定されるわけではなく、数字を混在させることも可能です。
セパレータ(separator)を使った基本的な使い方
JavaScriptのjoinメソッドの重要なポイントの1つであるセパレータ(separator)は、Arrayオブジェクトの各要素を繋ぐ区切り文字のことです。このセパレータの設定を変えることで自在に文字列を作り出すことができます。下記のコード例を見てみましょう。
var test_array = ["0000", "1111", "2222", "3333"]
var test_join = test_array.join('abcd')
console.log(test_join)
//戻り値
0000abcd1111abcd2222abcd3333このコード例では、要素を繋ぐ文字であるセパレータ(separator)に”abcd”を使っています。戻り値で各要素を繋ぐ部分に”abcd”に付け加えられていることが確認できます。
JavaScriptのjoinメソッドでは配列であるArrayオブジェクトとセパレータ(separator)を指定することで、配列の各要素をつなぎ合わせた文字列を作り出すことができます。
セパレータ(separator)にハイフン(-)を代入する
セパレータ(separator)にはハイフンなどの記号も指定することができます。電話番号や郵便番号などではハイフンを使い見やすく表記したりすることがありますが、そういったときにもjoinメソッドを有効活用することができます。下記のコード例で確認して見ましょう。
// 基本的な使い方 => ハイフン
var test_array2 = ["03", "1234", "5678"];
var test_join2 = test_array2.join('-');
console.log(test_join2);
//戻り値
03-1234-5678配列あるArrayオブジェクトのtest_array2を対象としてjoinメソッドを使い、セパレータ(separator)にハイフン(-)を指定しています。
その結果、戻り値が電話番号のようにハイフンでつながれた文字列になっていることがわかります。このように記号を指定することでより自由自在に配列をつなぎ合わせることができます。
セパレータ(separator)にクオーテーション(”)を代入する
JavaScriptのjoinメソッドのセパレータ(separator)では、接続する文字にクオーテーションを指定することもできます。JavaScriptでは、文字列オブジェクトを表現するのに、クオーテーションを使用します。
クオーテーションはシングルクオーテーション(‘)でもダブルクオーテーション(“)でもどちらも使うことができます。下記コードはJavaScriptでは共に文字列を表しており、同じ値と見なされます。
// 文字列オブジェクト
var stringObject1 = "Hi, Jon! How are you?"
var stringObject2 = 'Hi, Jon! How are you?'一方でJavaScriptのjoinメソッドではセパレータ(separator)を指定するのにクオーテーションを使用します。
そのため、文字列を表現するクオーテーションとjoinメソッドのセパレータ(separator)が競合することが考えられますが、これはシングルクオーテーションとダブルクオーテーションを使い分けすることで回避することができます。
つまり、セパレータ(separator)でシングルクオーテーションを使いたい場合は文字列オブジェクトの表現にダブルクオーテーションを使い、反対にセパレータ(separator)でダブルクオーテーションを使いたい場合は文字列オブジェクトの表現にシングルクオーテーションを使うということです。
次のコード例で確認してみましょう。
// 基本的な使い方 => クオーテーション
// パターン①
var test_array3 = ["03", "1234", "5678"];
var test_emptyString = test_array3.join("'");
console.log(test_emptyString)
// パターン②
var test_array3 = ["03", "1234", "5678"];
var test_emptyString = test_array3.join('"');
console.log(test_emptyString)
//戻り値
03'1234'5678 // パターン①
03"1234"5678 // パターン②パターン①ではセパレータ(separator)でシングルクオーテーションを指定するために文字列オブジェクトの表記にダブルクオーテーションを使っています。
一方でパターン②ではセパレータ(separator)にダブルクオーテーションを指定するために文字列オブジェクトの表記にシングルクオーテーションを使っています。
戻り値でそれぞれ使いたいクオーテーションマークを使うことができていることが確認できます。このようにして、joinメソッドのセパレータ(separator)でもクオーテーションを指定することができます。
Arrayをカンマの区切りで連結する
次はJavaScriptのjoinメソッドの少し特殊な特徴を見てみます。joinメソッドではセパレータ(separator)に文字列を指定することでその文字で区切られた文字列を生成することができますが、セパレータ(separator)に何も指定しない場合、自動的に区切り文字にカンマ(,)が使われるように設定されています。
次の章からセパレータで指定する方法とセパレータに何も指定しない方法の2つのコード例を見て、実証していきます。
joinメソッドの引数にカンマ(,)を代入する
まずは、セパレータ(separator)にカンマを(,)を指定する方法です。ここでは下記のように基本的な使い方をして、カンマ区切りの文字列を生成しています。
// joinメソッドの特徴 -> カンマ区切り
var array = ["03", "1234", "5678"];
var test_commaSeparator = array.join(',');
console.log(test_commaSeparator)
// 戻り値
03,1234,5678引数を省略することも可能
次はセパレータ(separator)を指定しない方法です。先ほども記載したようにJavaScriptのjoinメソッドでは、セパレータ(separator)を指定しない場合、カンマ区切りの文字列が生成されます。次のコードで確認してみましょう。
var array = ["03", "1234", "5678"];
var test_noSeparator = array.join();
console.log(test_noSeparator)
//戻り値
03,1234,5678セパレータ(separator)に何も指定しない場合、カンマ区切りの文字列が生成されていることが戻り値から確認できます。
このようにカンマ区切りの文字列を生成する場合は、セパレータ(separator)で指定する方法とセパレータ(separator)で指定しない方法の2つの方法を使うことができます。
JavaScriptのjoinで配列や文字列を連結する方法のまとめ
以上がJavaScriptのjoinメソッドの使い方です。重要なポイントは配列であるArrayオブジェクトとセパレータ(separator)です。セパレータを活用することで、文字列だけでなくハイフンなどの記号でもArrayオブジェクトの要素を繋ぐことができます。
またクオーテーション記号を使う場合は、シングルクーテーション(‘)とダブルクオーテーション(“)を使い分けることで使いたいクオーテーション記号を使うことができます。さらにセパレータ(separator)を指定しない場合は、カンマ(,)区切りの文字列が生成されます。
このようにセパレータ(separator)を使いこなすことで多様な文字列を生成できるのが、JavaScriptのjoinメソッドです。基本構造や使い方を把握し、どんどん活用していきましょう。
