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 注意事项 与原因分析
Apr 24 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
JS中一些高效的魔法运算符总结
May 06 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
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
json简单介绍
2008/06/10 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python的常用模块之collections模块详解
2018/12/06 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
2014年学习雷锋活动总结
2014/03/01 职场文书
给全校老师的建议书
2014/03/13 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
总经理检讨书
2014/09/15 职场文书
实习计划书范文
2015/01/16 职场文书
幼师中班个人总结
2015/02/12 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
windows系统搭建WEB服务器详细教程
2022/08/05 Servers