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,這種會直接有回傳值的語法屬於表達式。 相對的,像是 iffor 這類執行時不會直接得到回傳值的語法,就稱作陳述句。

在樣板字面值中帶入變數#

變數本身就是一種表達式,因為當你在 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;