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

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