Javascript 如何获取 query 字符串值？

在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来处理查询字符串，而手动解析给予了更多的控制权。第三方库则是在处理更复杂的情况或求简洁代码时的优选。

在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中获取查询字符串的两种方法。