在JavaScript中，获取URL的查询字符串（query string）值是一个常见的需求，尤其是在Web开发中。以下是几种流行和实用的方法来获取查询字符串值：

1. 使用原生 JavaScript - URLSearchParams

URLSearchParams 是一个内建的浏览器API，它提供了一种简便的方式来获取URL的查询参数。假设URL是这样的：https://example.com/?product=shirt&color=blue。

javascript
// 假设 URL 是 https://example.com/?product=shirt&color=blue
const queryString = window.location.search;

// 使用 URLSearchParams
const params = new URLSearchParams(queryString);

const product = params.get('product'); // 返回 'shirt'
const color = params.get('color'); // 返回 'blue'

这种方法简单直接，且由现代浏览器原生支持。

2. 使用JavaScript手动解析

如果不想使用URLSearchParams或需要更多控制解析过程，也可以手动解析查询字符串：

javascript
function getQueryStringValue(key) {
    const queryString = window.location.search.substring(1); // 获取查询字符串，去掉'?'
    const queries = queryString.split("&"); // 分割成数组

    for (let i = 0; i < queries.length; i++) {
        const pair = queries[i].split('='); // 分割键和值
        if (decodeURIComponent(pair[0]) === key) {
            return decodeURIComponent(pair[1] || ""); // 如果找到对应的键，则返回解码后的值
        }
    }
    return null; // 如果没有找到键，返回null
}

// 示例
const product = getQueryStringValue('product'); // 返回 'shirt'
const color = getQueryStringValue('color'); // 返回 'blue'

3. 使用第三方库

对于一些复杂的URL解析需求，或者为了代码的简洁性，可以使用第三方库如query-string。

javascript
// 首先需要安装 query-string 库
// npm install query-string

import queryString from 'query-string';

const parsed = queryString.parse(window.location.search);
const product = parsed.product; // 返回 'shirt'
const color = parsed.color; // 返回 'blue'

这种方法适用于复杂的查询字符串解析，或者当项目已经引入了这种库的情况。

结论

根据项目需求和浏览器兼容性选择合适的方法。URLSearchParams 提供了一个简单且现代的API来处理查询字符串，而手动解析给予了更多的控制权。第三方库则是在处理更复杂的情况或求简洁代码时的优选。

Use URLSearchParams to get parameters from the query string.

For example:

shell
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Update: Jan-2022

Using Proxy() is faster than using Object.fromEntries() and better supported.

This approach comes with the caveat that you can no longer iterate over query parameters.

shell
const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

Update: June-2021

For a specific case when you need all query params:

shell
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

Update: Sep-2018

You can use URLSearchParams which is simple and has decent (but not complete) browser support.

shell
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Original

You don't need jQuery for that purpose. You can use just some pure JavaScript:

shell
function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Usage:

shell
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

NOTE: If a parameter is present several times (?foo=lorem&foo=ipsum), you will get the first value (lorem). There is no standard about this and usages vary, see for example this question: Authoritative position of duplicate HTTP GET query keys.

NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, add 'i' modifier to RegExp

NOTE: If you're getting a no-useless-escape eslint error, you can replace name = name.replace(/[\[\]]/g, '\\$&'); with name = name.replace(/[[\]]/g, '\\$&').

---

This is an update based on the new URLSearchParams specs to achieve the same result more succinctly. See answer titled "URLSearchParams" below.

Some of the solutions posted here are inefficient. Repeating the regular expression search every time the script needs to access a parameter is completely unnecessary, one single function to split up the parameters into an associative-array style object is enough. If you're not working with the HTML 5 History API, this is only necessary once per page load. The other suggestions here also fail to decode the URL correctly.

shell
var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);
  
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

Example querystring:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Result:

shell
 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

This could easily be improved upon to handle array-style query strings too. An example of this is here, but since array-style parameters aren't defined in RFC 3986 I won't pollute this answer with the source code. For those interested in a "polluted" version, look at campbeln's answer below.

Also, as pointed out in the comments, ; is a legal delimiter for key=value pairs. It would require a more complicated regex to handle ; or &, which I think is unnecessary because it's rare that ; is used and I would say even more unlikely that both would be used. If you need to support ; instead of &, just swap them in the regex.

---

If you're using a server-side preprocessing language, you might want to use its native JSON functions to do the heavy lifting for you. For example, in PHP you can write:

shell
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Much simpler!

#UPDATED

A new capability would be to retrieve repeated params as following myparam=1&myparam=2. There is not a specification, however, most of the current approaches follow the generation of an array.

