encodeURIComponent(),encodeURI()函数用法区别

本文详细解析了encodeURIComponent()与encodeURI()两种URL编码函数的区别与应用场景,包括它们如何处理特殊字符及在实际开发中的运用。

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

encodeURIComponent(),encodeURI()函数用法区别

背景
今天接触到url编码,把url中的等号=转义了,便查了下原因,了解到编码的一些知识,做了整理:
**
编码缘由**:网络标准RFC 1738做了硬性规定:
“只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*’(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。”,这意味着,如果URL中有汉字,就必须编码后使用。

1.encodeURIComponent()
重点内容
用法:把字符串作为 URI 组件进行编码。
encodeURIComponent()主要对参数进行编码

实例

<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.encodeURI()

用法:把字符串作为URI进行编码。

实例

<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/
,/?:@&=+$#

共同点:都不会对ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。

区别
1.encodeURI()方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#
。encodeURIComponent()方法会对这些字符进行转义,以十六进制替换。
2.encodeURI()方法用于整个的URI,而encodeURIComponent()常用于处理URI中的部分参数,比如浏览器地址有中文或者浏览器url参数操作的时候常用encodeURIComponent()。

### encodeURIComponentencodeURI区别 #### 基本概念 `encodeURI` 是一种用于对完整的 URI(Uniform Resource Identifier)进行编码的方法。它会保留那些在 URI 中具有特殊意义的字符,比如 `:`、`/`、`?` 等[^2]。 相比之下,`encodeURIComponent` 更加严格,专门用来对 URI 组件(如查询参数中的键或值)进行编码。这意味着它不仅会对非法字符进行转义,还会对 URI 特殊字符(如 `?`、`=`、`&` 等)进行编码[^3]。 --- #### 编码范围对比 | 字符 | 是否被 `encodeURI` 转义 | 是否被 `encodeURIComponent` 转义 | |------|-------------------------|-------------------------------| | A-Z, a-z, 0-9 | 否 | 否 | | ~ ! @ # $ & ( ) = : / ? ; , ' + | 否 | 是 | | 所有其他非 ASCII 字符 | 是 | 是 | 通过表格可以看出,`encodeURI` 对于某些特殊的 URI 符号不会进行编码,而这些符号会被 `encodeURIComponent` 处理[^4]。 --- #### 使用场景分析 1. **使用 `encodeURI`** 当需要对整个 URL 或者路径部分进行编码时,可以选择 `encodeURI`。这通常发生在 URL 已经是一个有效的地址结构的情况下,仅需对其内部可能存在的非法字符进行保护。 示例: ```javascript const url = "https://example.com/path?name=John Doe"; console.log(encodeURI(url)); // 输出: https://example.com/path?name=John%20Doe ``` 2. **使用 `encodeURIComponent`** 如果目标是对 URL 查询字符串中的单独组件(例如参数名或者参数值)进行编码,则应当采用 `encodeURIComponent` 来确保每个组成部分都符合标准并能安全地嵌入到最终形成的 URL 中。 示例: ```javascript const paramValue = "John Doe"; const encodedParam = encodeURIComponent(paramValue); console.log(encodedParam); // 输出: John%20Doe const fullUrl = `https://example.com/search?q=${encodedParam}`; console.log(fullUrl); // 输出: https://example.com/search?q=John%20Doe ``` --- ### 总结 为了保证 URL 完整性和数据准确性,在不同情境下合理选用这两种方法至关重要。对于整体 URI 需要维持原有语义时不改变其构成元素的意义可用 `encodeURI`; 若针对具体某一段落文字作为变量传参则推荐运用更为严格的 `encodeURIComponent` 函数来完成相应操作[^4]. ```javascript // Example of using both functions together const baseUrl = "http://www.example.com/resource?"; const key = "query"; const value = "special chars like @#$%^&*()"; let safeKey = encodeURIComponent(key); let safeValue = encodeURIComponent(value); console.log(`${baseUrl}${safeKey}=${safeValue}`); // Output: http://www.example.com/resource?query=special%20chars%20like%20%40%23%24%25%5E%26%2A%28%29 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值