js的 encodeURI() encodeURIComponent() decodeURI() decodeURIComponent() 笔记250205

06-02 1837阅读

js的 encodeURI() encodeURIComponent() decodeURI() decodeURIComponent()

在JavaScript中，处理URI编码和解码的四个关键函数为：encodeURI()、encodeURIComponent()、decodeURI()和decodeURIComponent()。它们分别用于不同的场景，具体区别和用法如下：

1. encodeURI()

作用：编码完整的URI，保留保留字符（如:/?#@等），仅对非保留字符进行编码。

适用场景：编码整个URL，确保URI结构不被破坏。

示例：

const url = "http://example.com/path?name=张三&age=20";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// 输出: "http://example.com/path?name=%E5%BC%A0%E4%B8%89&age=20"

保留字符：://?&等未被编码。

编码字符：中文张三被编码为%E5%BC%A0%E4%B8%89。

2. encodeURIComponent()

作用：编码URI的组成部分（如查询参数），对所有非标准字符（包括保留字符）进行编码。

适用场景：编码URI的某部分（如参数值），防止特殊字符破坏URI结构。

示例：

const param = "name=张三&city=北京";
const encodedParam = encodeURIComponent(param);
console.log(encodedParam);
// 输出: "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC"

编码保留字符：=被编码为%3D，&被编码为%26。

结果用途：适合作为查询参数的值。

3. decodeURI()

作用：解码由encodeURI()编码的URI，仅还原非保留字符的编码，保留保留字符的编码。

示例：

const encodedUrl = "http://example.com/path%20to%25file?q=%25test";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);
// 输出: "http://example.com/path to%file?q=%25test"

解码字符：%20解码为空格，%25保留为%。

保留编码：?未被解码，保持原样。

4. decodeURIComponent()

作用：解码由encodeURIComponent()编码的字符串，还原所有字符的编码（包括保留字符）。

示例：

const encodedParam = "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC";
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam);
// 输出: "name=张三&city=北京"

解码保留字符：%3D解码为=，%26解码为&。

核心对比表

函数	编码/解码范围	典型应用场景	示例输入 → 输出
encodeURI()	保留保留字符，编码非保留字符	编码完整URL	http://ex.com/path?name=张三 → 保留?
encodeURIComponent()	编码所有非标准字符（包括保留符）	编码URL组件（如参数值）	name=张三&age=20 → name%3D...
decodeURI()	仅解码非保留字符的编码	解码完整URL	%20 → 空格，%25 → %
decodeURIComponent()	解码所有字符的编码	解码URL组件（如参数值）	%3D → =，%26 → &

使用注意事项

配对使用：

encodeURI() ↔ decodeURI()
encodeURIComponent() ↔ decodeURIComponent()
混用会导致错误：例如，用decodeURI()解码encodeURIComponent()的结果，可能保留%3D等编码。

错误处理：

try {
  decodeURIComponent("%zz"); // 无效编码，抛出URIError
} catch (e) {
  console.error("解码失败:", e);
}

实际应用：

构造带参数的URL：

const baseURL = "http://example.com/search";
const query = encodeURIComponent("q=测试&page=1");
const finalURL = `${baseURL}?${query}`; // "http://example.com/search?q%3D%E6%B5%8B%E8%AF%95%26page%3D1"

总结

编码选择：

对整个URL使用encodeURI()，保留结构。
对参数、哈希值等使用encodeURIComponent()，确保特殊字符不破坏URI。

解码选择：

用decodeURI()还原完整URL。

用decodeURIComponent()还原参数值等部分。

正确使用这些函数，可以避免URI解析错误，确保数据在传输过程中的完整性。

在JavaScript中，encodeURI(), encodeURIComponent(), decodeURI(), 和 decodeURIComponent() 是用于处理URI（统一资源标识符）编码和解码的函数。它们的主要作用是确保URI中的字符能够被正确地传输和解析，特别是在通过浏览器地址栏或Ajax请求发送数据时尤为重要。

encodeURI()
- 用途：将一个字符串作为完整的URI进行编码。
- 它不会对以下字符进行编码：字母、数字、以及这些符号 - _ . ! ~ * ' ( )
- 此外，它也不会对保留字符进行编码，保留字符包括：; , / ? : @ & = + $ #
- 示例：
```
console.log(encodeURI("https://example.com/test?name=John Doe"));
// 输出: "https://example.com/test?name=John%20Doe"
```
- encodeURIComponent()
  - 用途：将一个字符串作为URI组件进行编码。
  - 与encodeURI()不同的是，encodeURIComponent()会对更多的字符进行编码，包括保留字符如; , / ? : @ & = + $ #等。
  - 这使得它更适合用于编码URL中的查询参数值。
  - 示例：
