拼接字符轉的轉義

　　在程序中常常會寫到字符串的拼接，最多見的一中方式就是把拼接的字符串返回到頁面上，而後讓瀏覽器渲染成html代碼。

如今es6已經用的很多了，可是由於一些緣由，有的項目只能用最原始的加號「+」拼接，因此就會出現一種狀況；請看下面的代碼：

1 var stringify_json = JSON.stringify(rowObject);
2 var str2 = 1;

1 str +="<input onclick='del_id("+stringify_json+","+str2+")' type='button' value='刪除' />";
2 function del_id(a,b){
3     console.log(a);
4     console.log(b);
5 }

 

上面是代碼的生命，這個時候是沒有問題的，你把str直接返回到頁面，頁面是能夠正常的解析的，點擊這個按鈕也是能打印的；下面是打印的結果

打印的結構是沒有任何問題的。可是當咱們把str2換成字符串的時候，就發現頁面開始報錯了。

也就是上面的代碼改爲str2 = "string"的時候，頁面開始報錯了；下面是錯誤的信息，和頁面的渲染結果；

發現這個並非按照字符串拼接上去的， 因此js認爲這個是方法，因此就出現上上面的錯誤了。

因此咱們在拼接的時候，就須要給這個string兩邊加上引號，因此就有了下面的代碼：

1 str +="<input onclick='del_id("+stringify_json+",'"+str2+"')' type='button' value='刪除' />";

而後再頁面上的渲染就是這樣的了。

也就是說，html解析器在解析到string前面的引號的時候，就認爲這一段就完成，因此頁面也就直接報錯了，也就是說，我們須要把拼接上的單引號，變成雙引號；

下面的截圖是個人編輯器的，我直接把上面代碼中的單引號改爲雙引號的。

編輯器直接把str2不當成一個變量了。這個確定是不行的了，因此這個時候就須要用上我們的轉移字符   "\"   了；

1 str +="<input onclick='del_id("+stringify_json+",\""+str2+"\""+")' type='button' value='刪除' />";

這個是加上轉移字符以後的，也就是說，\後面的引號，不當成是我們拼接的東西，而是就是簡單的表示本身是個引號。這樣的話，咱們就能夠正常的打印了。

----------------華麗的分割線-----------------------------

如今已經有不少項目是用es6細的了，es6有更優美的拼接字符串的方式；請參見下面的連接

http://www.javashuo.com/article/p-bewevqjt-bt.html

這篇文章寫的不錯。你們能夠自行查閱；