【JavaScript】样板字面值

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

为何需要样板字面值？

以往我们在撰写JavaScript的时候经常有一个动作叫做「组字串」，相信大家应该不太陌生
为何会称为「组」呢？
因为通常会看起来像是这样：

const tofuPudding = "豆花";
const price = 30;
const sentence = "我的" + tofuPudding + "! " + price + "块!";
console.log(sentence); //我的豆花! 30块!

一个句子因为有两个变数的关系，我们要使用4个+来进行字串连接，最後才能得到完整的句子
这种字串处理，就是俗称的「组字串」

当句子中的变数更多更复杂时，程序码的可读性会大幅降低，也容易漏看导致莫名的问题出现
样板字面值目的是解决传统字串串接用过多的+号导致的阅读不易问题

样板字面值基本的语法是使用反引号‵包起字串，要插入变数的时候就使用${}
一样的案例用样板字面值来写就会变成这样：

const sentence = `我的${tofuPudding} ! ${price}块!`;

瞬间变得好写非常多

同时，样板字面值还可以对应多行文字，过去在没有样板字面值时，我们通常会这样写：

const list = "<ul>\
    <li>...</li>\
    <li>...</li>\
    <li>...</li>\
</ul>";

为了组出可读性高的HTML结构，我们不太可能将所有<li>挤在同一行，但"和'都不支援多行文字，因此每一行的结尾都必须加上\（续行符，顾名思义）
不过除了结尾之外每一行都要加上，相当麻烦，有了样板字面值之後就可以这样写：

const list = `<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>`;

直接两个‵包到底，非常轻松

在本文的案例中，我们将变数用${}传入
但其实样板字面值${}里面传入的其实是表达式，因此可以传入变数以外的内容
例如判断式：

const sentence = `${1 > 0}`;
console.log(sentence); //true

或三元运算子：

const sentence = `${1 > 0 ? "1大於0" : "1没有大於0"}`;
console.log(sentence); //1大於0

函式在被呼叫的时候return一个值，也是表达式
因此也可以：

function sum(a,b){
    return a+b
}
const sentence = `${sum(1,2)}`;
console.log(sentence); //3

而样板字面值本身也是表达式，因此可以在${}里面使用样板字面值，形成巢状结构

const sentence = `${`${price}块!`}`;
console.log(sentence); //30块!