JavaScript中的单引号和双引号
JavaScript中的单引号和双引号
今天来聊一聊单引号和双引号在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
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【转】浅谈php://filter的妙用
php://filter是PHP中独有的协议,利用这个协议可以创造很多“妙用”,本文说几个有意思的点,剩下的大家自己下去体会。 XXE中的使用 php://filter之前最常出镜的地方是XXE。由于XXE漏洞的特殊性,我们在读取HTML、PHP等文件时可能会抛出此类错误parser error : StartTag: invalid element name。其原因是,PHP是基于标签的脚本语言,<?php ... ?>这个语法也与XML相符合,所以在解析XML的时候会被误认为是XML,而其中内容(比如特殊字符)又有可能和标准XML冲突,所以导致了出错。 那么,为了读取包含有敏感信息的PHP等源文件,我们就要先将“可能引发冲突的PHP代码”编码一遍,这里就会用到php://filter。 php://filter是PHP语言中特有的协议流,作用是作为一个“中间流”来处理其他流。比如,我们可以用如下一行代码将POST内容转换成base64编码并输出: readfile("php://filter/read=convert.base64-encode/resource=php...
- 下一篇
EXE文件结构及读取方法
出自 “晓风残月xj” 博客 由于各种原因,可能存在诸多不足,欢迎斧正! 一、EXE文件概念 EXE File英文全名executable file ,译作可执行文件,可移植可执行 (PE) 文件格式的文件,它可以加载到内存中,并由操作系统加载程序执行,是可在操作系统存储空间中浮动定位的可执行程序。如记事本程序notepad.exe ,可以用来编辑文档,如:测试.txt双击打开notepad.exe记事本程序来进行编辑处理。 二、EXE文件结构 EXE文件分为两个部分: EXE文件头和程序本体。exe文件比较复杂,属于一种多段的结构,是DOS最成功和复杂的设计之一。每个exe文件包含一个文件头和一个可重定位程序的映像。文件头包含MS-DOS用于加载程序的信息,例如程序的大小和寄存器的初始值。文件头还指向一个重定位表,该表包含指向程序映像中可重定位段地址的指针链表。MS-DOS通过把该映像直接从文件复制到内存加载exe程序,然后调整定位表中说明的可重定位段地址。定位表是一个重定位指针数组,每个指向程序映像中的可重定位段地址。预知详细原理与结构,请点击EXE文件结构及原理 ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果