JavaScriptで配列の要素を結合して文字列にするjoinメソッドの使い方

JavaScriptで配列を扱う際、配列内の要素を結合して1つの文字列として返したい時があります。そんな時はjoinメソッドが便利です。

構文

メソッド意味返り値
配列.join([結合文字列(省略可能)])配列内の各要素結合して文字列として返す。
この時、結合文字列が含まれていた場合、その文字列で区切られて返される。
省略した場合は結合文字列が自動的に「,(コンマ)」になる。
文字列
.join()メソッド

サンプルコード

いくつか、サンプルコードを紹介します。

Output
元となる配列 [ ‘りんご’, ‘みかん’, ‘ぶどう’,’いちご’, ‘レモン’ ]
結合文字列を省略した時
結合文字列に空文字を指定した時
結合文字列に「:」を指定した時
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元となる配列
					td [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ]
			tr
				th 結合文字列を省略した時
				td#targetText1
			tr
				th 結合文字列に空文字を指定した時
				td#targetText2
			tr
				th 結合文字列に「:」を指定した時 
				td#targetText3
			
			
	
JavaScript
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );

/*参照元となる配列*/
const sampleArray1 = [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ];
const sampleArray2 = [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ];
const sampleArray3 = [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ];

const arrayJoin1 = sampleArray1.join();
const arrayJoin2 = sampleArray2.join('');
const arrayJoin3 = sampleArray3.join(':');

targetText1.textContent = arrayJoin1;
targetText2.textContent = arrayJoin2;
targetText3.textContent = arrayJoin3;
インストラクター
コメント

コメントを残す