joinメソッド

広告

joinメソッドは配列の各要素を指定の文字列で連結し、結果の文字列を返します。 

join()
join(str)

配列の各要素の値を文字列に変換し、それらを連結した文字列を作成します。

パラメータ:
  str  連結する時のセパレータ文字列
戻り値：
  連結された文字列

joinメソッドを使用すると、対象の配列の各要素の値を文字列に変換します。そして引数に指定した文字列をセパレータとして1つの文字列に連結します。

次の例を見てください。 

var ary = new Array("Yamada", 29, "Tokyo");
var str = ary.join(":");

上記の場合、3つの要素の各値を文字列に変換します。その上で各要素をjoinメソッドの引数に指定した文字列「:」を使って連結します。 

"Yamada" + ":" + "29" + ":" + "Tokyo"

結果的に「Yamaha:29:Tokyo」という文字列が左辺の変数に代入されます。

セパレータは文字列が指定できますので1文字だけではなく文字列が指定できます。

joinメソッドの引数を省略した場合にはカンマ(",")が指定されたものとして処理されます。次の例を見てください。 

var ary = new Array("Yamada", 29, "Tokyo");
var str = ary.join();

上記の場合は"Yamaha,29,Tokyo"という文字列が左辺の変数に代入されます。

なお配列の各要素の値がどのような文字列に変換されるのかは値のデータ型毎に異なります。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</body>
</html>

function print(str){
  document.write(str + "<br />");
}

var ary = new Array(89, 92, 73);

document.write("<p>");

print(ary.join());
print(ary.join(", "));

document.write("</p>");

var tokaidou = new Array("東京", "品川", "新横浜", "名古屋", "京都", "新大阪");

document.write("<p>");

print(tokaidou.join("-->"));

document.write("</p>");

var personal = new Array("高橋", 29, "東京都", true, ["太郎", "次郎"]);

document.write("<p>");

print(personal.join(" : "));

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

( Written by Tatsuo Ikura )