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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
js密码强度检测
Jan 07 Javascript
js实现上传图片及时预览
May 07 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
客户端脚本中常常出现的一些问题和调试技巧
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 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP最常用的正则表达式
2017/02/13 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
详解python基础之while循环及if判断
2017/08/24 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python 类的特殊成员解析
2018/06/20 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python中rb含义理解
2020/06/18 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
外包公司软件测试工程师
2014/11/01 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
运动会班级前导词
2015/07/20 职场文书