encodeURIComponent() 函数详解

encodeURIComponent() 是 js 中用于编码 URI 组件的重要函数，它能将字符串中的特殊字符转换为十六进制转义序列，确保在 URL 中安全传输。

基本功能

对字符串中所有非字母数字字符进行编码

遵循 UTF-8 编码标准

主要用于处理 URL 参数的值部分

编码规则

• 字母数字字符：a-z、A-Z、0-9 不编码
• 特殊保留字符：-、_、.、!、~、*、'、(、) 不编码
• 其他所有字符：使用 UTF-8 编码，然后以 %XX 形式表示

常见使用场景

// 构建查询参数-------------------------------
const baseUrl = 'https://api.example.com/search';
const query = 'JavaScript & Web API';
const encodedQuery = encodeURIComponent(query);const url = `${baseUrl}?q=${encodedQuery}`;
// 结果: https://api.example.com/search?q=JavaScript%20%26%20Web%20API// 处理复杂参数--------------------------------
const user = {name: '张三',age: 30,city: 'New York'
};const params = new URLSearchParams({user: JSON.stringify(user),token: 'abc@123'
}).toString();const url = `https://api.example.com/data?${params}`;
// 结果: https://api.example.com/data?user=%7B%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%2C%22age%22%3A30%2C%22city%22%3A%22New%20York%22%7D&token=abc%40123

与 encodeURI() 的区别

特性	encodeURIComponent()	encodeURI()
用途	编码参数值	编码整个 URI
保留字符	几乎编码所有特殊字符	保留 :/?#[]@!$&'()*+,;=
空格处理	转换为 %20	转换为 %20

解码方法

使用 decodeURIComponent() 解码

const encoded = 'Hello%20World%21%20%E4%BD%A0%E5%A5%BD';
const decoded = decodeURIComponent(encoded);
// 结果: Hello World! 你好