JavaScript【 array 】7 ~ 配列の連結

Two puzzle parts connected with red jigsaw piece, concept particular person, three-dimensional rendering

配列で用意されているメソッドの中には、要素を連結して文字列にすることができる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 20px 0px;">
    <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 」に置換されました。

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です