【JavaScript编程】window.location.search 返回值为空

Location对象search值为空问题解析

最新推荐文章于 2025-10-23 23:14:41 发布

原创最新推荐文章于 2025-10-23 23:14:41 发布 · 2.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#location.search #location.hash #search值为空 #URL

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

博客围绕window.location对象展开，介绍其用于获取当前页面URL及重定向功能。重点分析了属性hash和search的区别，探讨了location.search为空的原因，即部分内容先被取走导致后续取值失败，还提及了解决相关问题。

一、Location 对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

二、属性hash和search的区别

属性	描述
location.hash	设置或返回一个URL的锚部分（从 `#` 号开始的部分）。
location.search	设置或返回一个URL的查询部分（从 `?` 开始的部分）。

1、示例1，url中#在?后面： https://blog.youkuaiyun.com/article?id=94458654#first

属性	结果
location.hash	`'#first'`
location.search	`'?id=94458654'`。注意：不包含#后面的内容

2、示例2，url中#在?前面： https://blog.youkuaiyun.com/article#first?id=94458654

属性	结果
location.hash	`'#first?id=94458654'`。注意：包含?后面的内容
location.search	`''`。值为空

三、为什么 location.search 会为空

在「示例2」中，因为?id=94458654是属于location.hash的内容，可以理解为这一部分内容先被location.hash取走了，location.search再取值就取不到了。

四、解决

/**
 * @description 获取url参数
 * @param {String} name 参数名，不传则返回所有参数的对象
 * @return {String Object}
 */
function getParams(name) {
    var search = window.location.search.substring(1)
    if (!search) {
        search = window.location.hash.split('?')[1]
    }
    if (search) {
        var obj = JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
        return name ? obj[name] : obj
    }
}

以上示例调用结果：

getParams() // 返回：{id: '94458654'}
getParams('id') // 返回：'94458654'