ES6折騰記- 模板字符串

前言

模板字符串是個好東西，請看我細細道來；

---

模板字符串

模板字符串是ES6引進來的,有點相似咱們平時使用的模板引擎【jade,handlebar這些】，

但功能相對雞肋些，沒法條件循環遍歷什麼的，下面我來列舉下它的優缺點

• 優勢:
  • 支持變量
  • 支持多行輸入
• 缺點：
  • 沒有內建循環語法，條件語句不支持， 只可使用模板套構的方法
  • 不能自動轉義特殊的字符串。--- 須要手動轉義或者寫一個轉義函數
  • 不能很好的和國際化庫配合（即不會格式化特定語言的數字，日期，文字等）

---

如何使用

注意點：

1. ``反引號來包含內容
2. ${}來識別儲存的內容片斷【佔位符--支持條件表達式】
3. 標籤 + 反引號內容會觸發高級函數的定義

• tag`` --- 觸發模板字符串函數定義
• String.raw`` -- 取得字符串模板內的原始數據【原始數據就是包裹換行符\n這些】

//用法1: 多行字符串輸出，容許內部調用模板佔位符
`我是賣報的 今天又沒賣出報紙 坑啊`

/* "我是賣報的 今天又沒賣出報紙 坑啊" */


//----------------------------------------------
//用法2：變量插入，有了這個就不用像ES5以前只能用+來拼接字符串了【據第三方測試，字符串拼接的速度比這個ES6模板字符串的快。。。ES6原本就是語法糖！！！】

var a = 2;
var b =3 ;
var c = a * 9 ;
console.log(`獲得的結果值是:${a * b + c % a }*2`)
//獲得的結果值是:6*2


//---------------------------------------------
//用法3：模板字符串高級運用[值位置調整，值的二次運算]
//須要先定義一個函數【arg1爲字符串內容(arr-嵌套數組)，arg2爲變量[arr]】
//函數名+模板字符串執行，，具體以下
function test(strings,...values){
   console.log('strings是：'+strings+'\n');
   console.log('value是：'+values);
   return values[0]+strings + values[values.length-1]
}
var return_value = test`獲得的結果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`
//return_value的結果是：
/* strings是：獲得的結果值是:, ,我分割, fasdfjl , *2 value是：6,0 */


String.raw`獲得的結果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`

//值爲：
/* "獲得的結果值是:6 \n,我分割,\tfasdfjl 0 *2" */

複製代碼

• 函數高級形式內，兩個傳入返回的均爲數組；
• 第一個參數值爲嵌套數組：eg :[a,b,c,raw obj arr] : 最後一個下標值爲字符串的原始數據構成的數組對象；String.raw對象是對全部字符轉義一次才輸出【已經手動轉義的再也不處理】
• 第二個參數是變量構成的數組
• 函數內部能夠進行下標操做及其餘功能操做，最後的值爲return返回的值

---

總結

整體來講，模板字符串的出現了，讓咱們的字符串拼接寫的更加優美了；至關簡易實用；可是這貨並非萬能的，有部分unicode編碼字符會形成編譯報錯