了解空格的编码方式:%withencodeURI 与 +withURL

您可以使用encodeuri 或url 对查询字符串进行编码。最近,我注意到 url 对空格的编码不同。我将讨论为什么他们以不同的方式处理编码。在深入讨论该主题之前,我将向您展示如何使用每种方法进行编码。

用法

1. 编码uri

// 'https://www.google.com/search?q=programming%20language'encodeuri('https://www.google.com/search?q=programming language')

您可以使用encodeuri 函数对uri 进行编码。然而,。它不会对属于 uri 有效部分的部分字符进行编码,因此您可能需要使用encodeuricomponent 函数来正确编码查询字符串或 uri 中的其他组件。

例如,假设您有一个值为
的查询字符串 qhttps://www.google.com/search?q=& 是什么意思?.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'encodeuri('https://www.google.com/search?q=what is the meaning of &?')

了解空格的编码方式:%withencodeURI 与 +withURL

&(& 符号)未按应有的方式转换为 &。因为 &(& 符号) 可以是 uri 的有效部分。因此,对查询字符串使用encodeuricomponent 总是更安全。

const url = encodeuri('https://google.com/search');const querystring = `?q=${encodeuricomponent('what is the meaning of &?')}`;// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3f';url+querystring;

了解空格的编码方式:%withencodeURI 与 +withURL

由于encodeurix和相关函数将uri视为字符串,因此您必须处理特殊字符,例如?和你自己。或者,您可以使用 url 来简化流程。

2. 网址

使用 url 进行编码时,需要分别处理基本 url 和查询字符串。

了解空格的编码方式:%withencodeURI 与 +withURL

const url = 'https://www.google.com/search?q=programming language';// 'https://www.google.com/search?q=programming language'url.tostring();

如果使用 url 构造函数一次对所有内容进行编码,如上例所示,查询字符串可能无法正确编码。

const url = new url('https://www.google.com/search');url.searchparams.set('q', 'programming language');// 'https://www.google.com/search?q=programming+language'url.tostring();

了解空格的编码方式:%withencodeURI 与 +withURL

通过 url 对象的 searchparams 属性设置查询字符串,可以设置查询字符串。

在这种情况下,空格将转换为 。在解释为什么会发生这种情况之前,让我们用另一个查询字符串对其进行测试,看看它如何处理其他特殊字符。

const url = new url('https://www.google.com/search');url.searchparams.set('q', 'what is the meaning of &?');// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3f'url.tostring();

其他特殊字符按预期编码。

现在,让我们深入探讨为什么会出现这些差异。

编码

1. 编码uri

encodeurix 函数根据 rfc2396 进行编码。 uri 不仅仅是互联网上的一个位置;它可以引用任何类型的资源。这就是为什么它被称为 uri(统一资源标识符)而不是 url(统一资源定位符)。

2. 网址

url api 根据 rfc3986 进行编码,这是更新的 uri 规范。

如果您需要使用encodeuri来实现此行为,请参阅此。 – rf3986 的encodeuricomponent 编码)。

urlsearchparams 遵循百分比编码规则进行编码。根据文档,它用“ ”替换空格。

虽然我在 rfc 中找不到此行为的规范,但 mdn 的encodeuricomponent 文档指出:

对于 application/x-www-form-urlencoded,空格将被 替换,因此人们可能希望在encodeuricomponent() 替换之后额外用 替换 。

这解释了为什么 urlsearchparams 中的空格被替换为“ ”,因为它遵循 application/x-www-form-urlencoded 标准。

您可能已经注意到,url 和 urlsearchparams 遵循不同的 rfc。

让我们看一些例子。

url = new url('http://[2001:db8::1]:8080/resource?v=key:value');// 'http://[2001:db8::1]:8080/resource?v=key:value'url.tostring();

如图所示,url 不对括号和冒号进行编码,因为它们是 ipv6 地址的一部分。但是,即使冒号是查询字符串的一部分,它也不会被编码为 :。它与百分比编码表不同。

这意味着您需要分别对 url 和查询字符串进行编码。

url = new url('http://[2001:db8::1]:8080/resource');url.searchparams.set('v', 'key:value');// 'http://[2001:db8::1]:8080/resource?v=key%3avalue'url.tostring();

了解空格的编码方式:%withencodeURI 与 +withURL

现在,url 和查询字符串已正确编码。

结论

