รับค่าสตริงการสืบค้นใน JavaScript

ใน URL ค่าสตริงการสืบค้นมักจะให้ข้อมูลเกี่ยวกับคำขอ เช่น พารามิเตอร์สำหรับการค้นหาหรือ ID ของวัตถุที่คุณกำลังใช้ หากมีการจัดการตรรกะทางธุรกิจหรือคำขอใดๆ ในส่วนหน้า สิ่งสำคัญคือต้องทราบวิธีดึงค่าสตริงการสืบค้นจาก URL มีหลายวิธีในการบรรลุเป้าหมาย ซึ่งเราจะเห็นบางส่วนที่นี่

URLSearchพารามิเตอร์

พื้นที่ URLSearchParams อินเทอร์เฟซได้รับการสนับสนุนโดยเบราว์เซอร์เวอร์ชันหลักทั้งหมด ยกเว้น IE 11 ซึ่งทำงานโดยแยกวิเคราะห์สตริงการสืบค้นของ URL และจัดเตรียมวิธีในการเข้าถึงค่าต่างๆ ตัวอย่างเช่น:

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

ข้อเสียประการหนึ่งของอินเทอร์เฟซนี้คือ คุณต้องส่งผ่านเฉพาะสตริงการสืบค้นของ URL หากคุณกำลังทำงานกับ URL ของเบราว์เซอร์ปัจจุบัน ทำได้ง่ายเพราะคุณสามารถผ่านได้ window.location.search. หากคุณกำลังทำงานกับ URL อื่น คุณจะต้องแยกวิเคราะห์และส่งสตริงการสืบค้นแยกต่างหาก

หากต้องการแยกวิเคราะห์พารามิเตอร์แบบสอบถามเป็นวัตถุ ให้ใช้ URL.searchParams's .entries() วิธีซึ่งส่งคืน an 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 ที่แยกออกเป็นส่วนๆ ตัวอย่างเช่น:

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