shell
myparam = ["1", "2"]

So, this is the approach to manage it:

shell
let urlParams = {};
(window.onpopstate = function () {
    let match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) {
            return decodeURIComponent(s.replace(pl, " "));
        },
        query = window.location.search.substring(1);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

ES2015 (ES6)

shell
getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

---

Without jQuery

shell
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

With an URL like ?topic=123&name=query+string, the following will return:

shell
qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

---

Google method

Tearing Google's code I found the method they use: getUrlParameters

shell
function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

It is obfuscated, but it is understandable. It does not work because some variables are undefined.

They start to look for parameters on the url from ? and also from the hash #. Then for each parameter they split in the equal sign b[f][p]("=") (which looks like indexOf, they use the position of the char to get the key/value). Having it split they check whether the parameter has a value or not, if it has then they store the value of d, otherwise they just continue.

In the end the object d is returned, handling escaping and the + sign. This object is just like mine, it has the same behavior.

---

My method as a jQuery plugin

shell
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);
            
            if (param.length !== 2)
                continue;
            
            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }
            
        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

Usage

shell
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

---

Performance test (split method against regex method) (jsPerf)

Preparation code: methods declaration

Split test code

shell
var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Regex test code

shell
var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Testing in Firefox 4.0 x86 on Windows Server 2008 R2 / 7 x64

• Split method: 144,780 ±2.17% fastest
• Regex method: 13,891 ±0.85% | 90% slower

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ and Chrome 49+ support the URLSearchParams API:

• Chrome Announcement and details
• Opera Announcement and details
• Firefox Announcement and details

There is a google-suggested URLSearchParams polyfill for the stable versions of IE.

It is not standardized by W3C, but it is a living standard by WhatWG.

You can use it on location:

shell
const params = new URLSearchParams(location.search);

or

shell
const params = (new URL(location)).searchParams;

Or of course on any URL:

shell
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);

You can get params also using a shorthand .searchParams property on the URL object, like this:

shell
const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

You read/set parameters through the get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. You can also iterate over all values for (let p of params) {}.

A reference implementation and a sample page are available for auditing and testing.

Improved version of Artem Barger's answer:

shell
function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

For more information on improvement see: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

在JavaScript中获取URL的查询字符串（query string）值可以通过不同的方法完成，以下是两种常用的方法：

1. 使用 window.location.search 属性

这是获取当前页面URL查询字符串的最直接方法。window.location.search 会返回URL中 ?之后的字符串，包括 ?本身。

例子：

javascript
// 假设当前URL是: http://example.com/?product=shirt&color=blue&size=medium

// 获取查询字符串
var queryString = window.location.search;
console.log(queryString); // 输出: ?product=shirt&color=blue&size=medium

// 去除开头的问号
var query = queryString.substring(1);
console.log(query); // 输出: product=shirt&color=blue&size=medium

2. 使用 URLSearchParams 对象

URLSearchParams 是一个实用的Web API，它提供了一系列的方法来操作URL中的查询字符串。我们可以结合 window.location.search 来使用它。

例子：

javascript
// 继续假设当前URL是: http://example.com/?product=shirt&color=blue&size=medium

// 创建URLSearchParams实例
var searchParams = new URLSearchParams(window.location.search);

// 获取特定的查询参数
var product = searchParams.get('product');
console.log(product); // 输出: shirt

var color = searchParams.get('color');
console.log(color); // 输出: blue

var size = searchParams.get('size');
console.log(size); // 输出: medium

处理不在当前页面的URL

如果需要解析的URL不是当前页面的URL，可以直接创建一个 URL对象，并传递该URL作为参数，然后再使用 URLSearchParams。

例子：

javascript
// 假设有另外一个URL
var someUrl = 'http://example.com/?product=shoes&color=red&size=large';

// 创建URL对象
var url = new URL(someUrl);

// 创建URLSearchParams实例
var searchParams = new URLSearchParams(url.search);

// 获取特定的查询参数
var product = searchParams.get('product');
console.log(product); // 输出: shoes

var color = searchParams.get('color');
console.log(color); // 输出: red

var size = searchParams.get('size');
console.log(size); // 输出: large

URLSearchParams 提供的方法还有很多，如 set, delete, append 等，可以非常方便地处理查询字符串。使用 URLSearchParams 是现代浏览器推荐的方式，因为它提供了直接和简洁的API来操作查询字符串。

以上就是在JavaScript中获取查询字符串的两种方法。