在JavaScript中编辑URL参数

在JavaScript中编辑URL的查询字符串是非常常见的。虽然直接将URL作为字符串进行编辑的简单方法通常可行，但它是一种脆弱的解决方案，容易出错。特别是在处理编码、哈希片段和其他复杂情况时更是如此。

编辑URL的最健壮的方法是使用URL接口来解析原始URL字符串并进行编辑。这样，浏览器将处理所有复杂的细节，使代码更易于阅读和维护。

const urlString = 'https://mysite.com?p=42&from=home#details';
const url = new URL(urlString);

// 删除一个参数
const removedParam = 'from';
url.searchParams.delete(removedParam);

// 编辑/添加参数
const newParams = {
  p: 57,
  track: 'none'
};
Object.keys(newParams).forEach(key => {
  url.searchParams.set(key, newParams[key]);
});

// 编辑哈希片段
const newHash = 'new';
url.hash = newHash;

console.log(`${url}`); // https://mysite.com?p=57&track=none#new

正如你在示例中看到的，URL接口提供了许多方法来编辑URL。其中最常用的是URL.searchParams和URL.hash。前者是一个URLSearchParams对象，提供了编辑URL的查询字符串的方法，而后者是一个包含URL的哈希片段的字符串。除了这两个方法，URL接口还提供了编辑URL的协议、主机、端口、路径等方法。