JavaScript 核心觀念(69) - ES6 章節:Template Literial - 樣板字面值(Template literals)基本介紹

前言

Template Literial(樣板字面值) 可以說是現代開發非常常使用的技巧,因此在一開始也要簡單認識一下 Template Literial。

樣板字面值(Template literals)基本介紹

早期 Template literals 的名字是叫做 Template String (樣板字串),而後來才改成了 Template literals (樣板字面值)的哦。

那麼樣板字面值可以做什麼呢?首先先看一段我們早期開發時再做字串組合時會怎麼寫:

1
2
3
4
5
const myName = 'Ray';
const url = 'https://hsiangfeng.github.io/';

const all = '我的名字叫做 ' + myName + ',目前經營一個部落格,網址是 ' + url;
console.log(all); // 我的名字叫做 Ray,目前經營一個部落格,網址是 https://hsiangfeng.github.io/

我們可以看到當要做一個字串組合時必須使用到加號運算子 (+) 來做變數與字串間的組合,那麼一開始是感覺還好,但是當若如果是一個較複雜的 DOM 組合、需要換行時,就會顯得非常難以閱讀且難撰寫。

因此透過樣板字面值(Template literals)的話,可以改寫成以下:

1
2
3
4
5
const myName = 'Ray';
const url = 'https://hsiangfeng.github.io/';

const all = `我的名字叫做 ${ myName },目前經營一個部落格,網址是 ${ url }`;
console.log(all); // 我的名字叫做 Ray,目前經營一個部落格,網址是 https://hsiangfeng.github.io/

基本上樣板字面值的使用方式是使用兩個反引號,如果裡面要插入變數的話則是使用 ${} 包著要傳入的變數這樣子就可以了,透過樣板字面值我們可以解決難以閱讀的問題且要插入變數也會變得相當簡單。

那麼 ${} 可以插入表達式,因此如果你傳入的變數是一個空值,或者是忘記賦予值導致是一個 undefined 的話,你可以使用 || 賦予預設值

1
2
3
4
5
const myName = '';
const url = 'https://hsiangfeng.github.io/';

const all = `我的名字叫做 ${ myName || '是 Ray 不是 Array' },目前經營一個部落格,網址是 ${ url }`;
console.log(all); // 我的名字叫做 是 Ray 不是 Array,目前經營一個部落格,網址是 https://hsiangfeng.github.io/

那麼透過這種方式就可以很簡單地做到所謂的預設值哩。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