
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2017.10.23
配列で用意されているメソッドの中には、要素を連結して文字列にすることができるjoinメソッドがあります。
今回は、このjoinメソッドを使いながら、配列の連結について紹介します。
1.joinメソッドとは
2.joinメソッドで改行させる
3.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メソッドの引数を省略した場合は、カンマ(,)が指定されたものとして処理されます。
先ほどのサンプルでは、配列要素を連結して横並びの文字列として表示しましたが、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>
joinメソッドを、splitメソッドと組み合わせると、文字列を置換することができます。
splitメソッドは、文字列を分割して配列に変換するメソッドで、次のように使用します。
var 変数名 = 文字列;
変数名.split( 分割文字 );
splitメソッドは、文字列内で分割したい箇所の文字を引数に指定すると、分割文字毎に配列の要素として、配列データに変換します。
例えば、「 2000/01/01 」という文字列を、「 文字列.split(“/”) 」として「 / 」の箇所で分割すると、次のような配列データとなります。
このようにsplitメソッドを使用して新たに生成された配列を、joinメソッドを使用してさらに別の文字列と連結することができます。
ソースコードは次の通りです。
<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 」に置換されました。
このように、複数のメソッドを組み合わせて、異なる処理結果を得るのも、プログラミングの面白さだと思います。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.