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
Nov 25 Javascript
Prototype使用指南之ajax
Jan 10 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
处理canvas绘制图片模糊问题
May 11 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模拟HTTP认证
2006/10/09 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
JS实现轮播图效果
2020/01/11 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python 切换root 执行命令的方法
2019/01/19 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
掌上明珠Java程序员面试总结
2016/02/23 面试题
十佳青年个人事迹材料
2014/01/28 职场文书
普通话演讲稿
2014/09/03 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript