encodeURIComponent解决编码问题

今天同事给我一个这样的错误

最后发现是编码没编好，"乳化剂\\TMN-10C 215kg"这个编成了

%E4%B9%B3%E5%8C%96%E5%89%82\TMN-10C%20215kg 

相当于  '\' 并没有被编码，后来发现js里有一个encodeURIComponent()  

encodeURIComponent 是 JavaScript 中的一个内置函数，用于对 URI（统一资源标识符）组件进行编码。它的主要作用是将字符串中的特殊字符转换为 URL 安全的格式，以便在 URL 中传递参数时不会引发解析错误。

---

作用

encodeURIComponent 会对字符串中的以下字符进行编码：

1. 保留字符：如 ;、/、?、:、@、&、=、+、$、, 等。

2. 非转义字符：如字母、数字、-、_、.、!、~、*、'、(、)。

3. 其他字符：如空格、中文、反斜杠等。

编码后的字符会转换为 % 开头的十六进制值（UTF-8 编码）。

---

语法

javascript

encodeURIComponent(str);

• str：需要编码的字符串。

• 返回值：编码后的字符串。

---

示例

1. 编码普通字符串

javascript

const str = "Hello World!";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出: Hello%20World!

• 空格 被编码为 %20。

2. 编码特殊字符

javascript

const str = "a/b?c=d&e=f";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出: a%2Fb%3Fc%3Dd%26e%3Df

• / 被编码为 %2F。

• ? 被编码为 %3F。

• = 被编码为 %3D。

• & 被编码为 %26。

3. 编码中文字符

javascript

const str = "你好";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出: %E4%BD%A0%E5%A5%BD

• 你 被编码为 %E4%BD%A0。

• 好 被编码为 %E5%A5%BD。

4. 编码反斜杠

javascript

const str = "path\\to\\file";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出: path%5Cto%5Cfile

• \ 被编码为 %5C。

---

与 encodeURI 的区别

• encodeURIComponent：

  • 用于编码 URI 组件（如查询参数）。

  • 会对更多字符进行编码（包括 /、?、= 等）。

  • 适用于编码 URL 参数。

• encodeURI：

  • 用于编码 完整的 URI。

  • 不会对 /、?、= 等 URI 保留字符进行编码。

  • 适用于编码整个 URL。

示例对比

javascript

const url = "https://example.com/path?name=John Doe";

console.log(encodeURI(url));
// 输出: https://example.com/path?name=John%20Doe

console.log(encodeURIComponent(url));
// 输出: https%3A%2F%2Fexample.com%2Fpath%3Fname%3DJohn%20Doe

---

使用场景

1. URL 参数编码：

   • 在拼接 URL 查询参数时，使用 encodeURIComponent 对参数值进行编码。

   javascript

   const baseUrl = "https://example.com/search";
   const query = "JavaScript & Node.js";
   const url = `${baseUrl}?q=${encodeURIComponent(query)}`;
   console.log(url); // 输出: https://example.com/search?q=JavaScript%20%26%20Node.js

2. 表单数据编码：

   • 在发送表单数据时，确保数据是 URL 安全的。

   javascript

   const data = {
       name: "John Doe",
       email: "john@example.com"
   };
   const encodedData = Object.keys(data)
       .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
       .join("&");
   console.log(encodedData); // 输出: name=John%20Doe&email=john%40example.com

3. 处理特殊字符：

   • 当字符串中包含特殊字符（如 &、=、+ 等）时，使用 encodeURIComponent 避免解析错误。

---

注意事项

1. 不要对整个 URL 使用 encodeURIComponent：

   • 如果对整个 URL 使用 encodeURIComponent，会导致 /、:、? 等字符被编码，从而使 URL 失效。

   • 正确的做法是只对查询参数部分进行编码。

2. 解码：

   • 使用 decodeURIComponent 对编码后的字符串进行解码。

   javascript

   const encodedStr = "Hello%20World%21";
   const decodedStr = decodeURIComponent(encodedStr);
   console.log(decodedStr); // 输出: Hello World!

---

总结

• encodeURIComponent 是 JavaScript 中用于编码 URI 组件的函数，适用于编码 URL 参数、表单数据等。

• 它会将特殊字符（如空格、中文、反斜杠等）转换为 % 开头的十六进制值。

• 与 encodeURI 不同，encodeURIComponent 会对更多字符进行编码，适合处理 URL 参数。

所以直接用encodeURIComponent(参数)就可以了。

我还问了一个问题 哈哈哈哈哈哈哈

deepseek的回答是

encodeURIComponent("乳化剂\\TMN-10C 215kg") 的编码结果应该是：

%E4%B9%B3%E5%8C%96%E5%89%82%5CTMN-10C%20215kg

---

详细解释

1. 输入字符串：

   • 输入字符串是 乳化剂\\TMN-10C 215kg。

   • 注意：在 JavaScript 字符串中，\\ 表示一个反斜杠 \（因为反斜杠是转义字符）。

2. encodeURIComponent 的作用：

   • encodeURIComponent 会对字符串中的每个字符进行 URL 编码。

   • 具体规则：

     • 中文字符（如 乳、化、剂）会被编码为 % 开头的 UTF-8 字节序列。

     • 反斜杠 \ 会被编码为 %5C。

     • 空格 会被编码为 %20。

     • 字母、数字和部分符号（如 -、.）不会被编码。

3. 编码过程：

   • 乳 被编码为 %E4%B9%B3。

   • 化 被编码为 %E5%8C%96。

   • 剂 被编码为 %E5%89%82。

   • \ 被编码为 %5C。

   • TMN-10C 保持不变（因为字母、数字和 - 不需要编码）。

   • 空格 被编码为 %20。

   • 215kg 保持不变。

4. 最终结果：

   %E4%B9%B3%E5%8C%96%E5%89%82%5CTMN-10C%20215kg

---

为什么不是 %5C%5C？

• 在 JavaScript 字符串中，\\ 表示一个反斜杠 \，而不是两个反斜杠。

• 因此，encodeURIComponent 只会将 \ 编码为 %5C，而不是 %5C%5C。

• 如果你希望编码两个反斜杠（即 \\），输入字符串应该是 乳化剂\\\\TMN-10C 215kg（因为每个 \ 需要转义为 \\）。

---

总结

encodeURIComponent("乳化剂\\TMN-10C 215kg") 的编码结果是：

%E4%B9%B3%E5%8C%96%E5%89%82%5CTMN-10C%20215kg

如果输入字符串是 乳化剂\\\\TMN-10C 215kg（表示两个反斜杠），编码结果才是：

%E4%B9%B3%E5%8C%96%E5%89%82%5C%5CTMN-10C%20215kg