js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解

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

  

对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。

 

转载于:https://www.cnblogs.com/smzd/p/8706995.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SRH】------node遵循的规范,模块划分

1.node遵循的是COMMONJS规范&#xff08;规范即规定如何导入导出&#xff09;1、导入&#xff1a;require 2、导出&#xff1a;module.exports2.模块分类&#xff1a;1、核心模块nodejs下载安装完成后会自带一些模块&#xff0c;这些模块不需要下载&#xff0c;可以直接通过r…

vue.js开发环境搭建

环境准备 Node.js Javascript的运行时环境npm Node.js下的包管理工具webpack 前端资源模块化管理和打包工具vue-cli 脚手架构建工具cnpm npm的淘宝镜像 Vue.js安装 Node.js的安装非常容易&#xff0c;首先从官网下载你所需操作系统的版本&#xff0c;然后一直下一步就ok&…

mysql数据库删除一条数据后还想让新增数据从空缺id处开始

方法1&#xff1a; truncate table 你的表名 //这样不但将数据全部删除&#xff0c;而且重新定位自增的字段 方法2&#xff1a; delete from 你的表名 dbcc checkident(你的表名,reseed,0) //重新定位自增的字段&#xff0c;让它从1开始 方法3&#xff1a; 如果你要保存你的数…

Object相关方法

const object1 {a: somestring,b: 42,c: false };console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]该Object.values()方法返回给定对象自己的可枚举属性值的数组&#xff0c;其顺序与for...in循环提供的顺序相同&#xf…

用Itextsharp 组件导出PDF 的文档的方法

Itextsharp 是一个很强大&#xff0c;开源的&#xff0c;轻量级的 PDF 生成组件&#xff0c;官方网上好像没有相应的API 说明文档&#xff0c;以下是在工作中使用的心得与体会&#xff0c;并附上源码&#xff0c;功能包含了pdf 的创建&#xff0c;table 的创建&#xff0c; 图片…

正则基础知识

创建正则表达式 1.使用new来创建 var exp new RegExp(box , gi );g 全局匹配 i 忽略大小写 m 多行匹配2.使用字面量 var exp /box/gi; 直接用2个 / ; 在俩个斜杠后加上模式修饰符&#xff1b; 俩种创建方式比较: 1.使用字面量方式创建用的更加广泛; 2.当要匹配的内容是变量时,…

详解 vue-cli 的打包配置文件代码

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采…

室内定位(一)

转自&#xff1a;http://www.cnblogs.com/rubbninja/ 各种室内定位方法 具体的室内无线定位技术可以这样来分类&#xff1a; 无线设备&#xff1a;WIFI、蓝牙、ZigBee、RFID、UWB、LED、红外线、超声波、麦克风等定位信息&#xff1a;主要是RSS&#xff08;接收信号强度&#x…

不同浏览器css引入外部字体的方式

/*** 字体后缀和浏览器有关&#xff0c;如下所示* .TTF或.OTF&#xff0c;适用于Firefox 3.5、Safari、Opera * .EOT&#xff0c;适用于Internet Explorer 4.0 * .SVG&#xff0c;适用于Chrome、IPhone * 比如:*/ font-face {font-family: MyFont;/*定义字体名称*/src: url(fon…

Promise实践

var doSomething function() { return new Promise((resolve, reject) > { resolve(返回值); }); };let doSomethingElse function() { return 新的值; }doSomething().then(function () { return doSomethingElse(); }).then(resp > { console.warn(resp); console.wa…

JsonBuilder初出茅庐

互联网这股东风不久前刮到了甘凉国&#xff0c;国王老甘独具慧眼&#xff0c;想赶紧趁着东风未停大力发展移动互联网&#xff0c;因为他笃信布斯雷的理论&#xff1a;“站在风口上&#xff0c;猪都能飞起来”。无奈地方偏僻落后&#xff0c;国内无可用之才啊。老甘一筹莫展的低…

vue-cli 打包部署

1、一般打包 &#xff1a;直接 npm run build。&#xff08;webpack的文件&#xff0c;根据不同的命令&#xff0c;执行不同的代码的&#xff09; 注&#xff1a;这种打包的静态文件&#xff0c;只能放在web服务器中的根目录下才能运行。 2、在服务器中 非根目录下 运行的 打包…

EXCEL怎么打20位以上的数字?

EXCEL怎么打20位以上的数字&#xff1f; 转载于:https://www.cnblogs.com/macT/p/10208794.html

vue render函数

Vue中的Render渲染函数 VUE一般使用template来创建HTML&#xff0c;然后在有的时候&#xff0c;我们需要使用javascript来创建html&#xff0c;这时候我们需要使用render函数。比如如下我想要实现如下html&#xff1a; <div id"container"><h1><a hre…

Nexus介绍

转自&#xff1a;https://www.cnblogs.com/wincai/p/5599282.html 开始在使用Maven时&#xff0c;总是会听到nexus这个词&#xff0c;一会儿maven&#xff0c;一会儿nexus&#xff0c;当时很是困惑&#xff0c;nexus是什么呢&#xff0c;为什么它总是和maven一起被提到呢&#…

vue-cli 打包

一项目打包 1 打包的配置在 build/webpack.base.conf.js文件下 常量config在vue/config/index.js 文件下配置&#xff0c;__dirname是定义在项目的全局变量&#xff0c;是当前文件所在项目的文件夹的绝对路径。 2 需要修改vue/config/index.js 文件下的将build对象下的assets…

乘风破浪:LeetCode真题_010_Regular Expression Matching

乘风破浪&#xff1a;LeetCode真题_010_Regular Expression Matching 一、前言 关于正则表达式我们使用得非常多&#xff0c;但是如果让我们自己写一个&#xff0c;却是有非常大的困难的&#xff0c;我们可能想到状态机&#xff0c;确定&#xff0c;非确定状态机确实是一种解决…

python——获取数据类型

在python中&#xff0c;可使用type()和isinstance()内置函数获取数据类型 如&#xff1a; &#xff08;1&#xff09;type()的使用方法&#xff1a;    >>> a 230 >>> type(a) <class str> >>> a 230 …

vue项目工程中npm run dev 到底做了什么

npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后&#xff0c;需要启动整个项目运行&#xff0c;npm run 其实执行了package.json中的script脚本&#xff0c;npm run dev的执行如下 3.底层相当执行webpack-dev-server --inline --progress --confi…

JavaScript回顾与学习——条件语句

一、if...else // if elsevar age 16;if(0 < age && age < 6){console.log("儿童");}else if(6 < age && age < 14){console.log("少年");}else if(14 < age && age < 35){console.log("青年");}els…