קבל ערכי מחרוזת שאילתות ב-JavaScript

חותמת זמן: 21 ביולי 2022 12:22

בכתובת URL, ערכי מחרוזת שאילתה מספקים לעתים קרובות מידע על הבקשה, כמו פרמטרים לחיפוש או המזהה של אובייקט שבו אתה משתמש. אם כל אחד מהלוגיקה העסקית או הבקשה מטופל ב-frontend, חשוב לדעת כיצד לאחזר את ערכי מחרוזת השאילתה מכתובת האתר. ישנן מספר דרכים להשיג זאת, כמה מהן נראה כאן.

URLSearchParams

אל האני URLSearchParams הממשק נתמך על ידי כל גרסאות הדפדפן העיקריות מלבד IE 11. הוא פועל על ידי ניתוח מחרוזת השאילתה של כתובת URL ומתן דרך לגשת לערכים. לדוגמה:

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

אחד החסרונות של הממשק הזה הוא שעליך להעביר לו רק את מחרוזת השאילתה של כתובת אתר. אם אתה עובד עם כתובת האתר הנוכחית של הדפדפן, קל לעשות זאת מכיוון שאתה יכול פשוט לעבור window.location.search. אם אתה עובד עם כל כתובת אתר אחרת, תצטרך לנתח ולהעביר את מחרוזת השאילתה בנפרד.

כדי לנתח את פרמטרי השאילתה לאובייקט, השתמש URL.searchParams's .entries() שיטה, שמחזירה Iterator של זוגות מפתח/ערך, ו Object.fromEntries להמיר אותו לאובייקט.

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

אובייקט כתובת אתר

אל האני URL API נתמך גם על ידי כל גרסאות הדפדפן העיקריות מלבד IE 11. הוא מציע דרך גמישה יותר לנתח כתובות אתרים, והוא גם מספק דרך לגשת לערכי מחרוזת השאילתה. לדוגמה:

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;

JavaScript טהור

אם מסיבה כלשהי אינך יכול לגשת לממשקי ה-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 רגיל, חלקן מסובכות יותר (וגם חזקות) מאחרות. זו רק דרך אחת, והותאמה מ תמצית זו.

לאחר מכן נוכל להשתמש בפונקציית JS הפשוטה הזו כדי לנתח פראם של שאילתה בודדת למחרוזת:

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

בול זמן:

עוד מ Stackabuse