JS方法参数编码有哪些常见方式？

1. URL 编码：当参数需要作为 URL 的一部分（例如查询字符串 ?key=value）进行传递时，必须进行编码，以确保 URL 的格式正确，避免特殊字符引起解析错误。
2. 数据序列化：当参数需要作为 HTTP 请求体（Body）中的 JSON 数据进行传递时，通常需要将 JavaScript 对象序列化为 JSON 字符串。

下面我们分别深入探讨这两种情况。

URL 编码

当你的 JavaScript 方法需要构建一个 URL 并在其中包含参数时，必须对参数值进行 URL 编码。

为什么需要 URL 编码？

URL 中只能使用特定的 ASCII 字符，如果参数值包含空格、&、、、 等特殊字符，它们会破坏 URL 的结构，导致服务器无法正确解析。

• 用于分隔 URL 和查询字符串。
• &：用于分隔多个键值对。
• 用于分隔键和值。
• 用于标识 URL 的片段（锚点）。
• 空格：在 URL 中应该被编码为 或 %20。
• 中文等非 ASCII 字符：必须被编码。

核心方法：encodeURIComponent()

这是进行 URL 编码最常用、最安全的方法，它会将一个 URI 组件（例如参数值）中的所有非字母数字字符都进行编码。

语法： encodeURIComponent(str)

示例： 假设我们要向服务器搜索“JavaScript & Node.js”这个关键词。

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

• ` (空格) 被编码为%20`
• & 被编码为 %26

注意： 你应该只对参数值（value）进行编码，而不是对整个查询字符串或键（key）进行编码，键如果包含特殊字符，通常也需要编码，但实践中键往往是固定的。

一个完整的 URL 构建函数

下面是一个健壮的函数,用于构建带查询参数的 URL。

/**
 * 构建一个带查询参数的 URL
 * @param {string} baseUrl - 基础 URL，'https://api.example.com/data'
 * @param {object} params - 参数对象，{ id: 123, name: 'John Doe' }
 * @returns {string} 完整的 URL
 */
function buildUrl(baseUrl, params) {
  // 如果没有参数，直接返回基础 URL
  if (!params || Object.keys(params).length === 0) {
    return baseUrl;
  }
  const queryString = Object.keys(params)
    .map(key => {
      // 对键和值都进行编码，确保万无一失
      const encodedKey = encodeURIComponent(key);
      const encodedValue = encodeURIComponent(params[key]);
      return `${encodedKey}=${encodedValue}`;
    })
    .join('&'); // 用 & 连接所有键值对
  return `${baseUrl}?${queryString}`;
}
// --- 使用示例 ---
const baseUrl = 'https://api.example.com/users';
const params = {
  id: 101,
  name: '张三 李四',
  role: 'admin&user',
  filters: 'active=true'
};
const finalUrl = buildUrl(baseUrl, params);
console.log(finalUrl);
// 输出:
// https://api.example.com/users?id=101&name=%E5%BC%A0%E4%B8%89%20%E6%9D%8E%E5%9B%9B&role=admin%26user&filters=active%3Dtrue

常见的 URL 编码方法对比

JSON 序列化

当你的 JavaScript 方法需要向服务器发送 POST、PUT 或 PATCH 请求，并且数据在请求体中时，通常需要将 JavaScript 对象或数组转换成 JSON 字符串。

为什么需要 JSON 序列化？

HTTP 请求体中的数据需要是文本格式，服务器端（如 Node.js, Java, Python）通常都有解析 JSON 字符串的库，JSON 是一种轻量级、与语言无关的数据交换格式，是目前前后端数据交互的事实标准。

核心方法：JSON.stringify()

这个方法将一个 JavaScript 对象或数组转换为一个 JSON 字符串。

语法： JSON.stringify(value, replacer, space)

• value: 要转换的对象。
• replacer (可选): 一个函数或数组，用于过滤或转换值。
• space (可选): 一个字符串或数字，用于格式化输出，使其更易读（用于调试，生产环境通常不用）。

示例： 假设我们要创建一个新用户。

const userData = {
  username: 'newuser',
  email: 'newuser@example.com',
  isActive: true,
  roles: ['user', 'editor']
};
// 将 JavaScript 对象序列化为 JSON 字符串
const jsonString = JSON.stringify(userData);
console.log(jsonString);
// 输出: {"username":"newuser","email":"newuser@example.com","isActive":true,"roles":["user","editor"]}
console.log(typeof jsonString); // 输出: string

在 fetch 请求中的使用：

async function createUser(user) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json' // 告诉服务器我们发送的是 JSON
    },
    // 将 JavaScript 对象序列化为 JSON 字符串作为请求体
    body: JSON.stringify(user)
  });
  if (!response.ok) {
    throw new Error('Failed to create user');
  }
  return response.json(); // 将服务器返回的 JSON 字符串解析为 JavaScript 对象
}
// 调用函数
createUser({ name: 'Alice', email: 'alice@example.com' })
  .then(data => console.log('User created:', data))
  .catch(error => console.error('Error:', error));

JSON.stringify 的进阶：replacer 函数

有时你不想发送所有数据,或者需要对某些值进行转换，这时可以使用 replacer 函数。

const sensitiveData = {
  id: 123,
  name: 'Bob',
  password: 'secret123' // 不想发送这个字段
};
// 使用 replacer 函数过滤掉 password 字段
const filteredJson = JSON.stringify(sensitiveData, (key, value) => {
  if (key === 'password') {
    return undefined; // 过滤掉这个属性
  }
  return value;
});
console.log(filteredJson);
// 输出: {"id":123,"name":"Bob"}

总结与最佳实践

记住这个黄金法则：

• 如果数据要去 URL 里（作为查询字符串的一部分），用 encodeURIComponent。
• 如果数据要去 HTTP 请求体里（作为 JSON 数据），用 JSON.stringify。

不要混淆这两个方法,JSON.stringify 不会将空格编码为 %20，encodeURIComponent 不会生成合法的 JSON 格式，错误地使用它们会导致服务器无法解析你的请求。