```
console.log(encodeURIComponent("John Doe"));
// 输出: "John%20Doe"
console.log(encodeURIComponent("?name=John Doe"));
// 输出: "%3Fname%3DJohn%20Doe"
```
  - decodeURI()
    - 用途：对使用encodeURI()编码的字符串进行解码。
    - 示例：
```
console.log(decodeURI("https://example.com/test?name=John%20Doe"));
// 输出: "https://example.com/test?name=John Doe"
```
    - decodeURIComponent()
      - 用途：对使用encodeURIComponent()编码的字符串进行解码。
      - 示例：
        console.log(decodeURIComponent("John%20Doe")); // 输出: "John Doe" console.log(decodeURIComponent("%3Fname%3DJohn%20Doe")); // 输出: "?name=John Doe"

选择使用哪一个函数取决于你的具体需求。如果你需要对整个URL进行编码或解码，应该使用encodeURI()和decodeURI()。而当你只需要对URL的一部分（比如查询参数）进行编码或解码时，则应使用encodeURIComponent()和decodeURIComponent()。

在JavaScript中，处理URL时经常会遇到需要对URL的某些部分进行编码和解码的情况。JavaScript提供了四个内置函数来处理这些需求：encodeURI(), encodeURIComponent(), decodeURI(), 和 decodeURIComponent()。以下是这些函数的详细解释和用法：

1. encodeURI()

encodeURI() 函数用于对完整的URI（统一资源标识符）进行编码。它不会对URI中的特殊字符（如冒号:、斜杠/、问号?、井号#等）进行编码，因为这些字符在URI中有特定的含义。

用法示例：

let uri = "https://example.com/path?name=John Doe&age=30";
let encodedUri = encodeURI(uri);
console.log(encodedUri); // 输出: "https://example.com/path?name=John Doe&age=30"

在这个例子中，由于URI中的字符都不需要编码，所以输出和输入相同。

2. encodeURIComponent()

encodeURIComponent() 函数用于对URI的组件进行编码，通常用于编码URI中的查询字符串参数。这个函数会对大多数非字母数字字符进行编码。

用法示例：

let componentName = "John Doe";
let encodedComponentName = encodeURIComponent(componentName);
console.log(encodedComponentName); // 输出: "John%20Doe"

在这个例子中，空格被编码为%20。

3. decodeURI()

decodeURI() 函数用于对使用encodeURI()编码的完整URI进行解码。

用法示例：

let encodedUri = "https%3A%2F%2Fexample.com%2Fpath%3Fname%3DJohn%20Doe%26age%3D30";
let decodedUri = decodeURI(encodedUri);
console.log(decodedUri); // 输出: "https://example.com/path?name=John Doe&age=30"

注意，这个例子中，我们假设有一个错误的URI编码（实际上这样的编码通常不会由encodeURI()产生，这里只是为了演示），decodeURI()会将其解码回原始形式。

4. decodeURIComponent()

decodeURIComponent() 函数用于对使用encodeURIComponent()编码的URI组件进行解码。

用法示例：

let encodedComponentName = "John%20Doe";
let decodedComponentName = decodeURIComponent(encodedComponentName);
console.log(decodedComponentName); // 输出: "John Doe"

在这个例子中，%20被解码回空格。

总结

encodeURI() 和 decodeURI() 用于完整的URI。
encodeURIComponent() 和 decodeURIComponent() 用于URI的组件，特别是查询字符串参数。

使用这些函数可以确保URL在传输过程中不会因为特殊字符而出现问题，同时保证URL的可读性和功能性。

在 JavaScript 中，encodeURI()、encodeURIComponent()、decodeURI() 和 decodeURIComponent() 是用于处理 URI（统一资源标识符）编码和解码的四个重要函数，下面将分别详细介绍它们的功能和使用场景。

1. encodeURI()

功能：encodeURI() 函数用于对整个 URI 进行编码。它会将 URI 中具有特殊含义的字符（如 ;、,、/、?、:、@、&、=、+、$ 等）保持不变，只对那些非标准的字符（如中文、特殊符号等）进行编码。

语法：

encodeURI(uri);

参数：uri 是要编码的完整 URI 字符串。

示例：

const uri = "https://example.com/path with spaces/index.html?param=值";
const encodedUri = encodeURI(uri);
console.log(encodedUri); 
// 输出: https://example.com/path%20with%20spaces/index.html?param=%E5%80%BC

