url特殊字符编码encodeURI VS encodeURIComponent分析

更新时间：2023年09月26日 11:55:23 作者：热饭班长

这篇文章主要介绍了url特殊字符编码encodeURI VS encodeURIComponent分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

encodeURI VS encodeURIComponent

用于给url中的特殊字符进行编码。

为什么要用？

因为网络标准RFC1738做了硬性规定，只有字符和数字以及一些规定内的特殊符号，才可以不经过编码用于url，换言之就是，如果你的url中包含了规定之外的符号，那它就是非法的url, 无法被服务器解析，也就无法访问到你想要的网络资源。

为了解决这个问题，js就提供了encodeURI和encodeURIComponent来给这些规定之外的符号进行编码，这样，服务器就能正常解析并访问了。

用法？

encodeURI

encodeURI()会编码除去ASCII码、数字和~!@#$&*()=:/,;?+.-_'之外的所有字符。

const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURI(url)
// http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png

encodeURIComponent

encodeURIComponent()会编码除去ASCII码、数字和~!*().-_'之外的所有字符。

const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURIComponent(url)
// http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png

两者之间的差异

encodeURIComponent会进行编码的字符范围比encodeURI大。

两者之间如何选用

由于两者之间唯一的差异就是可被编码的字符范围，所以需要根据实际需要编码的字符做抉择。

情况1：

const url = 'http://www.test.com/images/花朵.png'
console.log(encodeURI(url));
http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png
console.log(encodeURIComponent(url));
http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png

通过上面的示例我们发现，由于encodeURIComponent的编码范围很广，如果对整个URL调用，会导致URL中有特殊作用的符号被编码，变成一个非法的URL了，也就无法访问了。所以此种情况应该选用encodeURI。

情况2：

const name = 'AT&T';
console.log(encodeURI(name));
// AT&T
console.log(encodeURIComponent(name));
// AT%26T

由于encodeURI的编码范围较小，导致此处我们希望被编码的&并没有被编码。所以此种情况应该选用encodeURIComponent。

应用场景

场景1：

url参数中包含特殊字符

// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${name}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT

输出的结果缺少了一部分，这是因为&是一个标准的url参数分割符，所以会被解析为分割符。虽然如此，但本例中的&符号是属于名字的一部分，我们不想让它被解析为url的参数分隔符。这时我们就可以使用encodeURIComponent对name的值进行编码，这样&就不会被识别为参数分割符了

// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${encodeURIComponent(name)}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT&T

场景2：

将一个回调地址作为参数附加在另一个地址上

const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${redirectUrl}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success

我们获取redirectUrl参数时，会发现num参数丢失了，这是因为&被当成www.test.com的参数分隔符了，这里我们可以使用encodeURIComponent来对redirectUrl进行编码就能解决这个问题。

const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${encodeURIComponent(redirectUrl)}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success&num=10

疑问

现代浏览器会自动识别URL中的特殊字符并将其编码，那还需要我们手动调用encodeURI和encodeURIComponent吗？
答案是看情况，比如在参数中有中文的情况下，中文在URL中不会有歧义（中文在URL中不会有其它含义），所以浏览器会帮你完成编码，但是，在有些情况下，浏览器是不知道你是否需要编码的，我们拿前面的一个示例：

// 美国电话电报公司
const name = 'AT&T';

这里的&在URL中有两种含义，一是作为参数分割符，二是作为普通的字符，这时，浏览器无法猜测你的意图，也就不会帮你自动编码了，所以，还是需要你主动调用encodeURIComponent。

注意事项

他们对特殊字符的编码形式是utf-8

以上就是url特殊字符编码encodeURI VS encodeURIComponent分析的详细内容，更多关于url特殊字符编码的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js 获取、清空input type=
本篇文章主要是对js获取、清空input type="file"的值的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
JavaScript输入分钟、秒倒计时技巧总结（附代码）
这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现，通过css和js代码展示了逻辑过程，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
JavaScript字符串常用类使用方法汇总
今天的这篇文章就分享几年以来总结的一些最常见和最有用的字符串相关的方法的例子和简要说明。便于程序员用于快速参考。当然，最有经验的开发人员对这些操作很熟悉，但我认为这是一个很好的方法帮助初学者理解这些函数，他可以帮助你使用简单的语法,完成复杂的操作.
2015-04-04
JavaScript对象引用与赋值实例详解
这篇文章主要介绍了JavaScript对象引用与赋值,结合实例形式分析了JavaScript对象引用及赋值的操作技巧与相关注意事项,需要的朋友可以参考下
2017-03-03
Javascript中replace()小结
在javascript中，replace方法是属于String对象的，可用于替换字符串。今天我们就来详细探讨下一些replace()方法的使用
2015-09-09
原生js三级联动的简单实现代码
下面小编就为大家带来一篇原生js三级联动的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
js setTimeout实现延迟关闭弹出层
有时候我们希望弹出层能够实现延迟关闭，并且鼠标在弹出层区域移动的时候能够保持显现，下面是具体的实现代码。
2010-04-04
js中比较两个对象是否相同的方法示例
这篇文章主要介绍了js中比较两个对象是否相同的方法,结合实例形式详细分析了js对象遍历、判断等相关操作技巧,需要的朋友可以参考下
2019-09-09
javascript连续赋值问题
本文通过具体的示例来给大家详细解释了下javascript的连续赋值问题，十分的实用，有需要的小伙伴可以参考下。
2015-07-07
使用pdf-lib.js实现pdf添加自定义水印功能
pdf-lib是一个强大的JavaScript库,允许在任何JavaScript环境中创建和修改PDF文档,下面就跟随小编一起来学习一下如何使用pdf-lib实现pdf添加自定义水印功能吧
2024-11-11