JavaScript

The JavaScript join method concatenates each element of an array with a specified delimiter to create a single string.

join [method]

　joinメソッドは、配列の要素を結合して１つの文字列を作成するために使用されます。このメソッドは配列に対して呼び出され、指定した文字（区切り文字）を各要素の間に挿入しながら、配列全体を単一の文字列に連結します。

基本的な使用方法

　joinメソッドは、配列の各要素を文字列として扱い、それらを区切り文字で結合します。区切り文字は任意で指定可能で、指定がない場合はカンマ（,）がデフォルトの区切り文字として使用されます。

　以下は、joinメソッドの基本的な使用例です。この例では、色の名前が入った配列を作成し、異なる区切り文字を使用して文字列に変換しています。

JavaScript

// 色の配列
const colors = ["赤", "青", "緑", "黄色"];

// スペースで区切る
const resultWithSpaces = colors.join(" ");
console.log(resultWithSpaces);  // 出力: 赤 青 緑 黄色

// ハイフンで区切る
const resultWithHyphens = colors.join("-");
console.log(resultWithHyphens);  // 出力: 赤-青-緑-黄色

Sample

　ユーザーがテキストボックスに区切り文字を入力し、ボタンをクリックすると、配列の内容がその区切り文字で結合された文字列として表示されます。

区切り文字を入力:

HTML

<label for="delimiter">区切り文字を入力:</label><br>
<input type="text" id="delimiter" placeholder="例: -"><br>
<button onclick="joinColors()">結合</button>
<div id="result"></div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

function joinColors() {
	const colors = ["赤", "青", "緑", "黄色"];
	const delimiter = document.getElementById('delimiter').value;
	const joinedString = colors.join(delimiter);
	document.getElementById('result').textContent = '結果: ' + joinedString;
}