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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JS实现网页时钟特效
Mar 25 Javascript
ES6函数和数组用法实例分析
May 23 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
cache_lite试用
2007/02/14 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript数组排序汇总
2015/07/07 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
vue组件学习教程
2017/09/09 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
拉歌口号大全
2014/06/13 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
高三语文复习计划
2015/01/19 职场文书
顶岗实习协议书
2015/01/29 职场文书
导游欢送词
2015/01/31 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
python 逐步回归算法
2021/04/06 Python