জাভাস্ক্রিপ্টে ক্যোয়ারী স্ট্রিং মান পান

সময় স্ট্যাম্প: 21 জুলাই, 2022 12:22 এএম

একটি URL-এ, ক্যোয়ারী স্ট্রিং মান প্রায়ই অনুরোধ সম্পর্কে তথ্য প্রদান করে, যেমন একটি অনুসন্ধানের প্যারামিটার বা আপনি ব্যবহার করছেন এমন একটি বস্তুর ID। যদি কোনও ব্যবসা বা অনুরোধের যুক্তি ফ্রন্টএন্ডে পরিচালনা করা হয়, তাহলে URL থেকে ক্যোয়ারী স্ট্রিং মানগুলি কীভাবে পুনরুদ্ধার করা যায় তা জানা গুরুত্বপূর্ণ। এটি অর্জন করার জন্য বেশ কয়েকটি উপায় রয়েছে, যার কয়েকটি আমরা এখানে দেখব।

URLSearchParams

সার্জারির URLSearchParams ইন্টারফেসটি IE 11 ব্যতীত সমস্ত প্রধান ব্রাউজার সংস্করণ দ্বারা সমর্থিত। এটি একটি URL এর ক্যোয়ারী স্ট্রিং পার্স করে এবং মানগুলি অ্যাক্সেস করার উপায় প্রদান করে কাজ করে। উদাহরণ স্বরূপ:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

এই ইন্টারফেসের একটি ডাউনসাইড হল যে আপনাকে এটিকে শুধুমাত্র একটি URL এর ক্যোয়ারী স্ট্রিং পাস করতে হবে। আপনি যদি বর্তমান ব্রাউজার ইউআরএল নিয়ে কাজ করেন, তাহলে এটি করা সহজ কারণ আপনি পাস করতে পারেন window.location.search. আপনি যদি অন্য কোন URL এর সাথে কাজ করেন, তাহলে আপনাকে আলাদাভাবে ক্যোয়ারী স্ট্রিংটি পার্স আউট করতে হবে এবং পাস করতে হবে।

একটি বস্তুর মধ্যে ক্যোয়ারী পরামিতি পার্স করতে, ব্যবহার করুন URL.searchParamsএর .entries() পদ্ধতি, যা একটি প্রদান করে Iterator কী/মান জোড়া, এবং Object.fromEntries এটিকে একটি বস্তুতে রূপান্তর করতে।

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

URL অবজেক্ট

সার্জারির URL API IE 11 ব্যতীত সমস্ত প্রধান ব্রাউজার সংস্করণ দ্বারা সমর্থিত। এটি URL গুলিকে পার্স করার আরও নমনীয় উপায় অফার করে এবং এটি কোয়েরি স্ট্রিং মানগুলি অ্যাক্সেস করার একটি উপায়ও প্রদান করে৷ উদাহরণ স্বরূপ:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams দ্বারা ফেরত দৃষ্টান্ত বস্তুর একই ধরনের URLSearchParams.

সার্জারির url উপরের অবজেক্টটিতে ইউআরএলের সমস্ত অংশগুলিকে ভাগ করে ভাগ করা হয়েছে। উদাহরণ স্বরূপ:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

বিশুদ্ধ জাভাস্ক্রিপ্ট

যদি কোনো কারণে আপনি উপরের API গুলি অ্যাক্সেস করতে না পারেন বা পার্সিংয়ের উপর আরও নিয়ন্ত্রণ করতে চান তবে আপনি একটি বস্তুর মধ্যে ক্যোয়ারী স্ট্রিং পার্স করতে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

বিঃদ্রঃ: প্লেইন জেএস-এ ক্যোয়ারী প্যারামগুলি পার্স করার অনেক উপায় আছে, কিছু অন্যদের তুলনায় আরও জটিল (এবং শক্তিশালী)। এটি শুধুমাত্র একটি উপায়, এবং থেকে অভিযোজিত হয়েছে এই সারাংশ.

তারপরে আমরা এই প্লেইন JS ফাংশনটি ব্যবহার করতে পারি একটি একক ক্যোয়ারী প্যারামকে একটি স্ট্রিংয়ে পার্স করতে:

getQueryParams('https://stackabuse.com/search?q=node&page=2')

সময় স্ট্যাম্প:

থেকে আরো Stackabuse