2. encodeURIComponent()

功能：encodeURIComponent() 函数用于对 URI 组件（如查询参数的值、路径段等）进行编码。它会将除了字母、数字、-、_、.、!、~、*、'、(、) 之外的所有字符都进行编码。

语法：

encodeURIComponent(uriComponent);

参数：uriComponent 是要编码的 URI 组件字符串。

示例：

const component = "value with spaces & special characters";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent); 
// 输出: value%20with%20spaces%20%26%20special%20characters

3. decodeURI()

功能：decodeURI() 函数用于对使用 encodeURI() 编码后的 URI 进行解码，将编码后的字符还原为原始字符。

语法：

decodeURI(encodedURI);

参数：encodedURI 是要解码的经过 encodeURI() 编码的 URI 字符串。

示例：

const encodedUri = "https://example.com/path%20with%20spaces/index.html?param=%E5%80%BC";
const decodedUri = decodeURI(encodedUri);
console.log(decodedUri); 
// 输出: https://example.com/path with spaces/index.html?param=值

4. decodeURIComponent()

功能：decodeURIComponent() 函数用于对使用 encodeURIComponent() 编码后的 URI 组件进行解码，将编码后的字符还原为原始字符。

语法：

decodeURIComponent(encodedURIComponent);

参数：encodedURIComponent 是要解码的经过 encodeURIComponent() 编码的 URI 组件字符串。

示例：

const encodedComponent = "value%20with%20spaces%20%26%20special%20characters";
const decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent); 
// 输出: value with spaces & special characters

使用场景总结

encodeURI() 和 decodeURI()：当你需要对整个 URI 进行编码或解码时，使用这两个函数。例如，在构建一个完整的 URL 时，如果 URL 中包含非标准字符，可以使用 encodeURI() 进行编码。

encodeURIComponent() 和 decodeURIComponent()：当你需要对 URI 中的某个组件（如查询参数的值）进行编码或解码时，使用这两个函数。例如，在处理表单数据时，将用户输入的值作为查询参数添加到 URL 中，需要使用 encodeURIComponent() 对值进行编码。

计划

解释 encodeURI() 和 encodeURIComponent() 的区别。
解释 decodeURI() 和 decodeURIComponent() 的区别。
提供示例代码展示这些函数的使用。

代码

// encodeURI() 和 encodeURIComponent() 的区别
// encodeURI() 不会编码 ASCII 字母和数字以及部分特殊字符，适用于编码整个 URI
// encodeURIComponent() 会编码所有非标准字符，适用于编码 URI 的组成部分（如查询参数）
let uri = "https://example.com/搜索?query=测试";
let encodedURI = encodeURI(uri);
let encodedURIComponent = encodeURIComponent(uri);
console.log("encodeURI:", encodedURI); // 输出: https://example.com/%E6%90%9C%E7%B4%A2?query=%E6%B5%8B%E8%AF%95
console.log("encodeURIComponent:", encodedURIComponent); // 输出: https%3A%2F%2Fexample.com%2F%E6%90%9C%E7%B4%A2%3Fquery%3D%E6%B5%8B%E8%AF%95
// decodeURI() 和 decodeURIComponent() 的区别
// decodeURI() 用于解码由 encodeURI() 编码的字符串
// decodeURIComponent() 用于解码由 encodeURIComponent() 编码的字符串
let decodedURI = decodeURI(encodedURI);
let decodedURIComponent = decodeURIComponent(encodedURIComponent);
console.log("decodeURI:", decodedURI); // 输出: https://example.com/搜索?query=测试
console.log("decodeURIComponent:", decodedURIComponent); // 输出: https://example.com/搜索?query=测试

解释

encodeURI() 和 decodeURI() 主要用于处理整个 URI。

encodeURIComponent() 和 decodeURIComponent() 主要用于处理 URI 的组成部分，如查询参数。

encodeURI()和encodeURIComponent()有什么区别?

1. encodeURI()

作用：编码完整的URI，保留保留字符（如:/?#@等），仅对非保留字符进行编码。

适用场景：编码整个URL，确保URI结构不被破坏。

示例：

const url = "http://example.com/path?name=张三&age=20";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// 输出: "http://example.com/path?name=%E5%BC%A0%E4%B8%89&age=20"

保留字符：://?&等未被编码。

编码字符：中文张三被编码为%E5%BC%A0%E4%B8%89。

2. encodeURIComponent()

