如何使用 JavaScript 进行 URL 编码和解码？

推荐答案

JavaScript 提供了 encodeURIComponent() 和 decodeURIComponent() 函数用于 URL 编码和解码。

编码:

const originalString = "This is a string with spaces and special characters like &?/";
const encodedString = encodeURIComponent(originalString);
console.log(encodedString);
// 输出: This%20is%20a%20string%20with%20spaces%20and%20special%20characters%20like%20%26%3F%2F

解码:

const encodedString = "This%20is%20a%20string%20with%20spaces%20and%20special%20characters%20like%20%26%3F%2F";
const decodedString = decodeURIComponent(encodedString);
console.log(decodedString);
// 输出: This is a string with spaces and special characters like &?/

本题详细解读

为什么需要 URL 编码？

URL 编码是为了将 URL 中不安全的字符转换为安全字符，以便在互联网上传输。这些不安全字符通常包括：

• 保留字符： 如 ;, /, ?, :, @, &, =, +, $, ,, % （这些字符在 URL 中有特殊含义）。
• 非 ASCII 字符： 如中文、日文等。
• 空格： URL 中空格应被编码为 %20。

如果 URL 中包含这些不安全字符，可能会导致服务器解析错误或数据丢失。

encodeURIComponent() 和 encodeURI() 的区别

JavaScript 提供了两个编码函数：encodeURIComponent() 和 encodeURI()。它们的区别在于编码范围：

• encodeURIComponent(): 编码所有 URI 组件（包括保留字符，如 ;, /, ?, : 等）。用于编码 URI 的单个组件，如查询参数值、路径段等。
• encodeURI(): 编码 URI 的某些保留字符，但不会编码 ;, /, ?, :, @, &, =, +, $, , （这些字符在整个 URI 中仍然有特殊含义）。用于编码整个 URI。

通常情况下，应该使用 encodeURIComponent() 来编码单个 URI 组件， 例如查询字符串中的参数值。

// www.javascriptcn.com code example
// 例如
const params = {
  name: '前端面试题',
  keyword: 'JavaScript & URL'
};

const encodedName = encodeURIComponent(params.name); // 输出: %E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98
const encodedKeyword = encodeURIComponent(params.keyword); // 输出: JavaScript%20%26%20URL

const url = `https://example.com/search?name=${encodedName}&keyword=${encodedKeyword}`;
console.log(url); //输出: https://example.com/search?name=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98&keyword=JavaScript%20%26%20URL

// 使用 encodeURI()，它不会编码 & 和 空格，通常不适合编码查询参数的值
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // 输出: https://example.com/search?name=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98&keyword=JavaScript & URL

decodeURIComponent() 和 decodeURI() 的区别

与编码函数类似，解码函数也有 decodeURIComponent() 和 decodeURI()：

• decodeURIComponent(): 解码 encodeURIComponent() 编码的字符串。
• decodeURI(): 解码 encodeURI() 编码的字符串。

同样，通常应使用 decodeURIComponent() 来解码 URI 组件。

总结

• encodeURIComponent() 用于编码 URL 组件 (推荐)。
• decodeURIComponent() 用于解码 URL 组件 (推荐)。
• encodeURI() 用于编码整个 URL，但一般不用于查询字符串的参数值。
• decodeURI() 用于解码整个 URL，很少用到。

在实际开发中，优先选择使用 encodeURIComponent() 和 decodeURIComponent() 来处理 URL 编码和解码。