详解JavaScript中encodeURIComponent和decodeURIComponent的使用（附实战场景）

​

一、核心概念：为什么需要URL编码/解码？

URL 的规范中，只允许包含 ASCII 字符集中的部分字符（如字母、数字、部分符号），而中文、空格、特殊符号（&、?、# 等）不属于这个范围。如果直接将这些字符拼接到 URL 中，浏览器会自动对其进行编码，但这种自动编码可能不完整，导致服务器无法正确解析参数。

例如，直接拼接中文参数 https://xxx.com?name=张三，浏览器可能会将其转为https://xxx.com?name=%E5%BC%A0%E4%B8%89（这就是 URL 编码后的格式，%XX 代表字符的 ASCII 码十六进制表示），但如果参数中包含 &、= 等符号，会直接破坏 URL 的参数结构，导致解析错误。

而 encodeURIComponent 和 decodeURIComponent 正是为了解决这个问题而生：前者负责将特殊字符编码为 URL 安全格式，后者负责将编码后的内容还原为原始字符串，二者成对使用，确保 URL 传参的正确性。

二、基础用法：encodeURIComponent 和 decodeURIComponent 怎么用？

两个函数都是 JavaScript 内置函数，无需引入任何依赖，直接调用即可，语法非常简单。

1. encodeURIComponent：编码（传参时用）

语法：encodeURIComponent(str)

参数：str 是需要编码的字符串（可以包含中文、空格、特殊符号等）。

返回值：编码后的字符串，所有非 ASCII 字符和特殊符号都会被转为 %XX 格式。

示例（最常用场景：编码中文和特殊字符）：

// 原始字符串（包含中文、空格、特殊符号） 
const originalStr = "你好 JavaScript! name=张三&age=18"; // 编码 
const encodedStr = encodeURIComponent(originalStr);
console.log(encodedStr); 
// 输出结果：%E4%BD%A0%E5%A5%BD%20JavaScript!%20name%3D%E5%BC%A0%E4%B8%89%26age%3D18

说明：编码后，中文"你好"转为 %E4%BD%A0%E5%A5%BD，空格转为 %20，& 转为 %26，= 转为 %3D，所有特殊字符都变成了 URL 安全的格式。

2. decodeURIComponent：解码（取参时用）

语法：decodeURIComponent(str)

参数：str 是编码后的字符串（%XX 格式）。

返回值：解码后的原始字符串，将 %XX 格式还原为对应的字符。

示例（对应上面的编码，还原原始内容）：

// 编码后的字符串 
const encodedStr = "%E4%BD%A0%E5%A5%BD%20JavaScript!%20name%3D%E5%BC%A0%E4%B8%89%26age%3D18"; 
// 解码 
const decodedStr = decodeURIComponent(encodedStr); 
console.log(decodedStr); 
// 输出结果：你好 JavaScript! name=张三&age=18

关键提醒：编码和解码必须成对使用，用 encodeURIComponent 编码的字符串，只能用 decodeURIComponent 解码，不能混用其他解码函数（如 decodeURI），否则会导致解码失败或乱码。

三、实战场景：开发中必用的3个场景

理论用法很简单，重点是掌握在实际开发中如何正确应用，以下3个场景是前端开发中最常见的，建议直接套用。

场景1：拼接带中文/特殊字符的URL参数（最高频）

错误写法：直接拼接中文或特殊字符，导致URL解析失败。

// 错误示例：参数中包含 &，直接拼接会破坏URL结构 
const keyword = "电脑&配件"; 
const url = "https://www.baidu.com/s?wd=" + keyword; 
// 最终URL：https://www.baidu.com/s?wd=电脑&配件 
// 服务器会把 & 当成参数分隔符，解析为 wd=电脑 和 配件（无参数名），导致查询失败

正确写法：用 encodeURIComponent 编码参数值，再拼接URL。

// 正确示例：编码参数值 
const keyword = "电脑&配件"; 
const encodedKeyword = encodeURIComponent(keyword); 
const url = "https://www.baidu.com/s?wd=" + encodedKeyword; 
// 最终URL：https://www.baidu.com/s?wd=%E7%94%B5%E8%84%E5%99%A8%26%E9%85%8D%E4%BB%B6 
// 服务器解析时，会正确识别参数 wd 的值为"电脑&配件"

场景2：获取URL中的参数并解码

浏览器地址栏中的参数的是编码后的格式，当我们通过 JavaScript 获取 URL 参数时，需要用 decodeURIComponent 解码，才能得到原始内容。

示例（获取URL中的name参数）：

