ES 6-テンプレートコンパイル(正規表現およびテンプレート文字列の変化を説明)

テンプレート文字列から正式テンプレートを生成します.
テンプレート文字列:

var template = `

    
        

    

`;

このテンプレートは、JavaScript防止コードを使用し、出力JavaScript式を使用します.
コンパイルプロセス:

function compile(template) {

    var evalExpr = //g;
    //     ''  ,           ,     val        
    //        <.>    ：''      ，     '>'，     。
    var expr = //g;
    //     ''  ，          
    // [\s\S]       ，            

    template = template
    .replace(evalExpr, '`); 
 echo( $1 ); 
 echo(`')  // 1
    .replace(expr, '`); 
 $1 
 echo(`');              // 2

    template = 'echo(`' + template + '`);';             // 3

    var script = 
    `(function parse(data) {
        var output = "";

        function echo(html) {
            output += html;
        }

        ${ template }

        return output;
    })`;

    return script;
}

var div = document.getElementById("test");
var parse = eval(compile(template));
// innerHTML               
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner"] });

templateはコンパイル中に3つの遷移状態があり、以下は各状態templateのコードです.

// 1 : .replace(evalExpr, '`); 
 echo( $1 ); 
 echo(`')

"

    
        
`); 
    echo(  data.supplies[i]  ); 
    echo(`
    

"


// 2 : .replace(expr, '`); 
 $1 
 echo(`'); 

"

    `); 
  for(var i = 0; i < data.supplies.length; i++) {  
    echo(`
            
`); 
    echo(  data.supplies[i]  ); 
    echo(`
        `); 
  }  
 echo(`

"



// 3 : 'echo(`' + template + '`);'

"echo(`
    

        `); 
        for(var i = 0; i < data.supplies.length; i++) {  
            echo(`
                    
`); 
            echo(  data.supplies[i]  ); 
            echo(`
                `); 
        }  
echo(`
    
`);"

参照リンク:https://segmentfault.com/q/1010000013871493
参考書:『ES 6標準入門』