作用：编码URI的组成部分（如查询参数），对所有非标准字符（包括保留字符）进行编码。

适用场景：编码URI的某部分（如参数值），防止特殊字符破坏URI结构。

示例：

const param = "name=张三&city=北京";
const encodedParam = encodeURIComponent(param);
console.log(encodedParam);
// 输出: "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC"

编码保留字符：=被编码为%3D，&被编码为%26。

结果用途：适合作为查询参数的值。

3. decodeURI()

作用：解码由encodeURI()编码的URI，仅还原非保留字符的编码，保留保留字符的编码。

示例：

const encodedUrl = "http://example.com/path%20to%25file?q=%25test";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);
// 输出: "http://example.com/path to%file?q=%25test"

解码字符：%20解码为空格，%25保留为%。

保留编码：?未被解码，保持原样。

4. decodeURIComponent()

作用：解码由encodeURIComponent()编码的字符串，还原所有字符的编码（包括保留字符）。

示例：

const encodedParam = "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC";
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam);
// 输出: "name=张三&city=北京"

解码保留字符：%3D解码为=，%26解码为&。

核心对比表

函数	编码/解码范围	典型应用场景	示例输入 → 输出
encodeURI()	保留保留字符，编码非保留字符	编码完整URL	http://ex.com/path?name=张三 → 保留?
encodeURIComponent()	编码所有非标准字符（包括保留符）	编码URL组件（如参数值）	name=张三&age=20 → name%3D...
decodeURI()	仅解码非保留字符的编码	解码完整URL	%20 → 空格，%25 → %
decodeURIComponent()	解码所有字符的编码	解码URL组件（如参数值）	%3D → =，%26 → &

使用注意事项

配对使用：

encodeURI() ↔ decodeURI()
encodeURIComponent() ↔ decodeURIComponent()
混用会导致错误：例如，用decodeURI()解码encodeURIComponent()的结果，可能保留%3D等编码。

错误处理：

try {
  decodeURIComponent("%zz"); // 无效编码，抛出URIError
} catch (e) {
  console.error("解码失败:", e);
}

实际应用：

构造带参数的URL：

const baseURL = "http://example.com/search";
const query = encodeURIComponent("q=测试&page=1");
const finalURL = `${baseURL}?${query}`; // "http://example.com/search?q%3D%E6%B5%8B%E8%AF%95%26page%3D1"

总结

编码选择：

对整个URL使用encodeURI()，保留结构。
对参数、哈希值等使用encodeURIComponent()，确保特殊字符不破坏URI。

解码选择：

用decodeURI()还原完整URL。

用decodeURIComponent()还原参数值等部分。

正确使用这些函数，可以避免URI解析错误，确保数据在传输过程中的完整性。

encodeURI() 和 encodeURIComponent() 都是 JavaScript 中用于对 URI（统一资源标识符）进行编码的函数，但它们在处理字符的方式和适用场景上有所不同。以下是它们之间的主要区别：

encodeURI()

用途：encodeURI() 适用于对整个 URI 进行编码。

编码范围：它不会对以下字符进行编码：

字母、数字
特殊字符 - _ . ! ~ * ' ( )
保留字符 ; , / ? : @ & = + $ #
因此，encodeURI() 主要用于那些需要将特殊字符保留在 URI 中的情况，例如当您需要保持 URL 的结构完整性时。

示例：

console.log(encodeURI("https://example.com/test?name=John Doe&age=30"));
// 输出: "https://example.com/test?name=John%20Doe&age=30"

encodeURIComponent()

用途：encodeURIComponent() 更加严格，适用于对 URI 的组件（如查询字符串中的参数名或值）进行编码。
编码范围：除了字母、数字和特殊字符 - _ . ! ~ * ' ( ) 外，encodeURIComponent() 还会对保留字符 ; , / ? : @ & = + $ # 进行编码。

这意味着它可以确保 URI 组件不会破坏整个 URI 的结构，特别适合用来构建查询字符串或其他 URI 组件。

示例：

console.log(encodeURIComponent("John Doe"));
// 输出: "John%20Doe"
console.log(encodeURIComponent("https://example.com/test?name=John Doe&age=30"));
// 输出: "https%3A%2F%2Fexample.com%2Ftest%3Fname%3DJohn%20Doe%26age%3D30"

区别总结

当你想要对一个完整的 URI 编码，同时保留其原有的结构和特殊字符时，使用 encodeURI() 。

如果你需要对 URI 的某个部分（比如查询参数或者片段标识符）进行编码，以避免这些部分影响到整个 URI 的解析，则应该使用 encodeURIComponent() 。

