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

news2025/2/6 20:01:59

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()保留保留字符，编码非保留字符编码完整URLhttp://ex.com/path?name=张三 → 保留?
encodeURIComponent()编码所有非标准字符（包括保留符）编码URL组件（如参数值）name=张三&age=20 → name%3D...
decodeURI()仅解码非保留字符的编码解码完整URL%20 → 空格，%25 → %
decodeURIComponent()解码所有字符的编码解码URL组件（如参数值）%3D → =，%26 → &

使用注意事项

  1. 配对使用：

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

  2. 错误处理：

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

  3. 实际应用：

    • 构造带参数的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请求发送数据时尤为重要。

  1. encodeURI()

    • 用途：将一个字符串作为完整的URI进行编码。
    • 它不会对以下字符进行编码：字母、数字、以及这些符号 - _ . ! ~ * ' ( )
    • 此外，它也不会对保留字符进行编码，保留字符包括：; , / ? : @ & = + $ #
    • 示例：
      console.log(encodeURI("https://example.com/test?name=John Doe"));
// 输出: "https://example.com/test?name=John%20Doe"

  2. encodeURIComponent()

    • 用途：将一个字符串作为URI组件进行编码。
    • 与encodeURI()不同的是，encodeURIComponent()会对更多的字符进行编码，包括保留字符如; , / ? : @ & = + $ #等。
    • 这使得它更适合用于编码URL中的查询参数值。
    • 示例：
      console.log(encodeURIComponent("John Doe"));
// 输出: "John%20Doe"
console.log(encodeURIComponent("?name=John Doe"));
// 输出: "%3Fname%3DJohn%20Doe"

  3. decodeURI()

    • 用途：对使用encodeURI()编码的字符串进行解码。
    • 示例：
      console.log(decodeURI("https://example.com/test?name=John%20Doe"));
// 输出: "https://example.com/test?name=John Doe"

  4. 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() 对值进行编码。







计划

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

代码

// 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()有什么区别?

在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()保留保留字符，编码非保留字符编码完整URLhttp://ex.com/path?name=张三 → 保留?
encodeURIComponent()编码所有非标准字符（包括保留符）编码URL组件（如参数值）name=张三&age=20 → name%3D...
decodeURI()仅解码非保留字符的编码解码完整URL%20 → 空格，%25 → %
decodeURIComponent()解码所有字符的编码解码URL组件（如参数值）%3D → =，%26 → &

使用注意事项

  1. 配对使用：

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

  2. 错误处理：

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

  3. 实际应用：

    • 构造带参数的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（统一资源标识符）进行编码的函数，但它们之间存在一些关键的区别：

主要区别

  1. 编码范围：

    • encodeURI()：主要用于对整个URI进行编码。它不会编码URI中的特殊字符，如冒号（:）、斜杠（/）、问号（?）、井号（#）、中括号（[]）等，因为这些字符在URI中有特定的含义。
    • encodeURIComponent()：主要用于对URI中的某一部分（通常是查询字符串参数）进行编码。它会编码大多数非字母数字字符，包括URI中的特殊字符（如上所述的冒号、斜杠等，在查询字符串参数的上下文中会被编码）。

  2. 使用场景：

    • 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 为 %）

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

操作正确配对函数错误示例
编码完整 URIencodeURI() → 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（统一资源标识符）进行解码的函数，但它们之间存在一些关键的区别：

主要区别

  1. 解码范围：

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

  2. 使用场景：

    • 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 组件的解码，它们的使用场景取决于编码时采用的是哪种编码函数。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2293939.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安全实验作业

安全实验作业

一 拓扑图 二 要求 1、R4为ISP，其上只能配置IP地址；R4与其他所有直连设备间均使用共有IP 2、R3-R5-R6-R7为MGRE环境，R3为中心站点； 3、整个OSPF环境IP基于172.16.0.0/16划分； 4、所有设备均可访问R4的环回&#x…
阅读更多...
《Python预训练视觉和大语言模型》：从DeepSeek到大模型实战的全栈指南

