---
tags: ES6, Javascript
disqus: hackmd
---

# [JS]Template Literals(字串樣版)

[[筆記] JavaScript ES6 中的模版字符串（template literals）和標籤模版（tagged template）](https://pjchender.blogspot.com/2017/01/javascript-es6-template-literalstagged.html)
模版字符串、字串樣板、字串模板、樣板字面值，大概有這幾個名字。

ES6 引入了 Template Literals (字串樣版) 是增強版的字串表示法，
可以寫多行字串
可以在字串中插入變數或 JavaScript 表達式。
使用 \` 將字串包起來即可。

let component_es5 = '<header>\n'+
'<div class="banner">\n'+
'<img src="img1.jpg"\n'+
'</div>\n'+
'</header>'

let component_es6 = `
<header>
    <div class='banner'>
        <img src="img1.jpg>
    </div>
</header>
`

輸出如下的結果：
透過反引號包住的內容，會保留所有的換行和空行。

### 在模版字符串中嵌入變數
還可以透過 ${...} 這樣的方式，嵌入變量或任何的表達式：

let myName = "PJCHENder",
    numA = 4,
    numB = 7;

let content = `Hello, my name is ${myName}, my lucky number is ${2*(numA + numB)}`;

console.log(content);  // "Hello, my name is PJCHENder, my lucky number is 22"