JS核心篇-樣版字面值

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

我們希望在HTML中插入內容，那插入的內容有字串和變數混合在一起，
我們可以用樣板字面值來達成這種效果。

上面這個範例，你可以看到我們在變數insertContent使用樣板字面值，將我們想要插入的HTML格式寫在裡面，並利用${}來將想要合併的變數也一起並在裡面。
那因為我們用樣板字面值來合併時，我們不需要利用傳統的/來合併字串斷行時的部分。
最後再用innerHTML來插入這個合併完的字串內容。

巢狀結構

加入表達式

樣板字面值除了可以加入變數以外，還可以加入表達式

const person = {
	name: '小明',
}
const sentence = `我的名字是${ person.name }，我總共有${ person.cash || 1000 }元`

上面這個範例，你可以看到最後面那個表達式，若person.cash沒有值則回傳1000這個值。

加入立即函式

const person = {
  name: '小明',
  cash: 1000  
}
const sentence = `我的名字是${ person.name }，我總共有${ (function(x) {return x*2})(person.cash) }元`
console.log(sentence)

以上這個範例，你可以看到我們還可以在樣板字面值中加入立即函式，然後，回傳執行完的內容，然後加入到樣板字面值中。

巢狀結構

樣板字面值中，再加入樣板字面值，就是巢狀結構。
ex1:

const person = {
	name: '小明',
	cash: 1000
}
const sentence = `我的名字是${ person.name }，${ `我總共有 ${ person.cash }` }元` 

ex2:
這個例子我們就利用樣巢狀的樣板字面值，來組合HTML的結構。

上面這個範例，我們就利用樣板字面值的巢狀結構，來組合HTML的內容。
內層是加入表達式，利用陣列的map方法，將people的內容組合出來，並回傳成一個陣列，組合成HTML的內容。
那你可以看到我們在陣列的map方法後面還接著一個join('')的方法，它是用來將陣列內容連接起來，合併成一個字串，
並將陣列裡面的逗號給篩選掉。

標籤樣板字面值

這是樣板字面值的進階用法。
標籤樣板字面值的使用就是直接在函式後面加上模版字符串，如果這個傳入的樣板字面值裡面沒有加入${}的話，它就是純粹傳入參數而已。

沒有加入${}的標籤樣板字面值

console.log `123`   // 標籤樣板字面值用法
console.log('123')  // 上面的效果，就等同於這一行這樣

傳入有${}的標籤樣板字面值

在程式中會將${}當作切割的錨點，並將切割完的字串部分，全部存成一個陣列中，那${}的部分，就當成各別的參數傳入函式中。

function test(string, argu1, argu2) {
  console.log(string)
  console.log(argu1, argu2)
}
let myname = 'ming'
let familyName = 'chung'
test `<span>你好${ myname }大俠${ familyName }</span>`

那上面這個範例裡面的標籤字面值的功能
test 你好${ myname }大俠${ familyName } 的作用是等同於下面這樣的傳統寫法
test([‘你好’, ‘大俠’], myname, familyName)
你可以看到以${}為切割點，將這些剩下來的字串存成同一個陣列中，而${}就各別當作參數傳入函式中。
故切割的字串陣列會長這樣[‘你好’, ‘大俠’, ‘‘]，那傳入的參數argu1和argu2分別為myname和familyName。
那上面這個範例有兩個${}，所以，會有兩個參數argu1, argu2。
如果，你有三個${}的話，就會有三個參數argu1, argu2, argu3，以此類推。

使用其餘參數切分參數

那我們知道，在函式中都會有一個arguments的物件，它儲存了傳入的所有參數。
而像上面的範例arguments儲存的是{[‘你好’, ‘大俠’, ‘‘], “ming”, “chung”}。
那如果我們想要將被組合的字串陣列 和 傳入的參數分開使用的話，我們就可以用其餘參數來將傳入的參數儲存起來，跟被組合的陣列切分開來。

function test(string, ...argu) {
  console.log(string)  // ['<span>你好', '大俠', '</span>']
  console.log(argu)    // ['ming', 'chung']
}
let myname = 'ming'
let familyName = 'chung'
test `<span>你好${ myname }大俠${ familyName }</span>`

標籤樣板字面值的好處

那在一般專案裡面，我們會利用樣板字面值合併變數並將這個變數跟HTML標籤合併在一起，最後，在將合併結果渲染到畫面上。
那在這個合併的變數裡面，如果有人惡意攻擊，在裡面加入了不知名的html並且去load不知名的網站內容，或甚至將網站內的會員資訊給竊取出來就會很麻煩。
那這個時候，我們就可以利用標籤樣板字面值，來防止這種攻擊。

在上面這範例，可以看到在變數messageName裡面，被塞入了不需要的HTML標籤，而且在這個html標籤裡面還去onload了外部的資料，這就會是讓人家可以攻擊的漏洞。
所以，在這邊我們要加入標籤樣板字面值功能，來阻止這樣的攻擊。

你可以看到上面這個範例，若使用者在傳入的資訊中傳入一些有的沒的的HTML標籤，它就會變成一行純字串，而不會有其他任何的效果。

參考文章:

1. 標籤樣板字面值文章