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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JS request函数 用来获取url参数
May 17 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue实现分页组件
Jun 16 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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自定义函数收代码
2010/08/01 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php显示时间常用方法小结
2015/06/05 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript实现的listview效果
2007/04/28 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Django发送html邮件的方法
2015/05/26 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python实现带百分比的进度条
2016/06/28 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
材料化学专业求职信
2014/07/15 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
会计出纳岗位职责
2015/03/31 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书