js技巧--转义符"\"的妙用


Posted in Javascript onJanuary 09, 2007

// blueDestiny, never-online // blueDestiny [at] 126.com

通常,我们在动态给定一个container的innerHTML时,通常是样做的:
<div id="divc" />
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementById("divc");
var html = ""
html += ""
+ "<h1>"
+ "<a href='javascript:;' onclick=\"alert('javascript')\">DHTML innerHTML propery.</a>"
+ "</h1>";
div.innerHTML = html;
</SCRIPT>

写得习惯了的话,倒也不麻烦,但有没有更简单的一个方法呢?请看下面的例子:

<SCRIPT LANGUAGE="JavaScript">
var html='\
<table width="100%" border="0" cellspacing="0" cellpadding="0">\
<tr>\
<td> </td>\
</tr>\
<tr>\
<td> </td>\
</tr>\
</table>\
';
alert(html);
</SCRIPT>
是不是没有这么麻烦了?但还是要有几点注意,看下面的例子
<SCRIPT LANGUAGE="JavaScript">
//要用\'把单引号转义
var html='\
<h1>\
javascript技巧\
</h1>\
<a href="javascript:;" onclick="alert(\'javascript\')">javascript转义</a></font>\
<br/>\
power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>
该转义的地方还是得用"\"

'-------------------------------------------------------
' 原理:
'-------------------------------------------------------
这个是我自己的个人观点,如果有不对的地方,请指出:
还是看个例子:
<SCRIPT LANGUAGE="JavaScript">
//s1和s2的字符a前都有一个空格
s1='\
a';
s2=' a';
document.write("s1: " + s1.length + "\ns2: " + s2.length);
</SCRIPT>
输出结果:
s1: 2 s2: 2
也就是说转义符将回车转义掉了!也就是说
再看个例子:
<SCRIPT LANGUAGE="JavaScript">
//下面这个字符串是有空格的,也就是这样s1='\ 的。
s1='\ 
a';
document.write("s1: " + s1.length);
</SCRIPT>
输出错误,错误提示:未结束字符串常量。
也就是说是多加了一个空格的原因。那再这样试试
<SCRIPT LANGUAGE="JavaScript">
s1='\ \
a';
document.write("s1: " + s1.length);
</SCRIPT>
结果很明显了,在字符串中,"\"转义符可以将回车转义掉(也就是回车符不存在了),但是不能将制表符,以及空格字符转义(它们是存在的,上面的例子说明了这一点)。

最后,给大家一个小tips,还记得上面的这个代码吗?
<SCRIPT LANGUAGE="JavaScript">
//要用\'把单引号转义
var html='\
<h1>\
javascript技巧\
</h1>\
<a href="javascript:;" onclick="alert(\'javascript\')">javascript转义</a></font>\
<br/>\
power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>
仔细观察弹出来的模态框,看看字符串是怎么样的?应该就会明白了。

Javascript 相关文章推荐
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
js实现简单进度条效果
Mar 25 Javascript
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 #Javascript
Javascript miscellanea -display data real time, using window.status
Jan 09 #Javascript
Javascript - HTML的request类
Jan 09 #Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 #Javascript
Javascript调试工具(下载)
Jan 09 #Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 #Javascript
You might like
请php正则走开
2008/03/15 PHP
php入门小知识
2008/03/24 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
window.location.hash 使用说明
2010/11/08 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python处理json数据中的中文
2014/03/06 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
成语的广告词
2014/03/19 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
股东出资协议书
2016/03/21 职场文书
Apache POI的基本使用详解
2021/11/07 Servers