🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

问题描述

在JavaScript开发过程中，开发者经常会遇到 URIError: URI malformed 的错误提示。该错误通常表示在代码中尝试创建或操作一个不符合URI规范的字符串，导致解析失败。

原因分析

1. 特殊字符未正确编码：URL中包含了不允许的特殊字符（如空格、#、&等），但未进行适当的编码。例如，当URL中包含字符 % 时，浏览器在解码时会报错，因为 % 是一个特殊字符，代表十六进制表示的字符。

2. 使用不正确的编码函数：使用了不适当的编码函数。例如，escape 函数在某些情况下会错误地编码字符，导致后续解码失败。相比之下，encodeURIComponent 是更安全的编码函数，推荐在处理URL参数时使用。

3. 字符串格式错误：URL字符串格式不正确，例如缺少协议头（如 http:// 或 https://），或者路径部分包含非法字符。

4. 拼接错误：在拼接URL时，未正确拼接各个部分，导致生成的字符串不符合URI规范。

解决方案

1. 使用 encodeURIComponent 进行编码

在处理URL参数时，使用 encodeURIComponent 函数对特殊字符进行编码。例如：

let param = "中文";
let encodedParam = encodeURIComponent(param);
let url = `https://example.com/?search=${encodedParam}`;

2. 确保URL格式正确

在创建URL时，确保其符合标准格式，包括协议头、路径部分等。例如：

let url = new URL('https://example.com/search');
url.searchParams.append('q', '中文');

3. 检查字符串拼接

在拼接URL时，确保每个部分都正确拼接，避免生成无效的URI字符串。例如：

let baseURL = 'https://example.com/search?q=';
let searchParam = '中文';
let fullURL = baseURL + encodeURIComponent(searchParam);

4. 使用 decodeURIComponent 进行解码

在接收URL参数时，使用 decodeURIComponent 函数进行解码。例如：

let decodedParam = decodeURIComponent(fullURL.split('?')[1]);

实战案例

假设有一个搜索功能的实现，需要将用户输入的关键词拼接到URL中：

function search(keyword) {let baseURL = 'https://example.com/search?q=';let encodedKeyword = encodeURIComponent(keyword);let url = baseURL + encodedKeyword;window.location.href = url;
}search('中文'); // 正确拼接并编码URL

总结

URIError: URI malformed 错误通常是由于URL中包含特殊字符但未正确编码、使用不正确的编码函数、字符串格式错误或拼接错误等原因引起的。通过以下方法可以有效避免该问题：

1. 使用 encodeURIComponent 进行编码：在处理URL参数时，使用 encodeURIComponent 对特殊字符进行编码。
2. 确保URL格式正确：在创建URL时，确保其符合标准格式，包括协议头、路径部分等。
3. 检查字符串拼接：在拼接URL时，确保每个部分都正确拼接，避免生成无效的URI字符串。
4. 使用 decodeURIComponent 进行解码：在接收URL参数时，使用 decodeURIComponent 进行解码。

通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有引用都正确无误。