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中匿名函数,函数直接量和闭包
May 08 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
小程序实现筛子抽奖
May 26 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实现会员账号单唯一登录的方法分析
2019/03/07 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python利用datetime模块计算时间差
2015/08/04 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
基于python实现简单日历
2018/07/28 Python
python多任务及返回值的处理方法
2019/01/22 Python
python实现图片插入文字
2019/11/26 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
母校寄语大全
2014/04/10 职场文书
经典团队口号
2014/06/06 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
公司活动总结范文
2014/07/01 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Vue.Draggable实现交换位置
2022/04/07 Vue.js
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL