JavaScript　文字列に変数を埋め込む方法

JavaScriptで文字列に変数を埋め込む方法を解説します。

JavaScriptで文字列に変数を埋め込んで出力したいです。どうしたらいいでしょうか？

${変数名}　のように記述したり、+演算子で文字列を連結させることで変数を文字列に埋め込むことができます。

文字列に変数を埋め込む

　文字列に変数を埋め込むにはテンプレートリテラルの${変数名}を利用する方法と、文字列を+演算子で結合する方法があります。

テンプレートリテラルとは

　JavaScriptのテンプレートリテラルは、文字列をより簡単かつ直感的に組み立てるための機能です。これにより、変数や式を文字列に埋め込むことができます。

従来の文字列の作成方法では、文字列を作成するために複数の文字列を結合する必要がありました。しかし、テンプレートリテラルを使用すると、文字列の中に変数や式を埋め込んで、簡単に文字列を構築することができます。

テンプレートリテラルを作成するには、バッククォート${変数名}を使用します

テンプレートリテラルの${変数名}を利用する方法（ES2015～）

テンプレートリテラルを利用する方法は、ES2015に対応しているブラウザで動作します。

${変数}　

テンプレートリテラルの${変数名}で記述するには以下のように記述します。

// 変数を定義する
var name = "John";

// 変数を文字列中に埋め込む
var str = `Hello, ${name}!`;

// 変数を出力する
console.log(str); // "Hello, John!"

　また、${変数}を文字列として出力したい場合は\バックスラッシュをつけることで文字として出力することができます。

console.log(`Hello, \${name}!`);

//実行結果
"Hello, \${name}!"

＋演算子で文字列を結合する方法

文字列を連結するために、プラス記号 + を使用することもできます。IE11等、古いブラウザでも動作します。

// 変数を定義する
var name = "John";

// 変数を文字列中に埋め込む
var str = "Hello, " + name + "!";

// 変数を出力する
console.log(str); // "Hello, John!"

コードの読みやすさなどを考慮して、状況に応じてどちらの方法が良いか判断して利用することが重要ですね。

変数を文字列に入れてHTMLに反映させる

JavaScriptで文字列に変数を埋め込んでHTMLに反映させるには、次のようにします。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScriptで文字列に変数を埋め込む方法</h1>

<p id="demo">ここに文字列が出力されます。</p>

<script>
    // 変数を定義する
    var name = "John";

    // 変数を文字列中に埋め込む
    var str = `Hello, ${name}!`;

    // 変数をHTML要素の中に出力する
    document.getElementById("demo").innerHTML = str;
</script>

</body>
</html>

上記の例では、document.getElementById("demo").innerHTMLを使用して、HTML要素の中に文字列を出力しています。また、テンプレートリテラルを使用して、文字列中に変数を埋め込んでいます。

これにより、HTML文書内で、JavaScriptで作成した文字列を反映させることができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。