JS关于URL的编码或解码方法

在前端开发中，我们经常会使用URL进行网络传输或者浏览器的地址栏展示。而URL中的某些字符，如空格、&符号或中文等，需要进行编码或解码才能通过网络或浏览器正常访问。本文将介绍JS中关于URL编码或解码的两个方法。

编码（encodeURIComponent）

encodeURIComponent 可以将字符串中的某些字符进行编码。它不会破坏URL语义，而是将URL中不符合规范的字符转义成可以被URL正确识别的形式，比如%20代替空格。

下面是一个例子：

let str = 'Hello, 你好！';
let encodedStr = encodeURIComponent(str);
console.log(encodedStr);

输出结果为：Hello%2C%20%E4%BD%A0%E5%A5%BD%EF%BC%81

解码（decodeURIComponent）

decodeURIComponent可以将经过编码的字符串进行还原。下面是一个例子：

let encodedStr = 'Hello%2C%20%E4%BD%A0%E5%A5%BD%EF%BC%81';
let decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr);

输出结果为：Hello, 你好！

应用示例

假设我们有一个包含搜索关键词的URL，我们需要将关键词传递给后端进行搜索。但是由于搜索关键词中可能包含一些中文或特殊符号，需要使用前面讲到的编码方法。

let keyword = '前端技术';
let encodedKeyword = encodeURIComponent(keyword);
let searchUrl = `http://example.com/search?keyword=${encodedKeyword}`;

这样，我们就可以在URL中正确传递搜索关键词了。

相应地，后端需要对传递过来的搜索关键字进行解码：

let encodedKeyword = req.query.keyword;
let keyword = decodeURIComponent(encodedKeyword);

这样，后端也可以正确解析搜索关键词。

总结

在前端开发中，编码和解码是非常常见的操作。通过encodeURIComponent和decodeURIComponent方法，我们可以轻松地进行URL的编码和解码，使得我们可以准确地传递和解析URL参数，让我们的网站更加稳健和高效。