ES6之模版字符串

ES6之模版字符串

　　最近在項目中使用了ES6的模版字符串，在這裏加以總結。

　　1.以前咱們也可使用JavaScript輸出模版字符串，一般是下面這樣的：

        $("#result").append(
        "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
        );

　　可是咱們能夠看到：這樣的傳統作法須要使用大量的「」（雙引號）和 + 來拼接才能獲得咱們須要的模版。可是這樣是十分不方便的。

　

　因而ES6中提供了模版字符串，用`（反引號）標識，用${}將變量括起來。上面的例子能夠用模版字符串寫成下面這樣：

        $("#result").append(
        `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
        );

　　這樣的作法就簡潔了不少，咱們不須要再使用大量的""和+來拼接字符串和變量。

 

　2.　固然，模版字符串能夠引入變量，不使用變量也是能夠的。以下所示：

	` I am a man.`


	` No matter what you do,
	  I trust you.` 

　　

 

　 3.　咱們還能夠先定義變量，而後在模版字符串中嵌入變量：

	var name="zzw";
	` ${name},no matter what you do,
	  I trust you.` 

　　

　4.顯然，因爲反引號是模版字符串的標識，若是咱們須要在字符串中使用反引號，咱們就須要對其進行轉義，以下所示：

    `No matter\` what you do,
      I trust you.` 

 

　 5.注意：若是使用模版字符串表示多行字符串，全部的空格和縮進都會被保存在輸出中！！

	 console.log( `No matter\` what you do,
	  I trust you.`); 

　　輸出結果以下：

 

　6. 在${}中的大括號裏能夠放入任意的JavaScript表達式，還能夠進行運算，以及引用對象屬性。

　　

    var x=88;
    var y=100;
    console.log(`x=${++x},y=${x+y}`);

結果以下所示：

 

　　7.更強大的是：模版字符串還能夠調用函數：

	function string(){
		return "zzw likes es6!";
	}
	console.log(`你想說什麼? 
				嗯，${string()}`);
	

　　結果以下所示：

 

　　另外，若是函數的結果不是字符串，那麼，將按照通常的規則轉化爲字符串：

    function string(){
        return 666;
    }
    console.log(`你想說什麼? 
                嗯，${string()}`);

　　結果以下所示：

　　在這裏，實際上數字666被轉化成了字符串666.

 

　　8.若是在${}中的變量時沒有命名的，那麼會報錯：

    console.log(`你想說什麼? 嗯，${string()}`);

　　在上面這句代碼中，string()函數沒有聲明，因而報錯：

 

　　9.其實，咱們還能夠在${}中輸入一個字符串，知識結果仍舊會返回一個字符串：

    console.log(`你想說什麼?
             嗯，${"其實我不是變量~"}`);

　　結果以下所示：

 

　　

　　10.若是但願引用模版字符串自己，能夠像下面這樣寫：

　　

    let str="return"+"`Hello! ${name}`";
    let func=new Function("name",str);
    console.log(func("zzw"));

 

　　結果以下：

       

 

 

 

　沒有傘的孩子必須努力奔跑！