JS核心-(67)-ES6 章節：Template Literial-樣板字面值（Template literals）基本介紹

前言

介紹樣板字面值

樣板字面值

樣板字面值，稱作 Template literals
早期的版本，稱作 Template String

來看看是什麼樣的情境會使用到

const cash = 1000;
const string = '氣氣氣氣';
const sentence = '我的 ' + cash + '元掉到水溝裡了，真是' + string;
console.log(sentence);

以往這樣利用 Js 字串與變數，串出想要的資料結構時，就會顯得很麻煩，並且很不直觀，還需要特別加上單引號 '' 或是

加號 + ，根據不同團隊的撰寫風格，也會有是否要留空白的疑慮。而樣板字面值，提供了更值觀的方法來處理這樣的情境問

題，同樣也是屬於 ES6 的新增語法，所以在使用上還是要注意瀏覽器的兼容性。

來看看要怎麼使用吧！

const cash = 1000;
const string = '氣氣氣氣';
// const sentence = '我的 ' + cash + '元掉到水溝裡了，真是' + string;

const sentence =`我的元掉到水溝裡了，真是`;
console.log(sentence);

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

鍵。之後，在需要串接變數的地方使用 ${ } ，大括號裡面放變數或是表達式，就可以順利的將字串組合起來了。

const sentence =`我的${cash}元掉到水溝裡了，真是${string}`;

如果要加上空白，也可以直接在 ${ } 前後加上空白就可以了。

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

const cash = 1000;
const string = '';
const sentence =`我的${cash}元掉到水溝裡了，真是${ string || '氣氣氣氣' }`;
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>`;

你會發現一把結構貼進反引號，也不用特別做其他的修正，變數的部分一樣也可以透過 ${ } 進行串接，

輕鬆的把結構給做出來。