选择合适的函数取决于你正在处理的是整个 URI 还是 URI 的一部分。正确地使用这两个函数可以帮助你在网络传输过程中准确无误地传递数据。

encodeURI()和encodeURIComponent()都是JavaScript中用于对URI（统一资源标识符）进行编码的函数，但它们之间存在一些关键的区别：

主要区别

编码范围：
- encodeURI()：主要用于对整个URI进行编码。它不会编码URI中的特殊字符，如冒号（:）、斜杠（/）、问号（?）、井号（#）、中括号（[]）等，因为这些字符在URI中有特定的含义。
- encodeURIComponent()：主要用于对URI中的某一部分（通常是查询字符串参数）进行编码。它会编码大多数非字母数字字符，包括URI中的特殊字符（如上所述的冒号、斜杠等，在查询字符串参数的上下文中会被编码）。
- 使用场景：
  - encodeURI()：适用于对整个URL进行编码，当你需要确保整个URL在传输过程中不会因为特殊字符而出现问题时使用。
  - encodeURIComponent()：适用于对URL的查询字符串参数进行编码，当你需要将包含特殊字符的参数值嵌入到URL中时使用。

示例对比

假设我们有一个URL和一个查询字符串参数：

let baseUrl = "https://example.com/search?";
let queryParam = "name=John Doe&age=30";

使用encodeURI()对整个URL进行编码（通常不需要，因为URL本身已经是一个有效的URI）：

let encodedUri = encodeURI(baseUrl + queryParam);
console.log(encodedUri);
// 输出: "https://example.com/search?name=John Doe&age=30"
// 注意：这里的空格没有被编码，因为空格在URI的路径部分（不是查询字符串）中通常不需要编码。
// 但在这个例子中，由于我们是在模拟整个URL的编码，而整个URL已经是有效的，所以编码结果没有变化。

使用encodeURIComponent()对查询字符串参数进行编码：

let encodedQueryParam = encodeURIComponent(queryParam);
console.log(encodedQueryParam);
// 输出: "name%3DJohn%20Doe%26age%3D30"
// 注意：这里的空格被编码为%20，特殊字符&被编码为%26。

然而，在实际应用中，我们通常不会对整个查询字符串使用encodeURIComponent()进行编码，而是分别对每个参数值进行编码，然后将它们拼接起来形成完整的查询字符串。例如：

let name = "John Doe";
let age = 30;
let encodedName = encodeURIComponent(name);
let encodedAge = encodeURIComponent(age.toString());
let fullQueryParam = `name=${encodedName}&age=${encodedAge}`;
console.log(fullQueryParam);
// 输出: "name=John%20Doe&age=30"

结论

使用encodeURI()对整个URI进行编码时，它会保留URI中的特殊字符。

使用encodeURIComponent()对URI的某一部分（如查询字符串参数）进行编码时，它会编码大多数非字母数字字符。

在实际开发中，根据具体需求选择合适的函数进行编码是非常重要的。

encodeURI() 和 encodeURIComponent() 都是 JavaScript 中用于对 URI（统一资源标识符）进行编码的函数，但它们在功能和使用场景上存在一些区别，下面为你详细介绍：

1. 编码范围不同

encodeURI()：该函数主要用于对整个 URI 进行编码。它会保留 URI 中具有特殊含义的字符，这些字符包括 ;、,、/、?、:、@、&、=、+、$ 等，因为这些字符在 URI 中有特定的用途，不应该被编码。它只对那些非标准的字符（如中文、特殊符号等）进行编码。

const uri = "https://example.com/path with spaces/index.html?param=值";
const encodedUri = encodeURI(uri);
console.log(encodedUri); 
// 输出: https://example.com/path%20with%20spaces/index.html?param=%E5%80%BC

在上述示例中，URI 中的特殊字符 :、/、? 等都没有被编码，只有空格和中文字符被编码了。

encodeURIComponent()：此函数用于对 URI 组件（如查询参数的值、路径段等）进行编码。它会将除了字母、数字以及 -、_、.、!、~、*、'、(、) 之外的所有字符都进行编码。

const component = "value with spaces & special characters";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent); 
// 输出: value%20with%20spaces%20%26%20special%20characters

在这个示例中，空格、& 等字符都被编码了。

2. 使用场景不同

encodeURI()：当你需要对整个 URI 进行编码，并且希望保留 URI 中特殊字符的原始含义时，使用 encodeURI()。例如，在构建一个完整的 URL 时，如果 URL 中包含非标准字符，可以使用 encodeURI() 进行编码。

