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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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生成短域名函数
2015/03/23 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
PyQt5实现下载进度条效果
2018/04/19 Python
使用Python更换外网IP的方法
2018/07/09 Python
python学生管理系统开发
2019/01/30 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
汉语言文学专业求职信
2014/06/19 职场文书
双拥工作宣传标语
2014/06/26 职场文书
社区两委对照检查材料
2014/08/23 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
大学生操行评语大全
2014/12/31 职场文书
陕西导游词
2015/02/04 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书