JavaScript 字符串模板是 ECMAScript 6 中引入的一種新的字符串語法，它提供了一種更為簡潔、靈活的字符串拼接方式，讓字符串拼接變得更加優雅。它的語法與其他一些現代編程語言如 Python、Ruby 和 Groovy 中的字符串模板非常類似，在字符串中使用“${expression}”語法嵌入表達式，從而將 JavaScript 變量或表達式的值注入到字符串中。這在實際開發中提高了代碼的可讀性和可維護性，同時也減少了代碼量。

下面是一個簡單的例子，展示如何使用字符串模板創建一個簡單的 HTML 模板：

const title = 'Hello, World!';
const message = 'Welcome to my website';
const html = `
<div class="container">
<h1>${title}</h1>
<p>${message}</p>
</div>
`;
document.body.innerHTML = html;

在上面的代碼中，我們使用了字符串模板創建了一個包含一個標題和一個消息的 HTML 容器。在字符串模板內部，我們使用了 "${...}" 語法來插入變量。代碼之間不需要任何連接符號，這使得代碼更加整潔，易于閱讀。

字符串模板還具有一些高級特性，例如多行字符串和標簽模板。下面是一些具體細節：

多行字符串

以前，如果您需要在 JavaScript 代碼中創建一個包含多行文本的字符串，您需要使用一些笨拙的方法，比如在每行末尾添加反斜線，并在新行中使用換行符，或拼接多個字符串。在 ECMAScript 6 中，您可以使用字符串模板來輕松地處理多行字符串。

const multiLine = `這是一段
包含多行
文本的
字符串`;
console.log(multiLine);

標簽模板

標簽模板是 ECMAScript 6 中字符串模板最強大的特性之一。當您在字符串模板前面添加一個函數名時，JavaScript 將使用該函數來處理字符串模板，以生成更復雜的結果。標簽模板可以采用多個參數，并執行任意邏輯來處理字符串模板。

下面是一個使用標簽函數的示例：

function render(template, ...values) {
return template.reduce((result, current, i) =>{
return result + current + (values[i] || '');
}, '');
}
const name = 'Alex';
const message = render`Hello, ${name}! Welcome to my website.`;
console.log(message);

在上面的代碼中，我們使用了一個名為 "render" 的函數作為字符串模板的標簽。函數將字符串模板和值作為參數，并使用 ".reduce()" 方法遍歷字符串模板，同時注入變量。由于我們定義了一個帶有占位符的字符串模板，并將其傳遞給標簽函數，因此函數將使用占位符替換變量，并最后返回生成的字符串。

在 JavaScript 開發中，字符串拼接是一種非常常見的操作。使用 ECMAScript 6 中的字符串模板，您可以創建更加簡潔、靈活和易于擴展的代碼。無論是處理簡單的字符串還是處理復雜的模板，字符串模板都可以使您的代碼變得更加優雅和易于維護。