const baseUrl = "https://example.com/search";
const query = "javascript 教程";
const fullUrl = `${baseUrl}?q=${query}`;
const encodedFullUrl = encodeURI(fullUrl);
console.log(encodedFullUrl); 
// 输出: https://example.com/search?q=javascript%20%E6%95%99%E7%A8%8B

encodeURIComponent()：当你需要对 URI 中的某个组件（如查询参数的值、路径段等）进行编码时，使用 encodeURIComponent()。例如，在处理表单数据时，将用户输入的值作为查询参数添加到 URL 中，需要使用 encodeURIComponent() 对值进行编码，以确保特殊字符不会破坏 URL 的结构。

const paramName = "q";
const paramValue = "javascript & tutorial";
const encodedParamValue = encodeURIComponent(paramValue);
const queryString = `${paramName}=${encodedParamValue}`;
console.log(queryString); 
// 输出: q=javascript%20%26%20tutorial

综上所述，encodeURI() 适用于编码整个 URI，而 encodeURIComponent() 适用于编码 URI 中的组件。

decodeURI()和decodeURIComponent()有什么区别?

decodeURI() 和 decodeURIComponent() 是 JavaScript 中用于解码 URL 编码字符的两个关键函数，它们的核心区别在于解码范围和使用场景。以下是详细对比：

一、核心区别

特性	decodeURI()	decodeURIComponent()
解码范围	解码完整 URI，但保留保留字符（如 :/?#）的编码	解码所有编码字符，包括保留字符（如 :/?#）
用途	处理整个 URI（如 http://example.com/path）	处理 URI 的某一部分（如查询参数、哈希值）
对应编码函数	encodeURI()	encodeURIComponent()
保留字符	不解码 ;/?:@&=+$,# 等保留字符的编码	解码所有字符的编码（包括保留字符）

二、具体行为对比

1. 对保留字符的处理

decodeURI()：不解码保留字符的编码。

例如：%3F（? 的编码）不会被解码，仍保持 %3F。

const encodedURI = "http://example.com/%3Fquery%3Dtest";
console.log(decodeURI(encodedURI)); 
// 输出: "http://example.com/%3Fquery=test" （%3F 未被解码）

decodeURIComponent()：解码所有保留字符的编码。

例如：%3F 会被解码为 ?。

const encodedComponent = "%3Fquery%3Dtest";
console.log(decodeURIComponent(encodedComponent)); 
// 输出: "?query=test" （%3F 被解码为 ?）

2. 对非保留字符的处理

两者都会解码非保留字符的编码（如空格 %20 解码为空格）：

const encodedSpace = "Hello%20World%2525";
console.log(decodeURI(encodedSpace));        // 输出: "Hello World%25"
console.log(decodeURIComponent(encodedSpace)); // 输出: "Hello World%"

%20 → 空格（两者均解码）。

%2525 → %25（decodeURI() 解码一次）→ %（decodeURIComponent() 解码两次）。

3. 错误处理

两者在遇到无效编码（如 %zz）时均会抛出 URIError：

try {
  decodeURI("http://example.com/%zz"); // 抛出 URIError
} catch (e) {
  console.error(e); 
}

三、使用场景

1. 何时用 decodeURI()？

解码完整的 URL：保留 URL 结构（如协议、路径分隔符）。

const encodedURL = "http://example.com/%E6%B5%8B%E8%AF%95?q=%25value";
console.log(decodeURI(encodedURL)); 
// 输出: "http://example.com/测试?q=%25value" （保留 ? 和 %25）

2. 何时用 decodeURIComponent()？

解码 URI 的组成部分：如查询参数、哈希值。

const encodedParam = "q%3D%25E6%B5%8B%E8%AF%95";
console.log(decodeURIComponent(encodedParam)); 
// 输出: "q=%E6%B5%8B%E8%AF%95" （解码 ? 的编码 %3D 为 =，%25 为 %）

四、编码与解码的配对规则

操作	正确配对函数	错误示例
编码完整 URI	encodeURI() → decodeURI()	encodeURIComponent() + decodeURI() → 结构破坏
编码 URI 组件	encodeURIComponent() → decodeURIComponent()	encodeURI() + decodeURIComponent() → 保留字符被解码

五、实际示例

场景 1：解码整个 URL

const encodedURL = "http://example.com/%E4%BD%A0%E5%A5%BD%3Fq%3D%25test";
const decodedURL = decodeURI(encodedURL);
console.log(decodedURL); 
// 输出: "http://example.com/你好?q=%25test" （保留 ? 和 %25）

