jade的轉義與不轉義字符串插值、處理

Jade 的字串插值方式，插入 HTML 結構

轉義字符串插值方式，使用的字符組是 #{}。

- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}

1 2	- var theGreat = "<span>escape!</span>"; p This will be safe: #{theGreat}

jade 不轉義字符串插值方式，使用的字符組是 !{}。

- var theGreat = "<span>escape!</span>";
p This will be safe: !{theGreat}

1 2	- var theGreat = "<span>escape!</span>"; p This will be safe: !{theGreat}

直接在行內式使用 jade 的標籤插值的方式，將 <a href="jade-lang.com">Jade</a> 插入 p 段落中。

p #[a(href="jade-lang.com") Jade]

1	p #[a(href="jade-lang.com") Jade]

Jade 將值插入的本質就是 JavaScript 將值置入的概念。

- JSTemplateStrings = <span>span-L-1 <span>span-L-1-1</span> <span>span-L-1-2</span></span>
p !{`${JSTemplateStrings}`}

1 2	- JSTemplateStrings = <span>span-L-1 <span>span-L-1-1</span> <span>span-L-1-2</span></span> p !{`${JSTemplateStrings}`}

以上的 Jade 語法結構說明：

p 標籤之後接著是 Jade 不轉義字符串插值方式 !{}，裡面可以插入的是以變數的資料型態做為 HTML 結構。
在插入的部份使用 JS ES6 `${JSTemplateStrings}` 的樣板字面值方式做為結構內容，這樣的方式可以將原本的 HTML 結構，在 Jade 不轉義字串的方式做為輸出處理，這樣的方式以 HTML 的 <p> 標籤內，如果要再插入多層的 <span> 行內標籤，就可以比較直觀的方式處理。