JavaScript【 array 】7 ～ 配列の連結

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. joinメソッドとは

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

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

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

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

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

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

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

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

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

<script type="text/javascript">

let 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() {
    let 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メソッドは、文字列を分割して配列に変換するメソッドで、次のように使用します。

    let 変数名 = 文字列;

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

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

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

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

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

<script type="text/javascript">
function dispAry() {
    let str =  "２０００／０１／０１";
    document.getElementById("dat").value = str.split("／").join("?");
}
</script>

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

「 str.split(“／”).join(“?”) 」によって、「 ２０００／０１／０１ 」が、「 ２０００?０１?０１ 」に置換されました。

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

▲目次へ戻る