es6學習筆記-字符串模板_v1.0_byKL

xiongzenghui 發布于2019-08-21 11:39 / 761人閱讀

摘要：學習筆記字符串模板實例模板編譯先組成一個模板使用放置代碼使用輸出表達式。這被稱為標簽模板功能。該數組的成員與數組完全一致參考引用字符串擴展

es6學習筆記-字符串模板_v1.0 實例：模板編譯

//先組成一個模板
var template = `

  <% for(var i=0; i < data.supplies.length; i++) { %> //使用<%...%>放置JavaScript代碼
    <%= data.supplies[i] %> //使用<%= ... %>輸出JavaScript表達式。
  <% } %>

`;

//這是編譯模板的函數,將模板編譯寫js可運行的腳本
function compile(template){
    //正則規則,匹配<%=和%>之間的字符串,這個字符串里面包括零個或任意個字符(.+?),并且捕獲,全局匹配
    var evalExpr = /<%=(.+?)%>/g; 
    //正則規則,匹配<%和%>之間的字符串,這個字符串里面包括1個或多個空白符或非空白符或者什么都沒有,并且捕獲,全局匹配
    var expr = /<%([sS]+?)%>/g; 

    template = template
        //先處理js表達式,將<%=和%>之間的字符串進行替換
        .replace(evalExpr, "`); 
  echo( $1 ); 
  echo(`")
        //然后再處理js代碼,將<%和%>之間的字符串進行替換
        .replace(expr, "`); 
 $1 
  echo(`");

    //然后再用括號包起來,注意里面有反引號
    template = "echo(`" + template + "`);"; //注意這里已經是被標上了echo方法了,跟下面echo函數對應

    var script = //這里直接用反引號包起來
        `(function parse(data){
    var output = "";

    function echo(html){ //聲明了echo函數
      output += html;
    }

    ${ template } //直接解析并且執行里面的函數,并且調用到上面設置的echo函數進行處理

    return output;
  })`;

    return script;
}

----------------------------------------------
//這是編譯函數處理后返回的script,變成了可執行的js代碼
echo("");
for(var i=0; i < data.supplies.length; i++) {
  echo("");
  echo(data.supplies[i]);
  echo("");
};
echo("");

//在使用的時候,先生成js代碼
var parse = eval(compile(template));
//然后執行這個js代碼,其實就是將參數傳給編譯后的js代碼進行運行
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));

標簽模板

模板字符串緊跟在一個函數名后面，該函數將被調用來處理這個模板字符串。這被稱為“標簽模板”功能（tagged template）。

標簽模板其實不是模板，而是函數調用的一種特殊形式。“標簽”指的就是函數，緊跟在后面的模板字符串就是它的參數。

alert`123` //alert是函數(也就是所謂的標簽),`123`是模板字符串
// 等同于
alert(123)

"標簽"的第一個參數是個數組，數組的內容是模板字符串中除了大括號表達式以外的內容。從第二個參數起就是大括號表達式計算的結果

//tag是一個自定義函數
let tag = function(stringArr, value1, value2){
    console.log(stringArr); //[ "Hello ", " world ", "" ],是一個數組
    console.log(value1);//15,是大括號運算后的結果,即模板字符串解析后的結果,a+b =15
    console.log(value2);//50,類似
}

let a = 5;
let b = 10;
//這個tag是一個函數
tag`Hello ${ a + b } world ${ a * b }`;

//根據tag函數分析的參數,其實相當于以前的這種傳參
tag(["Hello ", " world ", ""], 15, 50)

tag函數的第一個參數是一個數組，該數組的成員是模板字符串中那些沒有變量替換的部分，也就是說，變量替換只發生在數組的第一個成員與第二個成員之間、第二個成員與第三個成員之間，以此類推。

tag函數的其他參數，都是模板字符串各個變量被替換后的值。由于本例中，模板字符串含有兩個變量，因此tag會接受到value1和value2兩個參數。

再看另外一個例子熟悉一下:

真正的參數還是會用arguments

需要了解第一個參數是數組的使用方式

let passthru = function(literals) {//這里是一個數組
    let result = "";
    let i = 0;

    while (i < literals.length) { //通過遍歷這個數組
        result += literals[i++];//這是保存非模板字符串的(大括號的)
        //console.log(result); // 如果分別打印result就會發現他的過程
        if (i < arguments.length) {//獲取模板字符串解析之后的真正參數
            result += arguments[i]; //這是模板字符串解析之后的(大括號內的內容,即${total}之類的)
            //console.log(result); // 如果分別打印result就會發現他的過程
        }
    }

    return result;
}

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
console.log(msg) // "The total is 30 (31.5 with tax)"

過濾HTML字符串，防止用戶輸入惡意內容

let SaferHTML = function (templateData) {
    let s = templateData[0];//先將大括號外的第一個元素保存起來(即真正的參數之前的數據)
    for (let i = 1; i < arguments.length; i++) { //對于大括號內的進行遍歷處理
        let arg = String(arguments[i]);

        // Escape special characters in the substitution.
        s += arg.replace(/&/g, "&") //將處理完的模板字符串放回去返回結果里面
            .replace(//g, ">");
    }
    //原例子的寫法不太清晰,我改一下
    //在將大括號外的第二個元素保存到返回結果(即真正參數之后的數據)
    s += templateData[1];//
    return s;
}

let sender = ""; // 惡意代碼
let message = SaferHTML`${sender} has sent you a message.`;

console.log(message)
//返回 has sent you a message.

多語言轉換（國際化處理）。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "歡迎訪問xxx，您是第xxxx位訪問者！"

沒有詳細函數寫法,只是說明一個用途

String.raw()

tag函數的第一個參數strings，有一個raw屬性，也指向一個數組。該數組的成員與strings數組完全一致

tag`First line
Second line`

function tag(strings) {
  console.log(strings.raw[0]);
  // "First line
Second line"
}

參考引用:

es6字符串擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86968.html

es6學習筆記-字符串的擴展_v1.0_byKL

摘要：學習筆記字符串的擴展字符的表示法允許使用的形式表示一個字符，但在之前，單個碼點僅支持到，超出該范圍的必須用雙字節形式表示，否則會解析錯誤。返回布爾值，表示參數字符串是否在源字符串的頭部。，是引入了字符串補全長度的功能。 es6學習筆記-字符串的擴展_v1.0 字符的Unicode表示法 JavaScript 允許使用uxxxx的形式表示一個字符，但在 ES6 之前，單個碼點僅支持u00...

JaysonWang 2019-08-21 11:36 評論0 收藏0
es6學習筆記-箭頭函數_v1.0_byKL

摘要：因為箭頭函數本身沒有所以不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數不可以使用對象，該對象在函數體內不存在。 es6學習筆記-箭頭函數_v1.0 箭頭函數使用方法 var f = v => v; //普通函數配合箭頭函數寫法,這里并且是傳參的 //相當于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 評論0 收藏0
es6學習筆記-數值的擴展_V1.0_byKL

摘要：學習筆記數值的擴展有一些不常用或者還不支持的就沒有記錄了總體來說本篇只是一個備忘而已用來檢查一個數值是否為有限的。兩個新方法只對數值有效，非數值一律返回。參考引用數值擴展 es6學習筆記-數值的擴展有一些不常用或者還不支持的就沒有記錄了,總體來說本篇只是一個備忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用來檢查一個數值...

宋華 2019-08-20 15:06 評論0 收藏0
es6學習筆記-頂層對象_v1.0_byKL

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰 es6學習筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象頂層對象，在瀏覽器環境指的是window對象，在Node指的是gl...

Meils 2019-08-21 11:31 評論0 收藏0
es6學習筆記-let,const和塊級作用域_v1.0_byKL

摘要：考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。函數聲明語句函數表達式循環循環還有一個特別之處，就是循環語句部分是一個父作用域，而循環體內部是一個單獨的子作用域。聲明一個只讀的常量。 es6學習筆記-let,const和塊級作用域_v1.0 塊級作用域 javascript 原來是沒有塊級作用域的,只有全局作用域和函數作用域例子1 因為沒有塊級作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 評論0 收藏0