Bagaimana untuk mendapatkan rentetan pertanyaan dalam JavaScript

Dalam artikel pendek ini, kita akan membincangkan beberapa cara berbeza untuk mendapatkan rentetan pertanyaan dalam JavaScript.

Apabila anda menggunakan JavaScript, kadangkala anda perlu mengakses parameter rentetan pertanyaan dalam skrip anda. Tiada cara langsung untuk mencapai ini, kerana tiada fungsi atau kaedah JavaScript terbina dalam yang membolehkan anda mencapainya. Sudah tentu, anda boleh menemui banyak skrip utiliti pihak ketiga yang sesuai dengan keperluan anda, tetapi lebih baik melakukannya menggunakan JavaScript biasa.

Dalam siaran ini, kami akan membincangkan cara membina fungsi tersuai untuk mendapatkan parameter rentetan pertanyaan dalam JavaScript biasa. Kemudian, kami juga akan meneroka antara muka URLSearchParams untuk memahami cara ia berfungsi dan cara ia membantu dengan parameter rentetan pertanyaan. URLSearchParams 接口，以了解它的工作原理以及它如何帮助处理查询字符串参数。

如何在 Vanilla JavaScript 中获取查询字符串

在本节中，我们将了解如何使用普通 JavaScript 获取查询字符串值。

让我们看一下下面的 JavaScript 示例。

function getQueryStringValues(key) {
    var arrParamValues = [];
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for (var i = 0; i < url.length; i++) {
        var arrParamInfo = url[i].split('=');

        if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
            arrParamValues.push(decodeURIComponent(urlparam[1]));
        }
    }

    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}

// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null

我们创建了 getQueryStringValues 函数，您可以使用该函数获取 URL 中可用的查询字符串参数的值。

让我们浏览一下该函数，看看它是如何工作的。

以下代码片段是该函数中最重要的代码片段之一。

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

首先，我们使用 indexOf 方法来查找 ? 字符在 URL 中的位置。接下来，我们使用 slice 方法提取 URL 中的查询字符串部分。最后，我们使用 split 方法通过 & 字符分割查询字符串。因此，url 变量是使用查询字符串参数数组进行初始化的。

接下来，我们循环遍历 url 数组的所有元素。在循环中，我们使用 split 方法通过 = 字符来分割数组值。这样， arrParamInfo 变量就用一个数组进行初始化，其中数组键是参数名称，数组值是参数值。您可以在下面的代码片段中看到这一点。

var arrParamInfo = url[i].split('=');

接下来，我们将它与函数中传递的参数进行比较。如果它与传入的参数匹配，我们会将参数值推送到 arrParamValues 数组中。正如您所看到的，我们还介绍了单个参数和数组参数。

if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
    arrParamValues.push(decodeURIComponent(urlparam[1]));
}

最后，如果 arrParamValues 变量包含值，我们将返回它，否则返回 null 。

return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);

您可以继续使用不同的值测试 getQueryStringValues 函数。

如上面的示例所示，我们使用不同的值调用它，并使用 console.log 函数记录输出。需要注意的是，如果您在 getQueryStringValues 函数中传递的参数作为数组存在于查询字符串中，您将得到一个数组作为响应，并且它将返回该参数的所有值。

URLSearchParams 方式

这是在 JavaScript 中获取查询字符串值的最简单方法之一。 URLSearchParams 接口提供实用方法来处理 URL 的查询字符串。您可以通过“我可以使用吗”来检查浏览器支持情况。

让我们快速看看它是如何工作的。

// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);

使用查询字符串初始化 URLSearchParams 对象后，您就可以使用 URLSearchParams 对象提供的实用方法了。

让我们在本文中介绍一些有用的方法。

get 方法

顾名思义，get方法用于获取查询字符串参数的值。

让我们尝试通过以下示例来理解它。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”

在上面的示例中，我们获取了 keyword 查询字符串参数的值，它将输出搜索文本。

这样就可以使用get方法获取任意查询字符串参数的值。

has 方法

has方法用于检查查询字符串中是否存在参数。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”

在上面的示例中，我们使用了 has 方法来检查不同参数是否存在。

getAll 方法

getAll方法用于获取某个参数多次存在时的所有值。

让我们通过以下示例来检查一下。

// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]

如您所见，当我们使用 getAll

Bagaimana untuk mendapatkan rentetan pertanyaan dalam JavaScript Vanila

Dalam bahagian ini, kita akan melihat cara mendapatkan nilai rentetan pertanyaan menggunakan JavaScript biasa.

Mari kita lihat contoh JavaScript di bawah. rrreee

