encodeURI()、encodeURIComponent()区别及使用场景

最新推荐文章于 2025-02-28 15:04:45 发布

Saga Two

最新推荐文章于 2025-02-28 15:04:45 发布

阅读量2.3w

点赞数 16

分类专栏： Javascript+ES6知识

本文链接：https://blog.csdn.net/m0_46309087/article/details/119839122

版权

Javascript+ES6知识专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了JavaScript中的encodeURI()和encodeURIComponent()两个函数在URL编码中的不同用法。encodeURI()主要针对整个URL进行转码，保留URL元字符和语义字符；而encodeURIComponent()则转码更多字符，常用于URL参数部分。在实际使用中，当URL带有特殊参数时，如回调地址，需使用encodeURIComponent()避免特殊字符导致的问题。举例说明了如何使用encodeURIComponent()处理带参数的URL链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 区别

1.1 `encodeURI()`

encodeURI()通常用于转码整个 URL，不会对URL 元字符以及语义字符进行转码，URL元字符：

URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）

语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

1.2 `encodeURIComponent()`

encodeURIComponent()通常只用于转码URL组成部分，如URL中?后的一串；会转码除了语义字符之外的所有字符，即元字符也会被转码
注：若整个链接被encodeURIComponent()转码，则该链接无法被浏览器访问，需要解码之后才可以正常访问。

2 使用场景

对于无特殊参数的链接，都可以使用encodeURI()进行转码，那什么特殊情况需要用到encodeURIComponent()呢？通常是链接带着一些特殊参数的时候，就比如以下链接：

https://www.baidu.com/s?returnURL=http://www.test.com/

链接内包含一个回调地址，回调地址是另外一个URL，此时我们就需要使用encodeURIComponent()对回调地址进行转码，这样一来，URL中就不会出现多个http://，多个&这样的特殊字符；方便对回调地址进行处理；以上链接处理如下：

// 对URL中的回调链接进行转码
'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')
//输出: "https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"