چگونه می توان مقادیر رشته کوئری را در جاوا اسکریپت دریافت کرد؟

سوال

آیا راهی بدون پلاگین برای بازیابی مقادیر رشته کوئری از طریق jQuery (یا بدون آن) وجود دارد؟

اگر چنین است، چگونه؟ اگر نه، آیا افزونه ای وجود دارد که بتواند این کار را انجام دهد؟

پاسخ

استفاده از ()Proxy نسبت به استفاده از ()Object.fromEntries سریع تر است و بهتر پشتیبانی می شود.

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"

برای یک مورد خاص که به تمام پارامتر های پرس و جو نیاز دارید

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

می توانید از URLSearchParams استفاده کنید که ساده است و از مرورگر در حد مناسب (اما نه کامل) پشتیبانی می کند.

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

اصلی

برای این منظور به jQuery نیاز ندارید. شما می توانید فقط از مقداری جاوا اسکریپت خالص استفاده کنید:

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, ' '));
}

استفاده

// 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)

توجه

اگر یک پارامتر چندین بار وجود داشته باشد ( ?foo=lorem&foo=ipsum)، اولین مقدار (lorem) را دریافت خواهید کرد. هیچ استانداردی در مورد این وجود ندارد و موارد استفاده متفاوت است، به عنوان مثال به این سوال نگاه کنید: موقعیت معتبر کلید های جستجوی تکراری HTTP GET.

توجه: تابع به حروف بزرگ و کوچک حساس است. اگر نام پارامتر حساس به حروف بزرگ را ترجیح می دهید، اصلاح کننده ‘i’ را به RegExp اضافه کنید.

اگر خطای no-less-escape eslint دریافت می‌کنید، می‌توانید name = name.replace(/[\[\]]/g, را جایگزین name = name.replace(/[[\]]/g, ‘\\$&’) کنید.

برای رسیدن به موفقیت در دنیای برنامه نویسی، کافیه مسیر درست رو پیش بری. برای وارد شدن به مسیر کارآموزی فرانت اند کلیک کن.

مقالات مرتبط:

آموزش کامل Postman (ابزار تست API) مهاجرت کاری برنامه نویسی + ۸ کشور برتر برای مهاجرت 7 مورد از سخت ترین زبان های برنامه نویسی دنیا چگونه یک آرایه جاوا اسکریپت را تصادفی (در هم ریخته) کنیم؟