获取当前页面的url 参数

获取当前页面的url 参数

• 传统方式：查找 ·location.search
• 新API, URLSearchParams 参考：URLSearchParams - Web API 接口参考 | MDN (mozilla.org)

代码示例：
浏览器输入：http://127.0.0.1:8080/index.html?a=10&b=20&c=30

// 传统方式
function query(name) {
    const search = location.search.substr(1) // 类似 array.slice(1)
    // search: 'a=10&b=20&c=30'
    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
    const res = search.match(reg) // search字符串来匹配reg表达式
    if (res === null) {
        return null
    }
    return res[2]
}
console.log(query('a'))  // 10

// URLSearchParams
function query(name) {
    const search = location.search
    const p = new URLSearchParams(search)
    return p.get(name)
}
console.log( query('b') )  // 20

将url 参数解析为JS对象

方式一：

function queryToObj() {
    const res = {}
    const search = location.search.substr(1) // 去掉前面的'?'
    search.split('&').forEach(paramStr => {
        const arr = paramStr.split('=')
        const key = arr[0]
        const val = arr[1]
        res[key] = val
    })
    return res
}

方式二：

function queryToObj() {
    const res = {}
    const pList = new URLSearchParams(location.search)
    pList.forEach((val, key) => {
        res[key] = val
    })
    return res
}