ITコラム

JavaScript

2017.10.23

JavaScript【 array 】7 ～配列の連結

配列で用意されているメソッドの中には、要素を連結して文字列にすることができるjoinメソッドがあります。
今回は、この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(“/”) 」として「 / 」の箇所で分割すると、次のような配列データとなります。

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

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

<script type="text/javascript">
<!--
function dispAry() {
    var 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(“?”) 」によって、「２０００／０１／０１」が、「２０００?０１?０１」に置換されました。

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

▲目次へ戻る