javascript字符串拼接引号转义

朱雀 2021-09-30 03:06 513阅读 0赞

### 简单总结下转义规则（针对单双引号）： ###

内层无需转义的情形：1.外双引，内单引 2.外单引，内双引

内层需要转义的情形：1.外双引，内双引 2.外单引，内单引（遇到同类，内外层都是双引号，或者内外层都是单引号）

### 举例： ###

### 例1： ###

假如最终拼接结果为：

![20190722200514573.png][]

可以这样写：

var html = '<a href="javascript:void(0)" onclick="alert(\''+2+'\')">编辑</a>';
    var html2 = "<a href=\"javascript:void(0)\" onclick=\"alert('"+2+"')\">编辑</a>";

![20190722200745436.png][]

还可以这样写（很明显，我在下方给没必要添加转义的地方加了转义；比如：html中href属性的双引号）：

var html = '<a href=\"javascript:void(0)\" onclick=\"alert(\''+2+'\')\">编辑</a>';
    var html2 = "<a href=\"javascript:void(0)\" onclick=\"alert(\'"+2+"\')\">编辑</a>";

转义如果在必须转义的地方（就是博客一开始总结的规则里写的，拿html举例，alert方法中的单引号就必须转义），不添加转义则会出现不可预料的结果（可能报错）；如果在不是必须添加转义的地方添加转义，不会出现问题。通常，为了具有可读性，只会在需要转义的地方添加转义

### 例2： ###

再来一个稍微复杂的：（这是我之前的一篇博客【[前端转换嵌套的json数据报错][json]】中的数据，当时是后台用工具类生成的，现在看看在前端该怎么拼出来）

![20190722202825523.png][]（记为P3）

{"params":"{\"name\":\"zhangsan\",\"id\":\"101\",\"token\":\"123456\"}"}

这个初看上去有点难，我们可以先解决：

![2019072220314572.png][]（记为P1）

{"params":"{"name":"zhangsan"}"}

然后解决：

![20190722203909260.png][]（记为P2）

{"params":"{\"name\":\"zhangsan\"}"}

最后再来解决P3

P1：

var params = '{"params":"{"name":"zhangsan"}"}';

写成这样也没问题：

var params = '{\"params\":\"{\"name\":\"zhangsan\"}\"}';

P2：

因为我们需要一个\\（backslash），两个\\\\放在一起会解析成\\（[https://www.w3schools.com/js/js\_strings.asp][https_www.w3schools.com_js_js_strings.asp]的Special Characters部分）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70][]

var params = '{"params":"{\\"name\\":\\zhangsan\\"}"}';

写成这样也没问题：

var params2 = '{\"params\":"{\\\"name\\\":\\\"zhangsan\\\"}\"}';

P3：多应用几次P2的结果就ok了

var params = '{"params":"{\\"name\\":\\zhangsan\\",\\"id\\":\\"101\\",\\"token\\":\\"123456\\"}"}';

写成这样也没问题：

var params2 = '{\"params\":\"{\\\"name\\\":\\\"zhangsan\\\",\\\"id\\\":\\\"101\\\",\\\"token\\\":\\\"123456\\\"}\"}';

参考链接：[https://www.w3schools.com/js/js\_strings.asp][https_www.w3schools.com_js_js_strings.asp]

[前端转换嵌套的json数据报错][json]

[20190722200514573.png]: /images/20210923/893594d9419042ffa8636b0e3839cb9d.png
[20190722200745436.png]: /images/20210923/ef78964b638b494bb338e16a0475ea1d.png
[json]: https://blog.csdn.net/u010999809/article/details/95515395
[20190722202825523.png]: /images/20210923/2c4f8e037b3b48e28e709645706b0c53.png
[2019072220314572.png]: /images/20210923/9d4554b485064e749dde663556d4ca7e.png
[20190722203909260.png]: /images/20210923/5df7851673a34a38a57c0b2958e85553.png
[https_www.w3schools.com_js_js_strings.asp]: https://www.w3schools.com/js/js_strings.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70]: /images/20210923/f663fc4746fc467b927e3b0db6d55c25.png