js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解


Posted in Javascript onApril 01, 2016

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:

unescape,decodeURI,decodeURIComponent 。

下面简单介绍一下它们的区别

1 escape()函数

定义和用法

escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

语法

escape(string)

参数 描述

string 必需。要被转义或编码的字符串。

返回值

已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明

该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: -_ . *

其他所有的字符都会被转义序列替换。

2 encodeURI()函数

定义和用法

encodeURI() 函数可把字符串作为 URI 进行编码。

语法

encodeURI(URIstring)

参数 描述

URIstring 必需。一个字符串,含有 URI 或其他要编码的文本。

返回值

URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

说明

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

3 encodeURIComponent() 函数

定义和用法

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法

encodeURIComponent(URIstring)

参数 描述

URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。

返回值

URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

说明

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

提示和注释

提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

4 总结:

通过对三个函数的分析,我们可以知道:escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。

5 示例:

1 escape()

<script type="text/javascript">
document.write(escape("http://www.w3school.com.cn/") + "<br />")
document.write(escape("?!=()#%&"))
</script>输出:
http%3A//www.w3school.com.cn
%3F%21%3D%28%29%23%25%26

2 encodeURI()

<script type="text/javascript">
document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(",/?:@&=+$#"))
</script>输出:
http://www.w3school.com.cn/
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#

对整个URL进行编码,而URL的特定标识符不会被转码。

3 encodeURIComponent()

例1:

<script type="text/javascript">
document.write(encodeURIComponent("http://www.w3school.com.cn/"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
</script输出:
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

例2:

<script language="javascript">document.write('
<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');</script>

对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。

Javascript 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
基于jquery实现轮播焦点图插件
Mar 31 #Javascript
javascript中错误使用var造成undefined
Mar 31 #Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 #Javascript
js表单验证实例讲解
Mar 31 #Javascript
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
You might like
Web程序工作原理详解
2014/12/25 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
js获取class的所有元素
2013/03/28 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
简单了解python的break、continue、pass
2019/07/08 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
宿舍卫生检讨书
2014/01/16 职场文书
三方协议书范本
2014/04/22 职场文书
读书活动总结范文
2014/04/26 职场文书
民族精神月活动总结
2014/08/28 职场文书
离婚协议书格式
2015/01/26 职场文书
Python Django模型详解
2021/10/05 Python