JavaScript简单获取url地址参数

JavaScript中的URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串(详解MDN==>https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams)

方法

get方法
介绍：获取单个key的value。
使用方法：searchParams.get(“key”)
案例：searchParams.get('id') //输出10

append方法
介绍： 插入一个指定的键/值对作为新的搜索参数。
使用方法：searchParams.append(key, value)
案例:
searchParams.append('nickName' , '小fortune') searchParams.get('nickName') //输出小fortune

delete方法
介绍：删除一个key
使用方法：searchParams.delete(‘id’)
案例：

searchParams.delete('id')
searchParams.get('id') //输出null
1
2
getAll方法
介绍：获取一个key的值，并以数组的形式返回
使用方法：searchParams.getAll(‘key名’)
案例：searchParams.getAll('id') //输出["10"]

has方法
介绍：判断一个key是否存在
使用方法：searchParams.has(‘key名’)
案例：

searchParams.has('name')    //输出true
searchParams.has('has')    //输出false
1
2
keys方法
介绍：返回一个对象，包含所有的key名
使用方法：searchParams.keys()
案例：
for (const key of searchParams.keys()) {
console.log(key)    //输出 id name num
}
1
2
3
values方法
介绍：返回一个对象，包含所有的value
使用方法：searchParams.values()
案例：
for (const key of searchParams.values()) {
console.log(key)    //输出 10 fortune-tao 111
}
1
2
3

以上就是URLSearchParams对象的使用以及方法

ie有兼容性问题：

加入一个babel就可以了。

npm install url-search-params-polyfill --save

在index.js中引入：

import 'url-search-params-polyfill'