《Python预训练视觉和大语言模型》：从DeepSeek到大模型实战的全栈指南

就是当代AI工程师的日常：* - 砸钱买算力，却卡在分布式训练的“隐形坑”里； - 跟着论文复现模型，结果连1/10的性能都达不到； - 好不容易上线应用，却因伦理问题被用户投诉…… 当所有人都在教你怎么调用…
阅读更多...
血压计OCR文字检测数据集VOC+YOLO格式2147张11类别

血压计OCR文字检测数据集VOC+YOLO格式2147张11类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：2147 标注数量(xml文件个数)：2147 标注数量(txt文件个数)：2147 …
阅读更多...
Java 面试合集（2024版）

Java 面试合集（2024版）

种自己的花，爱自己的宇宙 目录 第一章-Java基础篇 1、你是怎样理解OOP面向对象??? 难度系数：? 2、重载与重写区别??? 难度系数：? 3、接口与抽象类的区别??? 难度系数：? 4、深拷贝与浅拷贝的理解??? 难度系数&…
阅读更多...
Typora免费使用

Typora免费使用

一.下载地址 https://typoraio.cn/ 二.修改配置文件 1.找到安装路径下的LicenseIndex.180dd4c7.4da8909c.chunk.js文件 文件路径为:安装路径\resources\page-dist\static\js\LicenseIndex.180dd4c7.4da8909c.chunk.js 将js中的 e.hasActivated"true"e.hasActiva…
阅读更多...
第一性原理:游戏开发成本的思考

第一性原理:游戏开发成本的思考

利润 营收-成本 营收定价x销量x分成比例 销量 曝光量x 点击率x （购买率- 退款率） 分成比例 100%- 平台抽成- 税- 引擎费- 发行抽成 成本开发成本运营成本 开发成本 人工外包办公地点租金水电设备折旧 人工成本设计成本开发成本迭代修改成本后续内容…
阅读更多...
裁员潮血洗硅谷，普通人惨遭裁员的血泪教训——要随时做好失业的准备

裁员潮血洗硅谷，普通人惨遭裁员的血泪教训——要随时做好失业的准备

我大学室友21年暑假在meta的某AI组实习过，压力巨大！组里大群天天消息99，年底实习结束直接就进到Google去了，听说eng组的intern十有八九都拿到了return offer，但都利用空余时间跳到了别的大厂。 离谱的时候&#xff0c…
阅读更多...
MacBook Pro（M1芯片）Qt环境配置

MacBook Pro（M1芯片）Qt环境配置

MacBook Pro（M1芯片）Qt环境配置 1、准备 试图写一个跨平台的桌面应用，此时想到了使用Qt，于是开始了搭建开发环境～ 在M1芯片的电脑上安装，使用brew工具比较方便 Apple Silicon（ARM/M1&#xf…
阅读更多...
智能编码在前端研发的创新应用

智能编码在前端研发的创新应用

一、前端开发实例 今天主要想分享一些关于大模型如何协助我们进行前端编码的实践。首先，让我们以一个前端开发的实例开始。通常，当需要实现一个新的前端功能时，我们会收到相关的背景和需求描述。我的期望是，大模型能够直接使用这…
阅读更多...
基于RK3588/RK3576+MCU STM32+AI的储能电站电池簇管理系统设计与实现

基于RK3588/RK3576+MCU STM32+AI的储能电站电池簇管理系统设计与实现

伴随近年来新型储能技术的高质量规模化发展，储能电站作为新能源领域的重要载体， 旨在配合逐步迈进智能电网时代，满足电力系统能源结构与分布的创新升级，给予相应规模 电池管理系统的设计与实现以新的挑战。同时，电子系…
阅读更多...
Django框架丨从零开始的Django入门学习

