今天来聊一聊单引号和双引号在JavaScript中的使用，做web的经常会在HTML中或者JavaScript中拼接字符串，这个时候就会用到单引号与双引号混合使用，如果使用不当还会造成意想不到的bug。

单引号和双引号都可以作为字符串的开始符和关闭符，并且只能‍同一种单或者双引号来定义开始和结束；

在同一种引号中使用相同的引号，需要转义后才能使用。不同引号可以嵌套使用。

下面就来聊一聊这些小细节。

首先，描述一下，具体的应用场景。

第一：从后台界面传递的数据在HTML或者jsp页面展示的时候，我们可能把这些数据直接展示，又或者以变量的形式传递给js函数。

第二：我们用到ajax的时候，从后端异步获取数据，需要把这些数据结合HTML标签CSS属性拼接在一起，然后斧子给某个标签在页面上展示。

具体来说一些这些应用场景。

第一：在HTML或者Jsp中使用

有一个需求，在后台传递一个List集合的数据将要在前台页面展示

前台页面

我们看onclick="test('${str}')"我们给js函数test()需要传递一个参数，这个时候就需要用到双引号中嵌套单引号，为什么要加上单引号，那是因为我们传递的是一个字符串所以要加上单引号（如果是数字可以不加，但是有的时候会出现问题，下面会提到，所以最好都要加上引号），你可能会说，如果加上双引号了？可以加双引号但是前提你要使用转义字符的双引号才可以

使用浏览器的开发者模式查看代码

就可以看到双引号中嵌套双引号了

你可能想说我们一般的转义不就是加上反斜杠（\）不就可以了吗？

但是在HTML，却不可以，要使用转义字符才可以。

单引号的转义字符 '

双引号的转义字符"

既然提到了这，我就说一个我遇到的一个相关问题，只这样的又一次我将32位的UUID传递给js函数，但是却给我返回的是科学计数法，TMD,这个问题搞了我半天。

结果：

加上单引号以后就正常了。

第二：在JavaScript中使用

    最多的就是使用Ajax异步获取数据，拼接字符串。

    场景复原

    首先我们通过Ajax获取后台数据是一个list的集合数据接下来我们要在js中循环遍历这个list,然后拼接字符串，最后将字符串赋值给一个div进行页面展示

js代码展示

网页源码展示

    下面我们就来解释一下

    html += "<a href='' onclick='show(\""+data[i]+"\")'>"+data[i]+"</a><br>";

    首先我们可以看到有一个html的变量用于存放拼接字符串，最外层有一个双引号（也可以是单引号），在第一层里面我们用的都是单引号，如href=''

onclick='',(我说的是第一层)，这里也就说明了，为什么同种引号内不能使用同种引号（指的是父子关系），可以嵌套使用，比如 双引号中使用单引号，然后单引号中在使用双引号。这是允许的。

 

     接下来我们看onclick='show(\""+data[i]+"\")'

    \" 表示转义双引号，后面又跟了一个双引号是与最开始的双引号呼应，"<a href='' onclick='show(\""是个字符串而字符串的内容就是

    <a href='' onclick='show(\"后面的data[i]就是另一个字符串，我们知道字符串的拼接需要用加号连接，所以这里也就好理解为什么要在data[i]两边加上加号了。再到后面"\")'>"又是一个字符串内容是\")'。接着后面"</a><br>";是一个字符串。而"</a><br>"与"<a href='' onclick='show(\""+data[i]+"\")'>"之间的data[i]需要用两个加号拼接前后的字符串。

说到这里总则要记住上面提到的规则，那么我们在面对单引号或者双引号拼接字符串的时候就会得心应手了！。

更多文章 访问我的博客：http://www.caoyong.xin:8080/blogger