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

【Webpack-Dev-Server】HTMLファイルを保存してもブラウザが自動リロードされない原因・対処方法

2023.01.14
262
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
915
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
298
JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
291