场景 2：解码查询参数

const encodedParam = "q%3D%25E4%BD%A0%E5%A5%BD";
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam); 
// 输出: "q=%你好" （解码 %3D 为 =，%25 为 %）

六、总结

函数	使用场景	关键行为
decodeURI()	处理完整 URI	保留保留字符的编码（如 :/?#）
decodeURIComponent()	处理 URI 组件（如参数、哈希）	解码所有字符的编码（包括保留字符）

选择正确的解码函数可避免 URL 结构破坏或数据解析错误。

decodeURI()和decodeURIComponent()都是JavaScript中用于对URI（统一资源标识符）进行解码的函数，但它们之间存在一些关键的区别：

主要区别

解码范围：
- decodeURI()：主要用于对整个URI进行解码。它主要解码由encodeURI()函数编码的URI，且不会解码那些原本在URI中就具有特殊含义的字符（如冒号:、斜杠/、问号?、井号#等）。
- decodeURIComponent()：主要用于对URI的组件（通常是查询字符串参数）进行解码。它解码由encodeURIComponent()函数编码的URI组件，并且会解码大多数之前被编码的字符。
- 使用场景：
  - decodeURI()：当你需要对一个完整的、已经编码的URI进行解码时使用。
  - decodeURIComponent()：当你需要从URI中提取并解码查询字符串参数时使用。

示例对比

假设我们有一个已经编码的URI和一个编码的URI组件：

let encodedURI = "https%3A%2F%2Fexample.com%2Fpath%3Fname%3DJohn%2520Doe";
let encodedURIComponent = "John%2520Doe"; // 这里的%2520实际上是%20（空格）被再次编码的结果

