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 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
基于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
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python实现字典的key和values的交换
2015/08/04 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
公司司机岗位职责
2014/02/07 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
法人授权委托书
2014/04/03 职场文书
投资意向协议书
2015/01/29 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