// 假设当前浏览器地址栏URL：http://localhost:8080/index.html?name=%E5%BC%A0%E4%B8%89&age=20 // 1. 获取URL中的参数部分（问号后面的内容） 
const searchParams = window.location.search.slice(1); 
// 得到 "name=%E5%BC%A0%E4%B8%89&age=20" 
// 2. 分割参数（按 & 分割） 
const paramsArr = searchParams.split("&"); // 得到 ["name=%E5%BC%A0%E4%B8%89", "age=20"] 
// 3. 解析name参数并解码 
const nameParam = paramsArr.find(item => item.startsWith("name=")).split("=")[1]; 
const name = decodeURIComponent(nameParam); 
console.log(name); // 输出：张三

补充：如果项目中使用了 Vue、React 等框架，可以使用框架自带的路由工具（如 Vue Router、React Router）获取参数，但其底层依然是通过 decodeURIComponent 解码的。

场景3：处理AJAX请求中的参数编码

当我们用 AJAX（如 fetch、axios）发送请求时，如果请求参数包含中文或特殊字符，需要手动编码，否则可能导致请求失败或参数解析错误。

示例（axios 请求编码参数）：

import axios from 'axios'; 
// 原始参数（包含中文） 
const params = { username: "张三", hobby: "编程&游戏" }; 
// 编码参数（遍历对象，对每个参数值进行编码） 
const encodedParams = {}; 
for (const key in params) { 
    encodedParams[key] = encodeURIComponent(params[key]); 
} 
// 发送请求 
axios.get("https://api.xxx.com/user", { params: encodedParams }) .then(res => console.log(res.data)) .catch(err => console.log(err));

说明：axios 等库不会自动对参数进行完整编码，因此需要手动用 encodeURIComponent 处理每个参数值，确保请求参数正确传递。

四、高频误区：encodeURIComponent vs encodeURI（别用混！）

很多开发者会把 encodeURIComponent 和 encodeURI 弄混，导致出现编码错误。二者的核心区别在于：编码的范围不同，适用场景也不同。

1. 核心区别对比

函数	编码范围	适用场景	示例
encodeURIComponent	编码所有特殊字符（/、?、&、=、# 等全部转义）	编码 URL 的 参数值（最常用）	encodeURIComponent("a?b=c") → %61%3F%62%3D%63
encodeURI	不编码 URL 结构字符（/、?、&、=、# 等保留）	编码 完整的 URL（极少用）	encodeURI("a?b=c") → a?b=c

2. 直观示例（一看就懂）

const str = "/user?name=张三&age=18"; 
// encodeURIComponent：编码所有特殊字符，包括 /、?、&、= 
console.log(encodeURIComponent(str)); 
// 输出：%2Fuser%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D18 
// encodeURI：只编码中文，保留 /、?、&、= 等结构字符 
console.log(encodeURI(str)); 
// 输出：/user?name=%E5%BC%A0%E4%B8%89&age=18

3. 总结口诀

记住一句话，避免用混：传参编码用 encodeURIComponent，完整URL编码用 encodeURI。实际开发中，90% 的场景都是处理参数值，因此 encodeURIComponent 用得更多。

五、注意事项（避坑关键）

• 成对使用，不可混用：用 encodeURIComponent 编码的字符串，必须用 decodeURIComponent 解码；用 encodeURI 编码的，必须用 decodeURI 解码。混用会导致乱码或解码失败（例如用 decodeURI 解码 encodeURIComponent 编码的内容）。
• 避免编码空值：如果参数值是 null 或 undefined，encodeURIComponent 会将其转为字符串 "null" 或 "undefined"，导致服务器解析错误。建议先判断参数是否有效，再进行编码。
• 不要编码完整URL路径 ：encodeURIComponent 会编码 / 符号，如果编码完整的 URL 路径（如 "xxx.com/user"），会导致 URL 失效。如果需要编码完整 URL，用 encodeURI。
• 异常处理：解码非法的 %XX 格式字符串（如 "%XX" 不完整、不符合 ASCII 编码规则），会抛出错误。建议在解码时添加 try/catch 捕获异常，避免页面报错。

异常处理示例：

try { 
    // 非法编码（%XX 不完整） 
    const result = decodeURIComponent("%E4%BD%A0%E5%A5"); 
    console.log(result); 
} catch (e) {
     console.log("解码失败：", e.message); // 输出：解码失败：URI malformed 
}

六、总结

encodeURIComponent 和 decodeURIComponent 是前端 URL 传参的"必备工具"，核心作用是处理中文和特殊字符，避免 URL 解析错误。

核心要点回顾：

1. encodeURIComponent：编码参数值，转义所有特殊字符，适用于 URL 传参时。
2. decodeURIComponent：解码参数值，还原原始字符串，适用于获取 URL 参数时。
3. 区分 encodeURIComponent 和 encodeURI：前者编码参数，后者编码完整 URL。
4. 开发中记住：传参编码，取参解码，成对使用，避免混用。

掌握这两个函数的用法，能帮你解决大部分 URL 传参的乱码、解析失败问题，提升开发效率。如果觉得本文对你有帮助，欢迎点赞、收藏，关注我获取更多前端实用技巧～

​