JavaScript 模板字串
字串模板
模板字串
模板字面量
心愛的孩子有很多名字
反引號語法
模板字串 使用反引號 (``) 而非引號 ("") 來定義字串
字串中的引號
模板字串 允許在字串中包含單引號和雙引號
多行字串
模板字串 支援多行字串
插值
模板字串 提供了一種將變數和表示式輕鬆插入字串的便捷方法。
這種方法稱為字串插值。
語法是
${...}
變數替換
模板字串 允許在字串中使用變數
示例
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
將變數自動替換為實際值稱為字串插值。
表示式替換
模板字串 允許在字串中使用表示式
將表示式自動替換為實際值稱為字串插值。
HTML 模板
示例
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
瀏覽器支援
模板字串 是一個 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
模板字串 不支援 Internet Explorer。