使用decodeURI()对整个URI进行解码：
```
let decodedURI = decodeURI(encodedURI);
console.log(decodedURI);
// 输出: "https://example.com/path?name=John%20Doe"
// 注意：这里的%20（空格）没有被进一步解码，因为它在URI的查询字符串部分是有效的。
```
- 使用decodeURIComponent()对URI组件进行解码：
```
let decodedURIComponent = decodeURIComponent(encodeURIComponent);
console.log(decodedURIComponent);
// 输出: "John Doe"
// 注意：这里的%2520被解码为%20，然后%20再被解码为空格。
// 但在实际应用中，我们通常会直接对编码后的查询字符串参数使用decodeURIComponent()，
// 而不会遇到像%2520这样的双重编码情况。
// 更常见的示例可能是：
let directEncodedComponent = "John%20Doe";
let directDecodedComponent = decodeURIComponent(directEncodedComponent);
console.log(directDecodedComponent);
// 输出: "John Doe"
```
  注意事项
  - 在实际应用中，我们通常使用decodeURIComponent()来解码查询字符串参数，因为这些参数在嵌入到URI之前通常会被encodeURIComponent()编码。
  - 使用decodeURI()时，请确保URI是有效的，并且是由encodeURI()或类似函数编码的，以避免解码错误。
  - 不要对已经解码的URI或URI组件再次进行解码，这可能会导致数据损坏或不可预测的行为。
    结论
    - 使用decodeURI()对整个URI进行解码时，它会保留URI中的特殊字符的编码形式（如果这些字符在URI中有特殊含义）。
    - 使用decodeURIComponent()对URI的组件进行解码时，它会解码大多数之前被编码的字符，包括空格和其他特殊字符。
      在实际开发中，根据具体需求选择合适的函数进行解码是非常重要的。
      
      decodeURI() 和 decodeURIComponent() 都是 JavaScript 中用于解码 URI（统一资源标识符）的函数，但它们在处理编码字符的方式和适用场景上有所不同。以下是它们之间的主要区别：
      
      decodeURI()
      - 用途：decodeURI() 用于对使用 encodeURI() 编码过的整个 URI 进行解码。
      - 解码范围：它只会解码那些由 encodeURI() 编码的字符，即除了字母、数字、保留字符（; , / ? : @ & = + $ #）以及特殊字符（- _ . ! ~ * ' ( )）以外的所有字符。
      - 限制：由于 decodeURI() 不会解码保留字符，这意味着如果 URI 包含这些字符的百分比编码形式（例如 %2F 表示 /），那么 decodeURI() 将不会将其转换回原始字符。
        decodeURIComponent()
        
        用途：decodeURIComponent() 用于对使用 encodeURIComponent() 编码过的 URI 组件进行解码。
        解码范围：与 decodeURI() 相比，decodeURIComponent() 可以解码所有通过百分比编码的字符，包括保留字符。
        适用场景：当你需要对 URI 的某个部分（如查询字符串参数或路径片段）进行解码时，应该使用 decodeURIComponent()。这是因为 URI 组件可能包含需要被正确解释为普通文本的保留字符。
        示例对比
        假设我们有如下编码后的 URI：
        
        let encodedUri = encodeURI("https://example.com/test?name=John Doe&age=30"); // 输出: "https://example.com/test?name=John%20Doe&age=30" let encodedComponent = encodeURIComponent("John Doe"); // 输出: "John%20Doe"
        
        现在我们可以用相应的解码函数来解码它们：
        
        console.log(decodeURI(encodedUri)); // 输出: "https://example.com/test?name=John Doe&age=30" console.log(decodeURIComponent(encodedComponent)); // 输出: "John Doe"
        
        总结
        
        如果你需要解码整个 URI 并且希望保留其中的保留字符不被改变，你应该使用 decodeURI()。
        当你需要解码 URI 的特定组件，并且该组件可能包含需要被解码的保留字符时，你应该使用 decodeURIComponent()。
        理解这两个函数的区别对于正确处理 URL 参数和其他 URI 相关的数据至关重要。例如，在构建动态网页或处理 AJAX 请求时，确保正确地编码和解码数据可以避免潜在的安全问题和错误。
        
        decodeURI() 和 decodeURIComponent() 是 JavaScript 中用于对经过编码的 URI（统一资源标识符）进行解码的两个函数，它们的主要区别与 encodeURI() 和 encodeURIComponent() 相对应，具体如下：
        
        1. 解码范围不同
        
        decodeURI()：用于对使用 encodeURI() 编码后的整个 URI 进行解码。它只会对那些通过 encodeURI() 编码的非标准字符（如中文、特殊符号等）进行解码，而对于在 encodeURI() 中保留的具有特殊含义的字符（像 ;、,、/、?、:、@、&、=、+、$ 等）不会进行额外处理，因为这些字符在 URI 中有其特定用途，在编码时就未被编码。
        const encodedUri = "https://example.com/path%20with%20spaces/index.html?param=%E5%80%BC"; const decodedUri = decodeURI(encodedUri); console.log(decodedUri); // 输出: https://example.com/path with spaces/index.html?param=值
        
        在上述例子中，空格和中文字符被成功解码，而 :、/、? 等特殊字符保持不变。
        
        decodeURIComponent()：用于对使用 encodeURIComponent() 编码后的 URI 组件进行解码。它会将所有经过 encodeURIComponent() 编码的字符（除了字母、数字以及 -、_、.、!、~、*、'、(、) 这些在编码时就保留的字符）都还原为原始字符。
        const encodedComponent = "value%20with%20spaces%20%26%20special%20characters"; const decodedComponent = decodeURIComponent(encodedComponent); console.log(decodedComponent); // 输出: value with spaces & special characters
        
        这里，编码后的空格、& 等字符都被解码回原始形式。
        
        2. 使用场景不同
        
        decodeURI()：当你需要对一个完整的、使用 encodeURI() 编码过的 URI 进行还原时，就使用 decodeURI()。例如，在从浏览器地址栏获取完整的 URL 后，如果其中包含编码的部分，就可以用 decodeURI() 来得到原始的 URL。
        const fullEncodedUrl = "https://example.com/search?q=javascript%20%E6%95%99%E7%A8%8B"; const fullDecodedUrl = decodeURI(fullEncodedUrl); console.log(fullDecodedUrl); // 输出: https://example.com/search?q=javascript 教程
        
        decodeURIComponent()：在处理从 URI 中提取出来的某个组件（如查询参数的值）时，若该组件是使用 encodeURIComponent() 编码的，就需要用 decodeURIComponent() 来解码。比如在解析 URL 的查询字符串时，对每个参数的值进行解码。
        const queryString = "q=javascript%20%26%20tutorial"; const [paramName, encodedParamValue] = queryString.split('='); const decodedParamValue = decodeURIComponent(encodedParamValue); console.log(decodedParamValue); // 输出: javascript & tutorial
        
        总之，decodeURI() 针对完整 URI 的解码，decodeURIComponent() 则用于 URI 组件的解码，它们的使用场景取决于编码时采用的是哪种编码函数。

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

高速稳定云服务器9.9元起

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

js的 encodeURI() encodeURIComponent() decodeURI() decodeURIComponent() 笔记250205