无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(js url) 一文详解JavaScript中的URL编码和解码 全网首发(图文详解1)

前沿技术 Micheal 3周前 (06-25) 12次浏览 已收录 扫描二维码

(js url) 一文详解JavaScript中的URL编码和解码

JavaScript中的URL编码和解码是处理URL中特殊字符的一种机制。在URL中,一些字符具有特殊意义,比如“&”用来分隔查询字符串中的参数,“#”用来指示URL的锚点等。为了能够在URL中使用这些特殊字符而不引起混淆,我们需要对这些字符进行编码。

什么是URL编码?

URL编码,也称为百分比编码,是一种浏览器用来确保URL被正确解析和传输的机制。其工作原理是通过将URL中无法直接用于URL的字符转换成一种“%XY”的格式,其中“XY”表示字符的ASCII码的十六进制值。

URL编码的需要

  • URL中只能使用ASCII字符集。对于非ASCII字符(如中文字符),必须进行编码才能正确传递。
  • URL中有些字符具有特殊含义(如“?”, “&”, “#”等),如果要在URL的一部分中使用这些字符,也需进行编码。
  • 空格(” “)在URL中通常被编码为加号(”+”)或“%20”。

JavaScript中URL编码/解码的方法

编码方法:

  • encodeURIComponent:编码URL中的文本,它不会对URL中的分隔符(如冒号、斜杠、问号和井号)进行编码,适用于编码URL的组成部分,而不是整个URL。

    例子:

    var urlComponent = "这是 URL 参数/值";
    var encodedComponent = encodeURIComponent(urlComponent);
    console.log(encodedComponent);  // 输出:%E8%BF%99%E6%98%AF%20URL%20%E5%8F%82%E6%95%B0%2F%E5%80%BC
  • encodeURI:用于编码整个URL,它会忽略URL中本身就包含的特殊字符,比如“:”,“/”,“?”,“&”等。

    例子:

    var url = "http://example.com/关于 我们?search=测试&lang=zh";
    var encodedURI = encodeURI(url);
    console.log(encodedURI);  // 输出:http://example.com/%E5%85%B3%E4%BA%8E%20%E6%88%91%E4%BB%AC?search=%E6%B5%8B%E8%AF%95&lang=zh

解码方法:

  • decodeURIComponent:对使用encodeURIComponent方法编码的URI进行解码。

    例子:

    var decodedComponent = decodeURIComponent(encodedComponent);
    console.log(decodedComponent);  // 输出:这是 URL 参数/值
  • decodeURI:对使用encodeURI方法编码的整个URI进行解码。

    例子:

    var decodedURI = decodeURI(encodedURI);
    console.log(decodedURI);  // 输出:http://example.com/关于 我们?search=测试&lang=zh

应用实例

假设我们需要将一些参数添加到URL的查询字符串中,并且这些参数包含特殊字符或空格。

  • 编码参数
    var paramName = "关键字";
    var paramValue = "编程 & 开发";
    var encodedParamName = encodeURIComponent(paramName);
    var encodedParamValue = encodeURIComponent(paramValue);
  • 组合到URL中
    var baseUrl = "http://example.com/search?";
    var fullUrl = baseUrl + encodedParamName + "=" + encodedParamValue;
    console.log(fullUrl);
    // 输出:http://example.com/search?%E5%85%B3%E9%94%AE%E5%AD%97=%E7%BC%96%E7%A8%8B%20%26%20%E5%BC%80%E5%8F%91
  • 解码显示
    var displayUrl = decodeURI(fullUrl);
    console.log(displayUrl);
    // 此例中解码后的URL与未解码的URL相同,因为我们仅编码了URL的部分组件,而不是整个URL。

通过上述的编码和解码过程,我们可以确保URL中特殊字符的正确传递和显示,保障URL的有效性和安全性。
(initbinder注解详解) 深入解析@InitBinder注解的功能与应用 自定义WebDataBinder:@InitBinder使用指南 全网首发(图文详解1)
(运行vue项目) 一文教会你如何运行vue项目 启动一个Vue项目:环境准备创建配置和运行 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