1-3 樣板字面值（Template literals／Template strings）

在 React 或當今的 JavaScript 中，很常會使用到「樣板字面值（Template literals／Template strings）」這個語法，透過它開發者可以很方便的直接在字串中帶入 JavaScript 表達式（expression），使用上只需要將原本字串的內容用反引號（鍵盤 1 左邊那個）包起來，需要帶入表達式的地方在使用 ${} 帶入即可。

note

💡 Tips 表達式（expressions）vs. 陳述句（statements） 一般來說，撰寫的語法可以分成表達式和陳述句。表達式指的是當我們輸入這串程式並執行時，它會直接得到一個回傳值，例如在瀏覽器開發者工具中輸入 a = 3 時，會直接看到 3；輸入 2 + 3 時會直接看到 5，這種會直接有回傳值的語法屬於表達式。 相對的，像是 if、for 這類執行時不會直接得到回傳值的語法，就稱作陳述句。

在樣板字面值中帶入變數

變數本身就是一種表達式，因為當你在 Chrome 的開發者工具中輸入變數時，就會立即得該變數的值，因此我們可以把變數帶入到樣板字面值中。

實際的應用像是這樣：

// 帶入變數

const favoritePhone = 'iPhone';

console.log(`I want to buy the ${favoritePhone}`); // I want to buy the iPhone

除了單純帶入變數，也可以帶入其他表達式，像是加減乘除的運算：

// 帶入加減數值運算

const favoritePhone = 'Galaxy Note';

const currentPrice = 31900;

console.log(`The ${favoritePhone} is ${currentPrice} now.`);

// The Galaxy Note is 31900 now.

console.log(`The ${favoritePhone} is ${currentPrice * 0.7} now.`);

// The Galaxy Note is 22330 now.

在樣板字面值中帶入 HTML 區塊

因為在樣板字面值中是可以換行的，程式解析的時候它不會因為換行而出錯，因此某些時候若需要在 JavaScript 中放入 HTML 的某個元素或區塊，也常會使用到的樣板字面值的寫法，像是這樣：

const buttonGroup = `

<div class="btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox" checked autocomplete="off"> Checked

</label>

</div>

`;

document.body.innerHTML = buttonGroup;