JS 更新查询字符串 - Javascript

在前端开发过程中，经常需要通过 URL 中的查询字符串来传递参数。查询字符串是 URL 中的一部分，使用 ? 和 & 来分隔参数和值，例如：https://example.com/search?q=javascript&page=1。

在某些场景下，需要更新查询字符串的某个参数值，而不影响其他参数和值。本文介绍几种更新查询字符串的方法，如下：

方法一：使用 URLSearchParams

URLSearchParams 是浏览器原生提供的 API，用于操作 URL 中的查询字符串。我们可以通过 URLSearchParams 来获取、添加、删除和更新查询字符串的参数和值。

const url = new URL('https://example.com/search?q=javascript&page=1')
const params = new URLSearchParams(url.search)
params.set('page', 2)

url.search = params.toString()
console.log(url.href) // https://example.com/search?q=javascript&page=2

以上代码中，我们首先使用 new URL() 方法来创建一个 URL 对象，然后通过 URLSearchParams 获取查询字符串对象。接着，我们使用 set() 方法更新查询字符串中的 page 参数值为 2。最后，我们再次将查询字符串对象转化为字符串，使用 url.search 属性更新原 URL 对象中的查询字符串，最终输出修改后的 URL。

方法二：使用正则表达式

正则表达式也可以用于更新查询字符串中的参数和值。我们可以使用 replace() 方法和正则表达式匹配，然后进行替换。

const url = 'https://example.com/search?q=javascript&page=1'
const newUrl = url.replace(/(\?|&)page=\d+/, '$1page=2')

console.log(newUrl) // https://example.com/search?q=javascript&page=2

以上代码中，我们使用正则表达式匹配 page 参数和值，然后使用 replace() 方法将原值替换为 2。注意，上面的正则表达式能够匹配 ?page=1 和 &page=1 两种情况。

方法三：使用第三方库

除了浏览器原生 API 和正则表达式，也有一些第三方库可以用于操作查询字符串。比如 query-string：

import queryString from 'query-string'

const url = 'https://example.com/search?q=javascript&page=1'
const params = queryString.parseUrl(url)
params.query.page = '2'

const newUrl = queryString.stringifyUrl(params)
console.log(newUrl) // https://example.com/search?q=javascript&page=2

以上代码中，我们使用 query-string 库中的 parseUrl() 方法解析 URL，然后使用对象的方式更新 page 参数的值。最后，我们使用 stringifyUrl() 方法将更新后的 URL 对象转化为字符串。

总结

以上就是更新 URL 查询字符串的几种方法。其中，URLSearchParams 和 query-string 库比较适合在项目中使用，它们提供了更多的方法，比如获取查询字符串对象、删除参数、排序参数等等。在实际项目中，我们应该根据实际情况选择相应的方法来操作查询字符串。