JavaScriptで文字列補間を行う方法は？

ES6以降のJavaScriptには、文字列補間をネイティブでサポートするテンプレート文字列サポートがあります。これらはテンプレートリテラルと呼ばれます。テンプレートリテラルは、埋め込み式を可能にする文字列リテラルです。テンプレート文字列は、一重引用符または二重引用符ではなく、バックティック（ ``）を使用します。したがって、テンプレート文字列は次のように記述できます-

var greeting = `Hello World!`;

テンプレート文字列は、${}構文を使用した文字列置換にプレースホルダーを使用できます。

例1

var name = "Brendan";
console.log('Hello, ${name}!');

出力

これにより、次の出力が得られます-

Hello, Brendan!

例2

テンプレートのリテラルと式

var a = 10;
var b = 10;
console.log(`The sum of ${a} and ${b} is ${a+b} `);

出力

これにより、次の出力が得られます-

The sum of 10 and 10 is 20

例3

テンプレートリテラルと関数式

function fn() { return "Hello World"; }
console.log(`Message: ${fn()} !!`);

出力

これにより、次の出力が得られます-

Message: Hello World !!

テンプレート文字列には複数の行を含めることができます。

例

var multiLine = `
   This is
   a string
   with multiple
   lines`;
console.log(multiLine)

出力

これにより、次の出力が得られます-

This is
a string
with multiple
line