Kami mencipta fungsi getQueryStringValues yang boleh anda gunakan untuk mendapatkan nilai parameter rentetan pertanyaan yang tersedia dalam URL. 🎜 🎜Mari kita lihat fungsinya dan lihat cara ia berfungsi. 🎜 🎜Coretan kod berikut ialah salah satu coretan kod yang paling penting dalam fungsi ini. 🎜 rrreee 🎜Pertama, kami menggunakan kaedah indexOf untuk mencari kedudukan aksara ? dalam URL. Seterusnya, kami menggunakan kaedah slice untuk mengekstrak bahagian rentetan pertanyaan URL. Akhir sekali, kami menggunakan kaedah split untuk memisahkan rentetan pertanyaan dengan aksara &. Oleh itu, pembolehubah url dimulakan menggunakan tatasusunan parameter rentetan pertanyaan. 🎜 🎜Seterusnya, kami mengulangi semua elemen tatasusunan url. Dalam gelung, kami menggunakan kaedah split untuk membahagikan nilai tatasusunan dengan = aksara. Dengan cara ini, pembolehubah arrParamInfo dimulakan dengan tatasusunan, dengan kunci tatasusunan ialah nama parameter dan nilai tatasusunan ialah nilai parameter. Anda boleh melihat ini dalam coretan kod di bawah. 🎜 rrreee 🎜Seterusnya, kami membandingkannya dengan parameter yang diluluskan dalam fungsi. Jika ia sepadan dengan parameter yang dihantar, kami menolak nilai parameter ke dalam tatasusunan arrParamValues. Seperti yang anda lihat, kami juga memperkenalkan parameter tunggal dan parameter tatasusunan. 🎜 rrreee 🎜Akhir sekali, jika pembolehubah arrParamValues mengandungi nilai, kami akan mengembalikannya, jika tidak null akan dikembalikan. 🎜 rrreee 🎜Anda boleh terus menguji fungsi getQueryStringValues dengan nilai yang berbeza. 🎜 🎜Seperti yang ditunjukkan dalam contoh di atas, kami memanggilnya dengan nilai yang berbeza dan log keluaran menggunakan fungsi console.log. Adalah penting untuk ambil perhatian bahawa jika parameter yang anda hantar dalam fungsi getQueryStringValues terdapat dalam rentetan pertanyaan sebagai tatasusunan, anda akan mendapat tatasusunan sebagai tindak balas dan ia akan mengembalikan semua nilai itu parameter. 🎜 kaedahURLSearchParams🎜 🎜Ini adalah salah satu cara paling mudah untuk mendapatkan nilai rentetan pertanyaan dalam JavaScript. Antara muka URLSearchParams menyediakan kaedah utiliti untuk memproses rentetan pertanyaan URL. Anda boleh menyemak sokongan penyemak imbas melalui "Bolehkah saya menggunakannya?" 🎜 🎜Mari kita lihat cara ia berfungsi. 🎜 rrreee 🎜Selepas memulakan objek URLSearchParams dengan rentetan pertanyaan, anda boleh menggunakan kaedah utiliti yang disediakan oleh objek URLSearchParams. 🎜 🎜Mari kami memperkenalkan beberapa kaedah berguna dalam artikel ini. 🎜

dapatkan kaedah

🎜Seperti namanya, kaedah get digunakan untuk mendapatkan nilai parameter rentetan pertanyaan. 🎜 🎜Mari kita cuba memahaminya dengan contoh berikut. 🎜 rrreee 🎜Dalam contoh di atas, kita mendapat nilai parameter rentetan pertanyaan kata kunci, yang akan mengeluarkan 🎜teks carian🎜. 🎜 🎜Dengan cara ini anda boleh menggunakan kaedah get untuk mendapatkan nilai sebarang parameter rentetan pertanyaan. 🎜

mempunyai kaedah

🎜 Kaedahhas digunakan untuk menyemak sama ada parameter wujud dalam rentetan pertanyaan. 🎜 rrreee 🎜Dalam contoh di atas, kami menggunakan kaedah has untuk menyemak sama ada parameter berbeza wujud. 🎜 Kaedah

getAll

🎜Kaedah getAll digunakan untuk mendapatkan semua nilai parameter apabila ia wujud beberapa kali. 🎜 🎜Mari kita lihat dengan contoh berikut. 🎜 rrreee 🎜Seperti yang anda lihat, apabila kami menggunakan kaedah getAll, ia mengembalikan semua nilai yang dikaitkan dengan parameter tersebut. 🎜 🎜Kesimpulan🎜 🎜Hari ini, kami membincangkan kaedah berbeza yang boleh anda gunakan untuk mendapatkan rentetan pertanyaan dalam JavaScript. Selain JavaScript biasa, kami juga membincangkan cara mendapatkan pembolehubah rentetan pertanyaan menggunakan antara muka 🎜URLSearchParams🎜. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan rentetan pertanyaan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!