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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
客户端脚本中常常出现的一些问题和调试技巧
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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
smarty内置函数section的用法
2015/01/22 PHP
php通过各种函数判断0和空
2020/07/04 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python使用7z解压apk包的方法
2015/04/18 Python
Python pickle模块用法实例分析
2015/05/27 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
材料成型及控制工程专业求职信
2014/06/19 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
美术教师个人工作总结
2015/02/06 职场文书
创先争优个人总结
2015/03/04 职场文书
工作调动申请报告
2015/05/18 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2019个人工作总结
2019/06/21 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android