encodeuri、encodeuricomponent、url 和 urlsearchparams 函数各自有不同的用途,您应该根据您的具体需求使用它们。

encodeuri:根据 rfc2396 对 uri 进行编码。它不会对属于 uri 有效部分的字符进行编码。如果您需要根据 rfc3986 对 uri 进行编码,请参阅此 mdn 文档。

encodeuricomponent:根据 rfc2396 对 uri 的组件进行编码,例如路径、片段或查询字符串。它包含未由encodeuri 编码的字符。

url:根据 rfc3986 对 web url 进行编码。

urlsearchparams:根据 application/x-www-form-urlencoded 标准对参数进行编码。

如果需要将 (加号)替换为 ,可以手动执行,如下所示:

url.search = url.search.replace(/+/g, '%20');

在使用 web 开发、restful api 或 web url 时,url 是可靠的选择。此外,它遵循 rfc3986,它比 rfc2396 更新。

希望您觉得这有帮助。

编码快乐!

以上就是了解空格的编码方式:%withencodeURI 与 +withURL的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499025.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:57:46
下一篇 2025年12月19日 20:58:05

相关推荐

  • js怎么跳转到另一个页面

    在 javascript 中,实现页面跳转的主要方法有三种:1. 使用 window.location.href 直接跳转到指定 url;2. 使用 window.location.replace 替换当前历史记录进行跳转;3. 使用 window.open 打开新窗口或标签页进行跳转。每种方法都有…

    2025年12月20日
    000
  • 怎样用JavaScript实现数字格式化?

    用javascript实现数字格式化可以使用intl.numberformat对象。1. 基本的千位分隔:new intl.numberformat(‘en-us’).format(1234567)输出1,234,567。2. 百分比格式:new intl.numberfor…

    2025年12月20日
    000
  • 如何用JavaScript实现深拷贝?

    用javascript实现深拷贝可以通过递归和特殊处理来实现。1.基本实现使用递归遍历对象。2.处理循环引用使用map跟踪已复制对象。3.处理特殊类型如date、regexp、set、map等。4.性能优化可使用lodash的clonedeep。5.最佳实践是明确深拷贝的必要性。 用JavaScri…

    2025年12月20日
    000
  • JavaScript中如何实现函数的节流?

    如何在javascript中实现函数节流?通过设置定时器确保函数在指定时间间隔内只执行一次。1. 使用date.now()跟踪上次执行时间。2. 利用settimeout延迟执行,确保在时间间隔内只执行一次。 让我们聊聊JavaScript中的函数节流(throttling)。函数节流是一种优化技术…

    2025年12月20日
    000
  • js触摸事件怎么处理

    触摸事件在现代 web 开发中重要,因为它们捕捉用户在触摸屏上的操作,提升用户体验并提供更多互动方式。处理触摸事件的方法包括:1. 使用touchstart、touchmove、touchend和touchcancel事件,并添加监听器;2. 处理多点触摸,如计算两点距离实现缩放;3. 优化性能,使…

    2025年12月20日
    000
  • JavaScript中如何添加事件监听器?

    在javascript中,可以通过addeventlistener方法为元素添加事件监听器。1)基本用法:通过addeventlistener为元素添加事件监听器,如点击事件。2)多监听器支持:与onclick不同,addeventlistener可以为同一个事件添加多个监听器。3)事件委托:通过在…

    2025年12月20日
    000
  • 如何用JavaScript实现无限滚动(Infinite Scroll)?

    使用javascript实现无限滚动可以通过监听滚动事件并在接近页面底部时加载更多内容来实现。具体步骤包括:1. 监听滚动事件,判断是否接近页面底部;2. 使用fetchapi加载更多内容并添加到页面;3. 实现图片懒加载以优化性能;4. 使用节流技术防止频繁触发滚动事件;5. 考虑虚拟滚动以处理超…

    2025年12月20日
    000
  • 如何在JavaScript中处理异步操作?

    javascript中处理异步操作的主要方式有三种:1. 回调函数,易导致回调地狱;2. promise,提供更清晰的流程表达,但处理多个时可能冗长;3. async/await,基于promise的语法糖,代码更直观,但需注意性能问题。 处理JavaScript中的异步操作是每个开发者都会遇到的挑…

    2025年12月20日
    000
  • 怎样用JavaScript实现数据加密?

    使用javascript实现数据加密可以使用crypto-js库。1.安装并引入crypto-js库。2.使用aes算法进行加密和解密,确保使用相同的密钥。3.注意密钥的安全存储和传输,推荐使用cbc模式和环境变量存储密钥。4.在高性能需求时,考虑使用web workers。5.处理非ascii字符…

    2025年12月20日
    000
  • js怎么动态创建HTML元素

    在javascript中动态创建html元素是通过document.createelement()方法实现的。具体步骤包括:1. 创建元素,如const newdiv = document.createelement(‘div’);2. 设置元素属性,如newdiv.seta…

    2025年12月20日
    000
  • 怎样用JavaScript实现AJAX请求?

    我们需要ajax因为它能提升用户体验,通过异步获取数据而不刷新页面。1)使用xmlhttprequest实现ajax请求,2)使用fetch api简化代码并支持promise,3)实际应用中需考虑跨域请求、错误处理、数据格式和安全性,4)性能优化可通过缓存、批量请求和延迟加载实现。 在学习如何用J…

    2025年12月20日
    000
  • js如何优化DOM操作

    优化dom操作是因为它涉及到浏览器的重绘和重排,消耗性能。具体方法包括:1. 使用文档碎片减少操作次数;2. 批量更新样式;3. 缓存dom查询结果;4. 使用虚拟dom库减少直接操作;5. 避免频繁使用innerhtml,考虑textcontent或innertext;6. 使用requestan…

    2025年12月20日
    000
  • JavaScript中如何格式化日期?

    javascript中格式化日期的方法有三种:1. 使用date对象手动拼接日期字符串,简单但易出错;2. 使用intl.datetimeformat对象,灵活但旧浏览器可能不支持;3. 使用moment.js库,功能强大但增加依赖。 让我们聊聊JavaScript中如何格式化日期吧。这是一个常见的…

    2025年12月20日
    000
  • JavaScript中的Array.prototype.reduceRight怎么用?

    javascript中的array.prototype.reduceright方法从数组末尾开始遍历,用于逐步向左执行reducer函数。其用法包括:1.基本用法:如计算数组总和,从右到左累加。2.处理嵌套数组:如扁平化数组,从内到外处理。3.递归问题:如树形结构的总和计算,从右子树开始。使用时需注…

    2025年12月20日
    000
  • 如何用JavaScript生成二维码?

    使用javascript生成二维码可以使用qrcode.js库。1) 引入qrcode.js库并使用qrcode.todataurl方法生成二维码。2) 自定义二维码选项,如大小、颜色和容错级别。3) 为了提升性能,可以将生成任务放到web worker中。4) 注意文本或url的标准长度、设备兼容…

    2025年12月20日
    000
  • 如何用JavaScript验证URL格式?

    javascript验证url格式可以通过正则表达式或url对象实现。1) 使用正则表达式,如/^https?://…$/i,但需考虑性能和兼容性。2) 使用url对象,如new url(url),但需检查浏览器兼容性。两种方法各有优缺点,需根据具体需求选择。 用JavaScript验证…

    2025年12月20日
    000
  • 如何在JavaScript中检测数据类型?

    在javascript中,检测数据类型的最佳方法是使用object.prototype.tostring.call()。1. typeof操作符简单但对数组和null不准确。2. instanceof适用于对象和自定义类,但不能检测基本类型。3. object.prototype.tostring.…

    2025年12月20日
    000
  • 如何用JavaScript实现RESTAPI?

    使用javascript实现rest api可以通过node.js和express框架来完成。1)安装node.js和npm,2)通过npm安装express,3)创建一个express应用并定义crud操作的路由,4)启动服务器。通过这些步骤,你可以搭建一个基本的rest api服务。 用Java…

    2025年12月20日
    000
  • 怎样在JavaScript中实现数组排序?

    在javascript中,数组排序可以通过以下方式实现:1. 使用sort()方法默认排序,适用于字符串,但对数字可能不准确。2. 提供比较函数(a, b) => a – b进行数字排序,正确处理小数和负数。3. 反向排序使用(b – a)。4. 根据对象属性排序,如(…

    2025年12月20日
    000
  • 如何在JavaScript中实现全屏功能?

    在javascript中实现全屏功能需要处理不同浏览器的兼容性。1. 使用requestfullscreen及其前缀版本(如mozrequestfullscreen、webkitrequestfullscreen、msrequestfullscreen)来进入全屏模式。2. 使用exitfullsc…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信