1. 程式人生 > >字串模板和dom模板的區別

字串模板和dom模板的區別

dom模板就是原先就寫在頁面上的,能被瀏覽器識別的 html 結構,會在一載入就被瀏覽器渲染,所以要遵循 html 結構和標籤命名,不然是不會被瀏覽器解析的,也就獲取不到內容了,接著js獲取 dom 節點的內容,就形成了 dom 模板

模板字串使用反引號 (` `) 來代替普通字串中的用雙引號和單引號。模板字串可以包含特定語法(${expression})的佔位符。佔位符中的表示式和周圍的文字會一起傳遞給一個預設函式,該函式負責將所有的部分連線起來,如果一個模板字串由表示式開頭,則該字串被稱為帶標籤的模板字串,該表示式通常是一個函式,它會在模板字串處理後被呼叫,在輸出最終結果前,你都可以通過該函式來對模板字串進行操作處理。在模版字串內使用反引號(`)時,需要在它前面加轉義符(\)

字串模板可能原先放在伺服器上啊,script標籤裡,js 的字串裡,原先不參與頁面渲染的一串字元,所以呢 它可以不在乎 html 結構和標籤命名,只要你最後根據模板生成內容的結構和命名正確就好

區別:

這兩者其實區別就在於第一次獲取到的方式不同,dom 模板參與瀏覽器解析,而字串模板不參與,所以 dom 寫起來要規範,而字串模板不用。

所謂的字串模版,就是一個模子,大部分的字元相等,只是在動態改變的地方不同。舉個例子來說

function modal(str){
    return `你好 ${str}`
}

modal('world')  //你好 world
//或者上面還可以這樣寫標籤
return 
`
   There are <b>${str}</b> items
`
這樣寫要比你用字串拼接省事很多