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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

native和static native区别

本文基于Hello JNI  如有疑惑,请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小,以视图的内容或尺寸为基础的布局,比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样,从字面上的意思match_parent更贴切一些,于是从2.2开始,两个属性都可以使用,但2.3版本以后的建议使

Collection List Set Map的区别和联系

Collection List Set Map的区别和联系 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文章。 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否

javascript中break与continue的区别

在javascript中,break是结束整个循环,break下面的语句不再执行了 for(let i=1;i<=5;i++){if(i===3){break}document.write(i) } 上面的代码中,当i=1时,执行打印输出语句,当i=2时,执行打印输出语句,当i=3时,遇到break了,整个循环就结束了。 执行结果是12 continue语句是停止当前循环,返回从头开始。

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>