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

前言

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

樣板字面值（Template literals）基本介紹

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

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

const myName = 'Ray';
const url = 'https://israynotarray.com/';

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

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

因此透過樣板字面值（Template literals）的話，可以改寫成以下：

const myName = 'Ray';
const url = 'https://israynotarray.com/';

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

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

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

const myName = '';
const url = 'https://israynotarray.com/';

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

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

參考文獻

• JavaScript 核心篇