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 相关文章推荐
菜单效果
Oct 14 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
Jquery Fade用法详解
Nov 06 jQuery
客户端脚本中常常出现的一些问题和调试技巧
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
python eventlet绿化和patch原理
2020/11/21 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
什么是封装
2013/03/26 面试题
金融管理专业毕业生求职信
2014/03/12 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
学校消防安全责任书
2014/07/23 职场文书