提升技术能力，以多种方式解析URL参数

2024-02-17 23:44:35

前言

在Web开发中，我们经常会遇到需要解析URL参数的情况，比如获取URL中传递的查询参数、表单参数等。URL参数通常以键值对的形式存在，用问号(?)分隔参数名和参数值，用&符号分隔多个参数。

解析URL参数的两种方法

1. 利用字符串分割和数组操作

function parseURLParams(url) {
  // 获取URL中的查询字符串
  const queryString = url.split('?')[1];

  // 将查询字符串分割成参数数组
  const params = queryString.split('&');

  // 创建一个对象来存储参数
  const queryParams = {};

  // 遍历参数数组
  for (let i = 0; i < params.length; i++) {
    // 将每个参数分割成键值对
    const param = params[i].split('=');

    // 将键值对添加到对象中
    queryParams[param[0]] = param[1];
  }

  // 返回查询参数对象
  return queryParams;
}

2. 利用Web API

function parseURLParams(url) {
  // 创建一个URLSearchParams对象
  const params = new URLSearchParams(url);

  // 创建一个对象来存储参数
  const queryParams = {};

  // 遍历URLSearchParams对象
  for (const [key, value] of params) {
    // 将键值对添加到对象中
    queryParams[key] = value;
  }

  // 返回查询参数对象
  return queryParams;
}

编程题

实现一个解析URL参数的方法，即返回最终的query string对象即可。

参考答案

function parseURLParams(url) {
  // 获取URL中的查询字符串
  const queryString = url.split('?')[1];

  // 将查询字符串分割成参数数组
  const params = queryString.split('&');

  // 创建一个对象来存储参数
  const queryParams = {};

  // 遍历参数数组
  for (let i = 0; i < params.length; i++) {
    // 将每个参数分割成键值对
    const param = params[i].split('=');

    // 将键值对添加到对象中
    queryParams[param[0]] = param[1];
  }

  // 返回查询参数对象
  return queryParams;
}