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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
js切换div css注意的细节
Dec 10 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
解析php中反射的应用
2013/06/18 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
课外小组活动总结
2014/08/27 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
2014年施工员工作总结
2014/11/18 职场文书
八年级语文教学反思
2016/03/03 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB