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之典型高阶函数应用介绍
Jan 10 Javascript
javascript实现回到顶部特效
May 06 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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/09/17 PHP
PHP简单日历实现方法
2016/07/20 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
layui表格实现代码
2017/05/20 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
详解python时间模块中的datetime模块
2016/01/13 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python list和str互转的实现示例
2020/11/16 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
阿里旅行:飞猪
2017/01/05 全球购物
学生出入校管理制度
2014/01/16 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
十二生肖观后感
2015/06/12 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python