在 ES9 中,一项新的 API 被加入到了 JavaScript 中 - URLSearchParams
。这个 API 提供了一种简便的方式来处理 URL 查询参数,使得前端开发者可以更方便地解析和操作 URL 参数。
什么是 URLSearchParams API
URLSearchParams
是一个 JavaScript 的原生类,它提供了一组操作 URL 查询参数的方法。这个 API 可以处理类似“key1=value1&key2=value2”的 URL 查询字符串,提供了许多方便的方法用于解析和操作这些查询参数。
在之前的版本中,为了解析 URL 查询参数,我们通常需要使用正则表达式或手动解析字符串,这样非常的繁琐和易出错。而使用 URLSearchParams
,我们可以方便地进行 URL 查询参数的解析和操作。
如何使用 URLSearchParams API
我们来看一个简单的例子,首先,我们可以使用 URLSearchParams
将 URL 查询参数解析成一个对象:
const params = new URLSearchParams('?name=Tom&age=20'); console.log(params.get('name')); // Tom console.log(params.get('age')); // 20
在上述代码中,我们将查询参数传入了 URLSearchParams
的构造函数,这样就得到了一个 params
对象。之后我们可以使用 get
方法获取对应的参数值。
除了 get
方法,URLSearchParams
还提供了一些其它方便的方法用于操作查询参数:
set(key, value)
该方法会将指定的键和值添加到查询参数中。如果有相同的键的话,则会覆盖原来的值。
params.set('name', 'Jerry') console.log(params.toString()) // "name=Jerry&age=20"
delete(key)
该方法用于删除指定键的查询参数。
params.delete('name') console.log(params.toString()) // "age=20"
keys()
该方法返回键的迭代器对象。
console.log(params.keys()) // {"age"}
values()
该方法返回值的迭代器对象。
console.log(params.values()) // {"20"}
entries()
该方法返回键/值对的迭代器对象。
console.log(params.entries()) // {"{age, 20}"}
sort()
该方法用于对查询参数进行排序。
params.append('zoo', 'tiger') params.append('zoo', 'lion') params.append('car', 'bmw') params.sort() console.log(params.toString()) // "age=20&car=bmw&zoo=lion&zoo=tiger"
如何用 URLSearchParams API 处理表单数据
URLSearchParams
API 可以非常方便地处理表单数据。在大多数情况下,我们是将表单数据作为查询参数通过 GET 或 POST 方法传递的,因此,使用 URLSearchParams
API 可以方便地将表单数据转换为 URL 查询参数。
以下是一个表单提交的例子:
-- -------------------- ---- ------- ------ ------ ----------- --------------- ------------ -- ------ ----------- --------------- -------------- -- ------ ------------- -------------- -- ------- -------- ----- ---- - ------------------------------ ----- -------- - --- -------------- ----- ------ - --- ----------------- --- ---- ---- -- ------------------- - ---------------------- -------- - ----- ----------- - ----------------- ------------------ - ------------ - ------- ------ --- ---------
在上面的代码中,我们首先选中了表单,之后使用 FormData
对象获取表单中的数据。之后,我们创建了一个新的 params
对象,然后使用 append
方法将表单数据添加到 params
中。最后,我们使用 toString()
方法将 params
转换为 URL 查询参数,并将它作为查询字符串访问了 /some-url
。
总结
URLSearchParams
是一个非常有用的 API,在前端开发中被广泛使用。使用这个 API,我们能够方便地解析和操作 URL 查询参数,并且可以轻松地处理表单数据。这个 API 的引入,可以使我们的代码更加简洁和优雅,值得前端开发者学习和掌握。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6493fcfe48841e989418b014