Written by Kasumi

JavaScriptで文字列と変数を組み合わせて出力する二つの方法

JavaScriptで文字列と変数を組み合わせて出力したい。

本記事ではこのような悩みを解決します。

文字列と変数を組み合わせる方法

const val = 10;
const target = 5;
const answer = val + target;

console.log(val + "+" + target + "=" + answer);

// コンソール結果
//10+5=15

文字列と変数を組み合わせるコード例です。

console.logで、コンソールに組み合わせ結果を出力してます。

組み合わせには結合演算子(+)を使います。

使い方は以下の通りです。

変数 + “文字列”+ 変数 + “文字列”

変数と文字列の間を+で連結する事で、組み合わせが可能になります。

テンプレート文字列を使って変数と組み合わせる

const val = 10;
const target = 5;
const answer = val + target;

console.log(`${val} + ${target} = ${answer}`);

テンプレート文字列を使って、変数と組み合わせるコード例です。

テンプレート文字列の使い方は以下の通りです。

`${変数} 文字列 ${変数} 文字列 `

組み合わせたい変数と文字列をバッククォート(`)で囲います。

バッククォートの入力はshift + @とキーボードで打つ事で表示されます。

変数名を${ }で囲み、文字列の中に埋め込みます。

以上がテンプレート文字列を使った変数と文字列の組み合わせ方法です。

まとめ

JavaScriptで文字列と変数を組み合わせて出力する二つの方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
876
JavaScript

【JavaScript】マウスホイールした時のスクロール量を表示する方法

2023.02.07
2155
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
3392
JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
3737