iT邦幫忙

0

Javascript 進階 10-1 樣板字面值(Template literals)基本介紹

本篇文章主要來介紹樣板字面值(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}`;

https://ithelp.ithome.com.tw/upload/images/20200521/20121770SeZI1g6sIA.png

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

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

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>`;

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

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

汪汪~


尚未有邦友留言

立即登入留言