js中单双引号的区别

2023-10-04 07:40
文章标签 js 区别 中单 双引号

本文主要是介绍js中单双引号的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自https://blog.csdn.net/ya_1249463314/article/details/53781459

1.引入

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

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

前面标签的区域:

    <div id="bodyContent">
     
    </div>

jquery脚本:

    $.ajax({
            type:"POST",
            dataType:"json",
            url:getWebRootPath()+"/location/getCityList.json",
            success:function(data){
                if(data.provinceList !=null){
                      var result="";
                      $.each(data.provinceList,function(i,item){
                          var index=0;
                          result+='<br/>'+'<div class="pull-left" style="cursor:pointer;" οnclick="getSelectedAddress(\''+item.longCode+'\'+\',\'+\''+item.name+'\');">'+item.name+'</div>'+
                          "<hr style='width:100%;'/>"+"<table style='cursor:pointer;'>"+
                          "<tr>";
                          $.each(item.list,function(j,subItem){
                              index=j;
                              if(j%4 ==0 ){
                                  result+="</tr><tr>";
                              }
             //---------------------------字符串拼接的关键就在下一句:-------------
                                           result+='<td style="border:1px solid #ECECEC;height:35px;background:#F1F1F1;width:112px;" οnclick="getSelectedAddress(\''+subItem.longCode+'\'+\',\'+\''+subItem.name+'\');">'+subItem.name+'</td>';
                          });
                          for(var i=0;i<(3-(index%4));i++){
                              result+="<td style='border:1px solid #ECECEC;height:35px;background:#F1F1F1;width:112px;'>"+"</td>";
                          }
                          result+="</tr></table>";
                          addressDialog.render();
                    addressDialog.show();
                      });
                      $("#bodyContent").html(result);
                }
            },
            error:function(data){
                  alert("对不起,系统出错!");
            }
    });

解读上面代码:

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

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

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

第二层解析:

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


第三层解析:

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


有参数的形式:


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

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

 
---------------------  
作者:sunpy 孙培煜  
来源:CSDN  
原文:https://blog.csdn.net/ya_1249463314/article/details/53781459  
版权声明:本文为博主原创文章,转载请附上博文链接!

这篇关于js中单双引号的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1601

相关文章

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

Java 关键字transient与注解@Transient的区别用途解析

《Java关键字transient与注解@Transient的区别用途解析》在Java中,transient是一个关键字,用于声明一个字段不会被序列化,这篇文章给大家介绍了Java关键字transi... 在Java中,transient 是一个关键字,用于声明一个字段不会被序列化。当一个对象被序列化时,被

解读@ConfigurationProperties和@value的区别

《解读@ConfigurationProperties和@value的区别》:本文主要介绍@ConfigurationProperties和@value的区别及说明,具有很好的参考价值,希望对大家... 目录1. 功能对比2. 使用场景对比@ConfigurationProperties@Value3. 核

Spring Boot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)

《SpringBoot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)》:本文主要介绍SpringBoot拦截器Interceptor与过滤器Filter深度解析... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现与实

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文

什么是ReFS 文件系统? ntfs和refs的优缺点区别介绍

《什么是ReFS文件系统?ntfs和refs的优缺点区别介绍》最近有用户在Win11Insider的安装界面中发现,可以使用ReFS来格式化硬盘,这是不是意味着,ReFS有望在未来成为W... 数十年以来,Windows 系统一直将 NTFS 作为「内置硬盘」的默认文件系统。不过近些年来,微软还在研发一款名

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的