本篇文章主要來介紹樣板字面值（Template literals）

在早期的版本，也被稱作 Template String 。

先來看看是甚麼樣的情境會使用到吧~!

const days = 14;
const str = '好煩阿';
const sentence = '我的腸胃炎已經 ' + days + ' 天沒好了，真的是' + str;
console.log(sentence);

以往這樣利用Js字串與變數，串出想要的資料結構時，就會顯得很麻煩，並且很不直觀。

還需要特別加上 ' 或是 + ，根據不同團隊的撰寫風格，也會有是否要留空白的疑慮。

而樣板字面值，提供了更值觀的方法來處理這樣的情境問題。同樣也是屬於ES6的新增語法，所以在使用上還是要注意瀏覽器的兼容性。

那我們就來看看要怎麼使用吧~

const days = 14;
const str = '好煩阿';
// const sentence = '我的腸胃炎已經' + days + '天沒好了，真的是' + str;
const sentence = `我的腸胃炎已經天沒好了，真的是`;
console.log(sentence);

我們先把原本的註解掉，並且把變數、加號、字串的單引號給拿掉，並也在最外面加上反引號，也就是tab鍵上面的那一顆。

之後，在需要串接變數的地方使用${變數或是表達式}，就可以順利的將字串組合起來嚕~

const sentence = `我的腸胃炎已經${days}天沒好了，真的是${str}`;

那如果要加上空白，也可以直接在 ${變數或是表達式} 前後加上空白就可以嚕~

剛剛也有提到除了變數以外也可以放入表達式對吧! 那我們來看看要怎麼組合~

const days = 14;
const str = '';
const sentence = `我的腸胃炎已經${days}天沒好了，真的是${ str || '好煩阿' }`;
console.log(sentence);

這樣組合也是可以的喔~

再來看看別的範例~

如果今天我們想要利用 Js 產生這樣的 html 結構:

<ul>
    <li>我是 XXX，身上有 XX 元</li>
    <li>我是 XXX，身上有 XX 元</li>
    <li>我是 XXX，身上有 XX 元</li>
</ul>

Js 資料的結構可能長這樣:

const data = [{
    name: '小明',
    cash: 500
},{
    name: '小華',
    cash: 1000
},{
    name: '小夫',
    cash: 1500
}];

以傳統的做法，我們應該會這樣做~

const listString = '<ul>\
    <li>我是 XXX，身上有 XX 元</li>\
    <li>我是 XXX，身上有 XX 元</li>\
    <li>我是 XXX，身上有 XX 元</li>\
</ul>';

// ======== 或是 ===================

const listString = '<ul>' +
    '<li>我是 XXX，身上有 XX 元</li>' +
    '<li>我是 XXX，身上有 XX 元</li>' +
    '<li>我是 XXX，身上有 XX 元</li>' +
'</ul>';

利用這兩種方式組成字串，在分別加入變數內容

const listString = '<ul>\
    <li>我是' + people[0].name + '，身上有 ' + people[0].cash + ' 元</li>\
    <li>我是 ' + people[1].name + '，身上有 ' + people[1].cash + ' 元</li>\
    <li>我是 ' + people[2].name + '，身上有 ' + people[2].cash + ' 元</li>\
</ul>';

// ======== 或是 ===================

const listString = '<ul>' +
    '<li>我是 ' + people[0].name + '，身上有 ' + people[0].cash + ' 元</li>' +
    '<li>我是 ' + people[1].name + '，身上有 ' + people[1].cash + ' 元</li>' +
    '<li>我是 ' + people[2].name + '，身上有 ' + people[2].cash + ' 元</li>' +
'</ul>';

組合好以後應該會是像上面這樣~

但是變數一多，資料一多的話，不僅撰寫花時間，維護也很困難。

這時候如果使用樣板字面值的話，就可以很輕鬆地解決這個問題~!

const listString = `<ul>
    <li>我是 ${people[0].name}，身上有 ${people[0].cash} 元</li>
    <li>我是 ${people[1].name}，身上有 ${people[0].cash} 元</li>
    <li>我是 ${people[2].name}，身上有 ${people[0].cash} 元</li>
</ul>`;

你會發現一把結構貼進反引號，也不用特別做其他的修正，變數的部分一樣也可以透過 ${變數或是表達式} 進行串接，輕鬆的把結構給做出來了~!

以上就是樣板字面值的概略介紹，如果沒有問題的話就可以看下一篇文章，會介紹更多進階的用法喔!

汪汪~