js中单引号和双引号的使用区别

缺乏、安全感 2022-05-31 07:07 364阅读 0赞

# 1.引入    #

在jquery或者js中拼接字符串时，使用单引号和双引号是没有区别的，都可以被成功解析成字符串，但是，在一些复杂的字符串拼接时，需要单引号和双引号的混合使用时，就需要注意了。最近在项目中写js脚本时，发现firebug经常会报多一个单引号或者多一个双引号这种低级错误。但是要是搞不清这两者，你就会把复杂的字符串拼接搞的乱七八糟、错误百出。

# 2.项目中的场景 #

使用ajax异步提交数据之后，返回了一个数据，需要以字符串拼接的方式将标签和返回的数据进行拼接设置到前面的标签的区域上。

# 3.实际问题    #

前面标签的区域：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****div** id="bodyContent"**>**  
2.    
3.  **</****div****>**

jquery脚本：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  $.ajax(\{  
2.          type:"POST",  
3.          dataType:"json",  
4.          url:getWebRootPath()+"/location/getCityList.json",  
5.          success:function(data)\{  
6.              if(data.provinceList !=null)\{  
7.                  var result="";  
8.                  $.each(data.provinceList,function(i,item)\{  
9.                      var index=0;  
10.                     result+='**<****br****/>**'+'**<****div** class="pull-left" style="cursor:pointer;" onclick="getSelectedAddress(\\''+item.longCode+'\\'+\\',\\'+\\''+item.name+'\\');"**>**'+item.name+'**</****div****>**'+  
11.                     "**<****hr** style='width:100%;'**/>**"+"**<****table** style='cursor:pointer;'**>**"+  
12.                     "**<****tr****>**";  
13.                     $.each(item.list,function(j,subItem)\{  
14.                         index=j;  
15.                         if(j%4 ==0 )\{  
16.                             result+="**</****tr****>****<****tr****>**";  
17.                         \}  
18.          //---------------------------字符串拼接的关键就在下一句：-------------  
19.                                        result+='**<****td** style="border:1px solid \#ECECEC;height:35px;background:\#F1F1F1;width:112px;" onclick="getSelectedAddress(\\''+subItem.longCode+'\\'+\\',\\'+\\''+subItem.name+'\\');"**>**'+subItem.name+'**</****td****>**';  
20.                     \});  
21.                     for(var i=0;i**<**(3-(index%4));i++)\{  
22.                         result+="**<****td** style='border:1px solid \#ECECEC;height:35px;background:\#F1F1F1;width:112px;'**>**"+"**</****td****>**";  
23.                     \}  
24.                     result+="**</****tr****>****</****table****>**";  
25.                     addressDialog.render();  
26.                 addressDialog.show();  
27.                 \});  
28.                 $("\#bodyContent").html(result);  
29.             \}  
30.         \},  
31.         error:function(data)\{  
32.             alert("对不起，系统出错！");  
33.         \}  
34. \});

解读上面代码：

我这里主要就是使用result变量作为字符串拼接的变量来设置拼接的值，最后使用html(result)函数将值设置在指定的区域div上。

## 第一层解析：    ##

这个变量的最外面采用的是单引号，意思就是将里面的内容作为一个字符串的形式。里面拼接的是html标签<td>然后就不需双引号就可以将值subItem.name这个值拼接起来了。结果：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  result+='**<****td****>**'+subItem.name+'**</****td****>**';

## 第二层解析： ##

上面第一层使用+=完全是为了可以循环拼接出后台传过来list中的所有逻辑对象pojo（与题目无关）。为了使拼接的表格美观，所以就需要有style属性。而此时如果使用单引号来括起来style的属性对应的属性值，那么前面第一个单引号会与style的属性值的第一个单引号相匹配造成错误匹配，因此系统就会报缺少;分号的错误。所以应该使用双引号来区分。结果：

![Center][]

## 第三层解析： ##

由于这个表格还需添加点击事件来完成表格内的数据可以被获取来完成提交的功能。我们需要点击函数里面添加两个必要的形参，然后将形参作为逻辑处理的数据，而此时又需要添加引号了。。。如果是无参的函数则并没有多大的变化。

![Center 1][]

有参数的形式：

![Center 2][]

解析：箭头所指的地方我们使用了转义字符，将\\'转义成了双引号"，我在没解决问题之前是采用的双引号，可是firebug却报错，说缺少分号，意思就是这个字符串拼接的不匹配了。仔细思考下发现，getSelectedAddress函数前面的双引号的作用是作为属性值的设置。而此时再使用双引号是用来字符串拼接不是设置属性值了，浏览器肯定就会造成错误匹配的情况。由于需要拼接的变量subItem.longCode是作为result的外部变量，属于和result同级的，所以前后两边的字符串的拼接，外部必须使用单引号括起来，在这里单引号是整个表格标签的统一符号： ' +subItem.longCode+ ' 。而里面是属性值，所以里面必须是双引号（红箭头的位置）。直接使用会造成浏览器歧义，解决办法就是采用转义字符，将单引号转义成双引号。后面都是一样了。

## 第四层解析： ##

中间的逗号，可能会以为是getSelectedAddress方法会有两个参数subItem.longCode和subItem.name两个参数，而实际上，这个逗号拼接只是作为一个字符串将值与前后两个字符串变量拼接在了一起作为整体的一个字符串变量。所以getSelectedAddress方法里面只有一个参数： ' subItem.longCode,subItem.name '。

[view plain]: http://blog.csdn.net/ya_1249463314/article/details/53781459#
[Center]: /images/20220531/527968d0c2f9467c8635dd82e1a8b2f1.png
[Center 1]: /images/20220531/a3799b84653448d381b6dd8aa82fb36e.png
[Center 2]: /images/20220531/e737c985e7a9410c813fb0ba60cd3e4e.png