有人能解释这3行JavaScript Location API相关的URL处理代码吗？

首先给出你提到的完整代码段：

let windowUrl = new URLSearchParams(window.location.search);
const queryString = window.location.href;
const firstParam = queryString.substring(queryString.lastIndexOf("?") + 1).split("=")[0];

以下是每行代码的具体作用：

• 第一行 let windowUrl = new URLSearchParams(window.location.search);
  这行是调用JS内置的查询参数处理接口解析当前页面的URL查询参数：
  • window.location.search 对应当前URL中?开头的查询字符串部分，比如URL为https://demo.com?id=123&type=article时，该属性值为?id=123&type=article
  • URLSearchParams 是浏览器原生提供的专门处理查询参数的API，会把传入的查询字符串解析为可直接操作的实例，后续可以直接调用get('参数名')、has('参数名')等方法快速读取、判断参数，无需手动拆分字符串。
• 第二行 const queryString = window.location.href;
window.location.href 对应当前页面的完整URL字符串，比如上述例子中该属性值就是https://demo.com?id=123&type=article，这行的作用就是把完整URL存储到queryString变量中备用。
• 第三行 const firstParam = queryString.substring(queryString.lastIndexOf("?") + 1).split("=")[0];
  这行是手动拆分URL字符串，获取查询参数中第一个参数的键名，分步拆解逻辑如下：
  1. queryString.lastIndexOf("?") 找到完整URL中最后一个?所在的索引位置，加1是为了跳过?本身，截取后面的内容
  2. substring(...) 执行截取操作，上述例子执行完后得到字符串id=123&type=article
  3. .split("=") 把截取到的字符串按=分割为数组，上述例子分割后得到['id', '123&type', 'article']
  4. 取数组下标为0的元素，也就是第一个参数的键名id，赋值给firstParam变量

注意：第三行的手动拆分写法容错率很低，当URL中无查询参数、或者参数值包含=符号时都会得到错误结果，生产环境更推荐使用第一行的URLSearchParams原生API处理参数。

内容的提问来源于stack exchange，提问作者Stephen K