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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
小程序表单认证布局及验证详解
Jun 19 Javascript
js实现全选和全不选
Jul 28 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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数组函数
2008/08/18 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python变量不能以数字打头详解
2016/07/06 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python中import机制详解
2017/11/14 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
乡镇群众路线专项整治方案
2014/11/03 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
社区党务工作总结2015
2015/05/19 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python