URLSearchParams用法

重工潇洒哥

于 2024-02-17 13:37:39 发布

阅读量196

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_49554584/article/details/136137723

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URLSearchParams</title>
</head>

<body>
    <div>URLSearchParams</div>
    <script>
        const url = 'http://www.baidu.com?name=123&age=18&sex=1&name=456'
        const params = new URLSearchParams(url.split('?')[1])
        // 获取所有name的值
        console.log(params.getAll('name')) // [ '123', '456' ]
        // 获取指定key的值
        console.log(params.get('age')) // 18
        // 判断是否存在key和对应的value值
        console.log(params.has('name', 'fd')) // false
        console.log(params.has('name', '123')) // true
        // 删除指定key的值
        params.delete('name')
        console.log(params.toString()) // age=18&sex=1
        // 添加指定key的值
        params.append('name', 'fd')
        console.log(params.toString()) // age=18&sex=1&name=fd
        // 修改指定key的值
        params.set('name', 'change')
        console.log(params.toString()) // age=18&sex=1&name=change
        // 遍历所有name的值
        params.forEach((value, key) => {
            console.log(key, value)
        })
        // 获取所有keys
        for (var key of params.keys()) {
            console.log(key);
        }
    </script>
</body>

</html>

详细用法参考：URLSearchParams - Web APIs | MDN (mozilla.org)