URL参数中携带中文？分享 1 段优质 JS 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 800+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，在发送 ajax 请求时确保中文参数值被正确解析。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

const params = new URLSearchParams();
params.append('name', encodeURIComponent('张三'));

// 使用 Fetch API 发送 POST 请求
fetch('https://example.com/api', {
    method: 'POST',
    body: params,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})

分享原因

这段代码展示了如何使用 URLSearchParams 对象来构建 URL 编码的查询字符串，同时使用 encodeURIComponent 函数来确保参数值中的特殊字符被正确编码。

如果数据是以 JSON 格式传输，那么中文字符不需要额外的编码和解码步骤，因为 JSON 已经包含了对 Unicode 字符的支持。

但如果不是 JSON 格式传输，中文字符就必须用 encodeURIComponent 函数做编码处理，然后在服务端用 decodeURIComponent 做解码处理。

否则，就会出现乱码现象，无法获取正确的中文值。

代码解析

1. const params = new URLSearchParams();

URLSearchParams 主要用于处理 URL 中的查询字符串部分。

它提供了一系列方法来方便地操作查询参数。

一般我都会把 URLSearchParams 与 FormData 一起学习：

FormData 通常用于表单数据的提交，特别是在进行 XMLHttpRequest 或 fetch 请求时。

URLSearchParams 通常在发送数据时，Content-Type 默认为 application/x-www-form-urlencoded 。

FormData 在发送数据时，Content-Type 会根据数据的内容自动设置。

如果包含文件，通常为 multipart/form-data ；如果只是普通的表单字段数据，可能是 application/x-www-form-urlencoded 。

2. params.append('name', encodeURIComponent('张三'));

params.append 方法用于向 URLSearchParams 对象中添加一个键值对。

name 是参数的键。

encodeURIComponent('张三') 是参数的值。

encodeURIComponent 函数用于对 URI 组件（例如查询字符串中的参数值）进行编码，将一些特殊字符转换为可在 URI 中安全传输的形式。

它会对以下字符进行编码：; 、/ 、? 、: 、@ 、& 、= 、+ 、$ 、, 、# 以及所有非 ASCII 字符。

decodeURIComponent 函数则执行相反的操作，将经过 encodeURIComponent 编码的字符串还原为原始的字符串。