ITコラム

Red puzzle connection closeup #2

JavaScript

2017.10.23

JavaScript【 array 】7 ~ 配列の連結

配列で用意されているメソッドの中には、要素を連結して文字列にすることができるjoinメソッドがあります。
今回は、このjoinメソッドを使いながら、配列の連結について紹介します。

目次

 
1.joinメソッドとは
2.joinメソッドで改行させる
3.joinメソッドで置換させる

1.joinメソッドとは

 
joinメソッドは、Arrayオブジェクトで用意されているメソッドで、配列の要素を繋げた文字列を返します。
(Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。)

joinメソッドを使用して、配列データから特定の文字列を生成したり、置換メソッドと同等の機能を実現できたりします。

joinメソッドは、次のように使用します。

var 変数名 = [値1, 値2, 値3, ...];

変数名.join( セパレータ );

配列変数にjoinメソッドを繋げると、配列の各要素がすべて連結されて文字列として生成されます。

joinメソッドの引数に指定できるセパレータ(文字列)は、配列の各要素を繋げる際に挿入されます。

例えば、セパレータを指定する場合と、指定しない場合とで、次のような違いがあります。
各ボタンをクリックしてみて下さい。

配列 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “ぶどう”, “もも”];
上の配列を連結した文字列を表示します

 
 

 

 
 

ソースコードは次の通りです。

<script type="text/javascript">
<!--

var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];

function dispAry() {
    document.getElementById("dat").value = fruits.join();
}

function dispAry2() {
    document.getElementById("dat2").value = fruits.join(":");
}

//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        配列 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];
        上の配列を連結した文字列を表示します
        <div style="display:inline-flex;">
            <input type="text" id="dat" placeholder="ここに表示します" size="40"> 
           <input type="button" value="セパレータ指定無" onClick="dispAry()">
        </div>
 
        <div style="display:inline-flex;">
            <input type="text" id="dat2" placeholder="ここに表示します" size="40"> 
           <input type="button" value="セパレータ指定有" onClick="dispAry2()">
        </div>
    </form>
</div>

上のサンプルは、「 変数名.join() 」で、下のサンプルは、「 変数名.join(“:”) 」で、それぞれ配列要素を連結しています。

joinメソッドの引数を省略した場合は、カンマ(,)が指定されたものとして処理されます。

▲目次へ戻る

 

2.joinメソッドで改行させる

 
先ほどのサンプルでは、配列要素を連結して横並びの文字列として表示しましたが、joinメソッドを使って改行を行うと、要素毎に縦に並べることができます。

joinメソッドの引数に指定できるセパレータとして、改行タグの「 <br> 」を指定すると、改行することができます。

配列 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “ぶどう”, “もも”];

上の配列を連結した文字列を表示します
 

 

 

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
    document.getElementById("dat").innerHTML = fruits.join("<br>");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        配列 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];
        <div style="display:inline-flex;">
            上の配列を連結した文字列を表示します
           <input type="button" value="表示" onClick="dispAry()">
        </div>
       <div id="dat" style="background-color : #EEE; width : 200px; padding : 0px 20px;"></div> 
    </form>
</div>

▲目次へ戻る

 

3.joinメソッドで置換させる

 
joinメソッドを、splitメソッドと組み合わせると、文字列を置換することができます。

splitメソッドは、文字列を分割して配列に変換するメソッドで、次のように使用します。

var 変数名 = 文字列;

変数名.split( 分割文字 );

splitメソッドは、文字列内で分割したい箇所の文字を引数に指定すると、分割文字毎に配列の要素として、配列データに変換します。

例えば、「 2000/01/01 」という文字列を、「 文字列.split(“/”) 」として「 / 」の箇所で分割すると、次のような配列データとなります。

「 2000/01/01 」を「 / 」で分割します 
 

   

 

このようにsplitメソッドを使用して新たに生成された配列を、joinメソッドを使用してさらに別の文字列と連結することができます。

「 2000/01/01 」を「 / 」で分割して「 ? 」で連結します 
 

   

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {
    var str =  "2000/01/01";
    document.getElementById("dat").value = str.split("/").join("?");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <div style="display:inline-flex;">
            「 2000/01/01 」を「 / 」で分割して「 ? 」で連結します
           <input type="button" value="表示" onClick="dispAry()">
        </div>
       <input type="text" id="dat" placeholder="ここに表示します"> 
    </form>
</div>

「 str.split(“/”).join(“?”) 」によって、「 2000/01/01 」が、「 2000?01?01 」に置換されました。

このように、複数のメソッドを組み合わせて、異なる処理結果を得るのも、プログラミングの面白さだと思います。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.