es6學習筆記--模板字符串

這幾天簡單看了一下深刻淺出es6這本書，感受特實用，學習了一個新特性---模板字符串
在項目開發中，拼接字符串是不可缺乏的，動態建立dom元素以及js操做數據都要拼接字符串，在es6出來以前，咱們都一般用引號(''或"")和加號(+)來拼接字符串，麻煩不說並且還容易出錯，就拿個其中的代碼例子說：

menuUl+="<li><i class='"+menudata[i].icon+"'></i><p onclick=\"click()\">"+ menudata[i].text +"</p></li>";

其中用到了單引號和雙引號，加號以及轉義字符，當時寫起來很有費勁。如今es6中的模板字符串大大解決了這種複雜又麻煩的問題

傳統拼接字符串的缺點：
  * 不能多行拼接
  * 不能在拼接中插入變量
  * 不能進行簡單的運算
  * 不能處理引號之間的嵌套問題
  * 麻煩，拼接過多一稍微寫錯就報錯或顯示不出來。

模板字符串就是使用兩個反撇號把任何變量以及字符串都包含起來。反撇號就是鍵盤上tab鍵上方的鍵

寫法：

let word = `超級`

特性：
1 模板字符串能夠引入變量，就是在字符串中用${變量名}
⚠️ ${} 模板佔位符 在字符串中，javascript將模板佔位符裏的值插入其中，若是值是數組或者對象，他會調用toString()方法轉化爲字符串。若是是函數，則會使用標籤模板。

let word = `超級`; console.log(`今每天氣${word}不錯`); // 今每天氣超級不錯

console.log(`[1,2,3,4,5]`) // [1,2,3,4,5]
console.log(typeof `[1,2,3,4,5]`) //string

console.log(`{name:'peter'}`) //{name:'peter'}
console.log(typeof `{name:'peter'}`) // string 

2 模板字符串能夠進行簡單的運算，經過${運算}

console.log(`今每天氣的溫度是${parseInt(23.3)}`) //今每天氣的溫度是23
console.log(`${1 + 2}`) //3

3 模板字符串能夠進行嵌套，反撇號中再可用反撇號

console.log(`2 + 3 ${2 + 3 > 6 ? `>`:`<`} 6`) // 2 + 3 < 6

4 模板字符串能夠多行拼接，就是字符串能夠換行
⚠️ 模板字符串中全部的空格、新行、縮進，都會原樣輸出在生成的字符串中

console.log(`今每天氣超級不錯， 明天的天氣也確定不錯。`)

5 模板字符串主要就是簡單方便，和其餘的引號和加號都互不干擾，就那剛纔的代碼就能夠這樣寫：

menuUl+=`<li><i class="${menudata[i].icon}"></i><p onclick="click()">${menudata[i].text}</p></li>`;

這樣看起來就整潔，可維護。

es6 模板字符串的優勢：
1 能夠多行拼接
2 能夠在拼接中插入變量
3 能夠進行簡單的運算
4 能夠互相嵌套
5 簡單，方便，整潔

標籤模板
在模板字符串開始的反撇號前附加一個額外的標籤

let message = SaferHTML`<p>${bonk.sender} 向你示好。</p>`;

等價於

let message = SaferHTML(templateData, bonk.sender);

SaferHTML的方法以下：對其中的一些轉義字符的轉義。

function SaferHTML(templateData) { var s = templateData[0]; for (var i = 1; i < arguments.length; i++) { var arg = String(arguments[i]); // 若是有轉義字符
    s += arg.replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;"); // 若是沒有轉義字符
    s += templateData[i]; } return s; }

let div = document.querySelector('div'); div.innerHTML = SaferHTML`&lt;這是關於字符串模板&amp;標籤模板的介紹&gt;`       // <這是關於字符串模板&標籤模板的介紹>

function show(stringArr,...values){ let output =""; let index = 0; for(;index<values.length;index++){ output += stringArr [index]+values[index]; } output += stringArr [index]; return output; } 

let name = '張三', age = 20, message = show`我來給你們介紹:${name}的年齡是${age}.`; div.innerHTML = message;     // 我來給你們介紹:張三的年齡是20.

對於標籤模板，我基本上操做的不多，這是兩個例子我是在mdn上看到的，掌握了要領，之後開發就方便了。
所謂的標籤模板，就是添加額外的標籤，這個標籤其實就是一個函數方法的調用，這個方法es6沒有實行，交給了開發者去編寫操做，提升了拓展性。
就拿show說：
stringArr表明的就是一個數組，${}先後方的值，打印一下stringArr就能夠得知。

在標籤函數的第一個參數中，存在一個特殊的屬性raw ，raw是es6的一個關於字符串的方法，咱們能夠經過它來訪問模板字符串的原始字符串，而不通過特殊字符的替換。
使用String.raw() 方法建立原始字符串和使用默認模板函數和字符串鏈接建立是同樣的。
根據方法裏寫法可知，標籤模板就是遍歷數組，將對應的已知的值stringArr和字符串模板values的值依次打印出來。

這是本人學習得出的結論，若是有錯誤，歡迎指正！

 

參考：深刻淺出ES6和mdn：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings