拼接字符转的转义

　　在程序中常常会写到字符串的拼接，最多见的一中方式就是把拼接的字符串返回到页面上，而后让浏览器渲染成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

这篇文章写的不错。你们能够自行查阅；