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で郵便番号から住所を自動入力する方法【zipcloud APIを使おう】

2023.01.03
6902
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
2640
JavaScript

【CSS・JS】本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法

2023.01.28
5430
JavaScript

【JavaScript】HTML要素に指定したクラスが付与されているか存在をチェックする方法

2023.01.25
988