JavaScriptで文字列を結合する2つの方法

JavaScriptで文字列を分割するときはsplit()メソッドを利用します。

そのため、文字列を結合するときも何かしらのメソッドがあると思いがちですが、結合は単純です。

構文

メソッド意味返り値
文字列 + 文字列 + 文字列文字列を全て結合する結合された文字列
`${文字列}${文字列}${文字列}${文字列}`文字列を全て結合する結合された文字列
文字列結合の構文

サンプルコード

文字列 + 文字列 + 文字列の場合

1つ目の方法は「+」で区切って文字列を結合します。

Output
結合された文字列
Pug
.container.my-5
	table.table
		tr
			th 結合された文字列
			td.result1
JavaScript
const targetString1 = 'JavaScript';
const targetString2 = 'を';
const targetString3 = '勉強する';

const targetString = targetString1 + targetString2 + targetString3;

document.querySelector('.result1').textContent = targetString;

`${文字列}${文字列}${文字列}${文字列}`

Output
結合された文字列
Pug
.container.my-5
	table.table
		tr
			th 結合された文字列
			td.result2
SCSS
JavaScript
const targetString4 = 'JavaScript';
const targetString5 = 'を';
const targetString6 = '勉強する';

const outputString = `${targetString4}${targetString5}${targetString6}`;

document.querySelector('.result2').textContent = outputString;

もう1つの方法はテンプレート文字列“を利用する方法です。

インストラクター
コメント

コメントを残す