Javascript中的encodeURIComponent和decodeURIComponent方法

在JavaScript中，使用encodeURIComponent()和decodeURIComponent()方法对URL进行编码和解码。

encodeURIComponent方法

encodeURIComponent()方法用于对URL中的字符进行编码。它接受一个字符串作为参数，返回一个编码后的字符串。

const url = 'https://www.example.com/search?q=' + encodeURIComponent('JavaScript tutorial');
console.log(url); // 输出：https://www.example.com/search?q=JavaScript%20tutorial

在上面的示例代码中，encodeURIComponent()方法将字符串'JavaScript tutorial'编码为'JavaScript'%20'tutorial'，其中%20表示空格。

在编码URL参数时，encodeURIComponent()方法比encodeURI()方法更安全。因为encodeURIComponent()方法将全部非字母数字字符进行编码，而encodeURI()方法不会对特殊字符进行编码。

decodeURIComponent方法

decodeURIComponent()方法用于对编码后的URL进行解码。它接受一个编码后的字符串作为参数，返回一个解码后的字符串。

const url = 'https://www.example.com/search?q=JavaScript%20tutorial';
const query = decodeURIComponent(url.split('=')[1]);
console.log(query); // 输出：JavaScript tutorial

在上面的示例代码中，我们首先从URL中获取查询参数，然后使用decodeURIComponent()方法将其解码为原始的字符串'JavaScript tutorial'。

Reverse EncodeURIComponent

我们还可以对编码后的字符串进行反向解码，获得原始的字符串。

const encodedString = encodeURIComponent('JavaScript tutorial');
const decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // 输出：JavaScript tutorial

在上面的示例代码中，我们使用encodeURIComponent()方法将字符串'JavaScript tutorial'进行编码，然后使用decodeURIComponent()方法对编码后的字符串进行解码，最终得到原始的字符串。

总之，使用encodeURIComponent()和decodeURIComponent()方法能够非常方便地对URL进行编码和解码，让我们的Web应用程序更加安全和可靠。