前端js的三种解码方式

JavaScript017

前端js的三种解码方式,第1张

** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。

***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。

1) escape 和 unescape

原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。

编码:

eg:escape('http://www.baidu.com?name=zhang@xiao@jie&order= 你好')

res:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D%u4F60%u597D"

解码：

eg:unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D%u4F60%u597D")

res:" http://www.baidu.com?name=zhang@xiao@jie&order= 你好"

2) encodeURI 和 decodeURI

原理：返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符：! @ # $ &* ( ) = : / ? + '

encodeURI()是Javascript中真正用来对URL编码的函数。

编码：

eg:encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order= 你好')

　 res:" http://www.baidu.com?name=zhang@xiao@jie&order=%E4%BD%A0%E5%A5%BD "

解码：

eg:decodeURI(" http://www.baidu.com?name=zhang@xiao@jie&order=%E4%BD%A0%E5%A5%BD ")

　 res:" http://www.baidu.com?name=zhang@xiao@jie&order= 你好"

3) encodeURIComponent 和 decodeURIComponent

原理：对URL的组成部分进行个别编码，而不用于对整个URL进行编码

编码：

eg:encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')

res:"http%3A%2F% 2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1 "

解码：

eg:decodeURIComponent("http%3A%2F% 2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1 ")

res:" http://www.baidu.com?name=zhang@xiao@jie&order=1 "

函数 描述

encodeURI() 把字符串编码为

URI

encodeURIComponent() 把字符串编码为

URI

组件

escape() 对字符串进行编码

上面是查询来自w3school的资料。那么三者之间有什么区别呢，请容我测试测试。

复制代码

代码如下:

var

str

=

"http://localhost:8080/Product/index?id=123&attr=456&area=中国"

console.log(encodeURI(str))

console.log(encodeURIComponent(str))

console.log(escape(str))

打印结果如下：

复制代码

代码如下:

http://localhost:8080/Product/index?id=123&attr=456&area=%E4%B8%AD%E5%9B%BD

http%3A%2F%2Flocalhost%3A8080%2FProduct%2Findex%3Fid%3D123%26attr%3D456%26area%3D%E4%B8%AD%E5%9B%BD

http%3A//localhost%3A8080/Product/index%3Fid%3D123%26attr%3D456%26area%3D%u4E2D%u56FD

可以看出，

encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

观察escape则发现，:?&都被转码了，而/没有，w3school解释是，escape函数会对ascii码中字母、数字及符号（

*

@

-

_

+

.

/

）之外的所有字符进行编码。

另外，我们可以看出escape对汉字“中国”编码后结果与前两者不同。W3SCHOOL也建议不使用该方法，用前两者代替。

以上所述就是本文的全部内容了，希望对大家学习javascript能够有所帮助。