浅析Js中的单引号与双引号问题


Posted in Javascript onNovember 06, 2013

单引号和双引号其实没啥区别,看你自己习惯了

<input type="button" onclick="alert("1")">-------------------不正确
<input type="button" onclick="alert('1')">-------------------正确

双引号中再用双引号要这样:
var str = "abc\"def\"ghi"
用反斜杠来禁止解析双引号。

下面是我摘录的,希望对你有用:

在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下:
<input value="Test" type="button" onclick="alert(""OK"");" />

IE提示出错后,再漫不经心地改为:
<input value="Test" type="button" onclick="alert(\"OK\");" />

结果还是出错。
这时,我就想不通了,虽然我知道最直接的解决方法是写成这样:
<input value="" type="button" onclick="alert('OK');" />
但为什么javascript中的转义字符\没有效果了呢?

后来找到一段正常的代码:
<input value="Test" type="button" onclick="alert("OK");" />
这时才理解,原来这时,还是归于HTML的管辖范围,所以转义字符应该使用HTML的,而不是javascript的。两个双引号的做法是vbScript的,\"这种做法则是javascript的,而HTML的,则是用",此外还可以使用:"、'。

下面列出各种表达方法:

<html>
<body>
<input value="外双引号内双引号-错误" type="button" onclick="alert("OK");" /><br />
<input value="外单引号内单引号-错误" type="button" onclick='alert('OK');' /><br />
<input value="两个双引号-错误" type="button" onclick="alert(""OK"");" /><br />
<input value="两个单引号-错误" type="button" onclick="alert(''OK'');" /><br />
<input value="\+双引号-错误" type="button" onclick="alert(\"OK\");" /><br />
<input value="\+单引号-错误" type="button" onclick="alert(\'OK\');" /><br />
<input value="外双引号内单引号-OK" type="button" onclick="alert('OK');" /><br />
<input value="外单引号内双引号-OK" type="button" onclick='alert("OK");' /><br />
<input value="外部不使用引号-OK" type="button" onclick=alert('OK');alert("OK"); /><br />
<input value="HTML转义字符"(& # 3 4 ;)-OK" type="button" onclick="alert("OK");" /><br />
<input value="HTML转义字符'(& # 3 9 ;)-OK" type="button" onclick="alert('OK');" /><br />
<input value="HTML转义字符"(& # x 2 2 ;)-OK" type="button" onclick="alert('OK');" /><br />
<input value="HTML转义字符'(& # x 2 7 ;)-OK" type="button" onclick="alert('OK');" /><br />
<input value="HTML转义字符"(& q u o t ;)-OK" type="button" onclick="alert("OK");" /><br />
<input value="HTML转义字符'(& a p o s ;)-IE错误" type="button" onclick="alert('OK');" /><br />
<input value="其它\\-错误" type="button" onclick="alert(\\"OK\\");" /><br />
<input value="其它\& # 3 4 ;-错误" type="button" onclick="alert(\"OK\");" /><br />
</body>
</html>
Javascript 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 #Javascript
js onclick事件传参讲解
Nov 06 #Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 #Javascript
css样式标签和js语法属性区别
Nov 06 #Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 #Javascript
jQuery中$.fn的用法示例介绍
Nov 05 #Javascript
可选择和输入的下拉列表框示例
Nov 05 #Javascript
You might like
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
MSN消息提示类
2006/09/05 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python实现烟花小程序
2019/01/30 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
五年级小学生评语
2014/12/26 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
社区低保工作总结2015
2015/07/23 职场文书