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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python 并发下载器实现方法示例
2019/11/22 Python
python 字典访问的三种方法小结
2019/12/05 Python
python speech模块的使用方法
2020/09/09 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
物理学专业求职信
2014/07/04 职场文书
新兵入伍心得体会
2014/09/04 职场文书
创业计划书之面包店
2019/09/17 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python