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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python插入排序算法实例分析
2015/07/03 Python
Django入门使用示例
2017/12/12 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
消防宣传口号
2014/06/16 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
画展邀请函
2015/01/31 职场文书
年底个人总结范文
2015/03/10 职场文书
小学生暑假安全公约
2015/07/14 职场文书