ES6折騰記- 模板字串

CRPER發表於2019-03-01
字串

前言

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

模板字串

模板字串[template string]是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編碼字元會造成編譯報錯

相關文章