JavaScript 中的模板字符串是一種方便的字符串語法，允許你在字符串中嵌入表達式和變量。

模板字符串使用反引號 `` 作為字符串的定界符分隔的字面量。

模板字面量是用反引號（`）分隔的字面量，允許多行字符串、帶嵌入表達式的字符串插值和一種叫帶標籤的模板的特殊結構。

語法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

參數

• string text：將成為模板字面量的一部分的字符串文本。幾乎允許所有字符，包括換行符和其他空白字符。但是，除非使用了標籤函數，否則無效的轉義序列將導致語法錯誤。
• expression：要插入當前位置的表達式，其值被轉換為字符串或傳遞給 tagFunction。
• tagFunction：如果指定，將使用模板字符串數組和替換表達式調用它，返回值將成為模板字面量的值。

實例

let text = `Hello RUNOOB!`;

嘗試一下 »

瀏覽器支持

模板字面量是 ES6 新特性 (JavaScript 2015)，目前一些最新版本瀏覽器都支持：

模板字符串中可以同時使用單引號和雙引號：

實例

let text = `He's often called "Runoob"`;

嘗試一下 »

模板字符串還支持多行文本，而無需使用特殊的轉義字符：

實例

const multiLineText = `
  This is
  a multi-line
  text.
`;

嘗試一下 »

若要轉義模板字面量中的反引號（`），需在反引號之前加一個反斜槓（\）。

`\`` === "`"; // true

模板字面量用反引號（`）括起來，而不是雙引號（"）或單引號（'）。

除了普通字符串外，模板字面量還可以包含佔位符——一種由美元符號和大括號分隔的嵌入式表達式：${expression}。

字符串和佔位符被傳遞給一個函數（要麼是默認函數，要麼是自定義函數）。默認函數（當未提供自定義函數時）只執行字符串插值來替換佔位符，然後將這些部分拼接到一個字符串中。

模板字符串中允許我們使用變量：

實例

const name = 'Runoob'; const age = 30; const message = `My name is ${name} and I'm ${age} years old.`;

嘗試一下 »

以上實例中，${name} 和 ${age} 是模板字符串的表達式部分，它們被包含在 ${} 內部，並在運行時求值。

模板字符串允許你在字符串中引用變量、執行函數調用和進行任意的JavaScript表達式。

模板字符串中允許我們使用表達式：

實例

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

嘗試一下 »

模板字符串當作 HTML 模板使用：

實例

let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

嘗試一下 »