Django框架丨从零开始的Django入门学习

Django 是一个用于构建 Web 应用程序的高级 Python Web 框架，Django是一个高度模块化的框架，使用 Django，只要很少的代码，Python 的程序开发人员就可以轻松地完成一个正式网站所需要的大部分内容，并进一步开发出全功能…
阅读更多...
稀疏混合专家架构语言模型（MoE）

稀疏混合专家架构语言模型（MoE）

注：本文为 “稀疏混合专家架构语言模型（MoE）” 相关文章合辑。 手把手教你，从零开始实现一个稀疏混合专家架构语言模型（MoE） 机器之心 2024年02月11日 12:21 河南 选自huggingface 机器之心编译 机器之心…
阅读更多...
spring基础总结

spring基础总结

先修知识：依赖注入，反转控制，生命周期 IDEA快捷键 Ctrl Altm:提取方法，设置trycatch 通用快捷键： Ctrl F：在当前文件中查找文本。Ctrl R：在当前文件中替换文本。Ctrl Z：撤销…
阅读更多...
openRv1126 AI算法部署实战之——TensorFlow TFLite Pytorch ONNX等模型转换实战

openRv1126 AI算法部署实战之——TensorFlow TFLite Pytorch ONNX等模型转换实战

Conda简介 查看当前系统的环境列表 conda env list base为基础环境 py3.6-rknn-1.7.3为模型转换环境，rknn-toolkit版本V1.7.3，python版本3.6 py3.6-tensorflow-2.5.0为tensorflow模型训练环境，tensorflow版本2.5.0，python版本…
阅读更多...
java进阶1——JVM

java进阶1——JVM

java进阶——JVM 1、JVM概述 作用 Java 虚拟机就是二进制字节码的运行环境，负责装载字节码到其内部，解释/编译为对 应平台上的机器码指令行，每一条 java 指令，java 虚拟机中都有详细定义，如怎么取操 作数&#xff0c…
阅读更多...
基于深度学习的视觉检测小项目（十六） 用户管理界面的组态

基于深度学习的视觉检测小项目（十六） 用户管理界面的组态

分组和权限： 用户分为三个组，管理员、普通用户、访客。 • 管理员的权限和作业范围： 添加和删除用户、更改所有用户的信息（用户名、登录密码、所在分组等）、查看和备份以及复制数据库； • 普通用户的权限和…
阅读更多...
Docker使用指南（一）——镜像相关操作详解（实战案例教学，适合小白跟学）

Docker使用指南（一）——镜像相关操作详解（实战案例教学，适合小白跟学）

目录 1.镜像名的组成 2.镜像操作相关命令 镜像常用命令总结： 1. docker images 2. docker rmi 3. docker pull 4. docker push 5. docker save 6. docker load 7. docker tag 8. docker build 9. docker history 10. docker inspect 11. docker prune…
阅读更多...
《2025，AI重塑世界进行时》

《2025，AI重塑世界进行时》

开年爆点，AI 浪潮再掀高潮 2025 年开年，AI 领域便热闹非凡，热点事件不断，让人深刻感受到这股科技浪潮正以汹涌之势奔腾而来。先是深度求索公司（DeepSeek）的 DeepSeek - R1 模型横空出世，迅速在国…
阅读更多...
visual studio安装

visual studio安装

一、下载Visual Studio 访问Visual Studio官方网站。下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 在主页上找到并点击“下载 Visual Studio”按钮。 选择适合需求的版本，例如“Visual Studio Community”（免费版本）&#x…
阅读更多...
VSCode中使用EmmyLua插件对Unity的tolua断点调试

VSCode中使用EmmyLua插件对Unity的tolua断点调试

一.VSCode中搜索安装EmmyLua插件 二.创建和编辑launch.json文件 初始的launch.json是这样的 手动编辑加上一段内容如下图所示： 三.启动调试模式，并选择附加的进程
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023