JavaScript 中的 encodeURIComponent() 函数允许您对查询字符串中的特殊字符进行编码，否则会更改字符串的相关内容。

+、/ 和 & 等字符是特殊的。例如，假设您想发送一个 HTTP 请求，其中查询字符串中的用户电子邮件地址包含一些特殊字符串。

fetch(`https://httpbin.org/get?email=${email}`);

如果电子邮件字符串里有一个 &，比如 ’john@gmail.com¶m=somethingelse’，会发生什么？这将在查询字符串中添加一个额外的参数 param=somethingelse。

使用 encodeURIComponent() 函数确保 email 这个参数的内容不变，例如以下代码：

const email = 'john@gmail.com&param=somethingelse';

await fetch(`https://httpbin.org/get?email?email=${email}`).
  then((res) => res.json());// { email: 'john@gmail.com', param: 'somethingelse' }await fetch(`https://httpbin.org/get?email=${encodeURIComponent(email)}`).
  then((res) => res.json());// { email: 'john@gmail.com&param=somethingelse' }

注：不要编码整个网址！只需对查询字符串中的某个值进行单独编码。

Axios

如果您使用的是 Axios 查询参数，则不需要使用 encodeURIComponent()。 Axios 为你调用 encodeURIComponent()。如下段代码所示：

const axios = require('axios');

// Equivalent to `axios.get('https://httpbin.org/get?answer=42')`const res =await axios.get('https://httpbin.org/get', { params: { answer: 42 } });

res.data.args;// { answer: 42 }

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载