JavaScript 字符串模板

同義詞：

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics 語法

Back-Tics 語法

模板字面量使用反引號 (``) 而不是引號 ("") 來定義字符串：

實例

let text = `Hello World!`;

親自試一試

字符串內的引號

通過使用模板字面量，您可以在字符串中同時使用單引號和雙引號：

實例

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

親自試一試

多行字符串

模板字面量允許多行字符串：

實例

let text =
`The quick
brown fox
jumps over
the lazy dog`;

親自試一試

插值

模板字面量提供了一種將變量和表達式插入字符串的簡單方法。

該方法稱為字符串插值（string interpolation）。

語法

${...}

變量替換

模板字面量允許字符串中的變量：

實例

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

親自試一試

用真實值自動替換變量稱為字符串插值。

表達式替換

模板字面量允許字符串中的表達式：

實例

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

親自試一試

用真實值自動替換表達式稱為字符串插值。

HTML 模板

實例

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

親自試一試

瀏覽器支持

Internet Explorer 不支持模板字面量。

第一個完全支持模板字面量的瀏覽器版本是：

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
2015 年 3 月 2015 年 11 月 2014 年 12 月 2016 年 9 月 2015 年 4 月

完整的字符串參考

如需完整參考，請訪問我們的完整 JavaScript 字符串參考手冊。

該手冊包含所有字符串屬性和方法的描述和實例。