JavaScriptでjoinメソッドを使う方法【初心者向け】

JavaScriptのjoinメソッドの使い方について解説しています。

簡単なサンプルコードも載せているので、実際に書きながら書き方を理解してみてください。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

joinメソッドとは

joinメソッドを使用することで、Array（配列）の指定した区切り記号文字列で区切られた各要素を指定した文字列で連結することができます。

Array（配列）とは、複数のデータを格納できる変数のような箱です。一番最初に格納した値を示すのは1番目ではなく、0番目であることに気をつける必要があります。

変数とは、データを格納できる箱のようなものです。

文字連結のJavaScriptプログラムで最初に学習するのが加算演算子を使用したプログラムです。

今回はデベロッパーツールを使用したconsoleで表示してみます。

console.logの使い方の記事も参考にしてみてください。

 

プログラム

console.log('テック' + '太郎');

表示結果

テック太郎

 

同様にjoinメソッドでは、Array（配列）で指定した文字列を、連結する際は次のように記載します。

プログラム

var array = ["テック", "太郎"];
var result = array.join('');
console.log( result );

表示結果

テック太郎

 

joinメソッドの書き方

joinメソッドは次のような書き方で使用します。

join()
join(str)

 

join()の場合

join()を使用した場合、引数を指定していない状態になります。

引数とは、メソッド（関数）を使用した際に、メソッド（関数）に渡す値を意味します。

先程のテック太郎を表示するjoinプログラムでは、テック太郎と表示されました。

今回引数を指定しない方法で実行すると次のように、テック,太郎のように、引数にカンマ(“,”)が指定されたものとして処理されます。

プログラム

var array = ["テック", "太郎"];
var result = array.join();
console.log( result );

表示結果

テック,太郎

 

join(str)の場合

join(str)の場合は、strに文字列を指定します。

strとはstringの略称で、文字列を意味します。

今回は、strに:を指定します。

テック太郎と表示されていたプログラムは、join(str)にjoin(“:”)と指定することで、テック:太郎と表示されます。

プログラム

var array = ["テック", "太郎"];
var result = array.join(":");
console.log( result );

表示結果

テック:太郎

 

[PR] コーディングで副業する方法とは

実際にjoinメソッドを書いてみよう

基本的なjoinメソッドの使用方法を理解したので、さらにArray（配列）を利用したjoinの使い方を実際に書いてみましょう。

今回は、何も値が入っていない空Array（配列）を5個用意します。

そして、空Array（配列）同士を、テックアカデミー,で連結します。

空Array（配列）は空要素（何も入っていない）、結果としては、テックアカデミー,テックアカデミー,テックアカデミー,テックアカデミー,が表示されます。

しかし、実際は、（空要素）テックアカデミー,（空要素）テックアカデミー,（空要素）テックアカデミー,（空要素）テックアカデミー,（空要素）というように、（空要素）をテックアカデミー,という文字列で連結している処理をしています。

 

プログラム

var str = 'テックアカデミー,';
var result = Array(5).join( str );
console.log( result );

表示結果

テックアカデミー,テックアカデミー,テックアカデミー,テックアカデミー,

 

まとめ

joinを使用することで様々な連結処理をすることができました。

連結処理にはjoin以外にも、+=を使用したもの、+を使用したもの、concatを使用したもの等があります。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。