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面向对象编程
Mar 04 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
写一个Vue Popup组件
Feb 25 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
js实现简单的打印表格
Jan 15 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+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
拖拉表格的JS函数
2008/11/20 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
python删除特定文件的方法
2015/07/30 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python实现Linux监控的方法
2019/05/16 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python两种注释用法的示例
2020/10/09 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
小班重阳节活动方案
2014/02/08 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
行政介绍信范文
2015/05/04 职场文书
资金申请报告范文
2015/05/14 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Python中异常处理用法
2021/11/27 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis