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

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

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

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

Before和BeforeClass的区别及说明

《Before和BeforeClass的区别及说明》:本文主要介绍Before和BeforeClass的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Before和BeforeClass的区别一个简单的例子当运行这个测试类时总结Before和Befor

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

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