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 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
基于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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
学习python (1)
2006/10/31 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
会计核算科岗位职责
2014/03/19 职场文书
教师专业自荐信
2014/05/31 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
行政撤诉申请书
2015/05/18 职场文书
观后感的写法
2015/06/19 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