JS獲取URL中參數(shù)值的4種方法

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年12月28日 20:18 本文熱度 723

方法1：現(xiàn)代瀏覽器都支持 URL 和 URLSearchParams 對(duì)象，可以很方便地從URL中提取參數(shù)

// 假設(shè)當(dāng)前URL為 "https://example.com/?name=John&age=30"const url = new URL(window.location.href); // 或者你可以直接傳入一個(gè)URL字符串const name = url.searchParams.get('name'); // "John"const age = url.searchParams.get('age'); // "30"
console.log(name, age);

方法2：使用正則表達(dá)式

可以使用正則表達(dá)式匹配URL參數(shù)，這種方法相對(duì)較低效且較復(fù)雜，但也可以做到。

function getQueryParam(name) {    const regex = new RegExp('[?&]' + name + '=([^&#]*)', 'i');    const results = regex.exec(window.location.href);    return results ? decodeURIComponent(results[1]) : null;}
// 假設(shè)當(dāng)前URL為 "https://example.com/?name=John&age=30"const name = getQueryParam('name'); // "John"const age = getQueryParam('age'); // "30"
console.log(name, age);

方法3：使用 `split` 和 `reduce`

可以通過(guò) split 方法手動(dòng)拆分查詢參數(shù)，并用 reduce 將其轉(zhuǎn)化為對(duì)象。

function getQueryParams() {    return window.location.search        .substring(1) // 去掉 ?        .split('&') // 按 & 拆分        .reduce((params, param) => {            const [key, value] = param.split('=');            params[decodeURIComponent(key)] = decodeURIComponent(value || '');            return params;        }, {});}
// 假設(shè)當(dāng)前URL為 "https://example.com/?name=John&age=30"const params = getQueryParams();const name = params['name']; // "John"const age = params['age']; // "30"
console.log(name, age);

方法4：使用 `location.search` 和自定義函數(shù)

在 location.search 上構(gòu)建自己的解析函數(shù)，此方法比較簡(jiǎn)單。

function getQueryParameter(name) {    const params = new URLSearchParams(location.search);    return params.get(name);}
// 假設(shè)當(dāng)前URL為 "https://example.com/?name=John&age=30"const name = getQueryParameter('name'); // "John"const age = getQueryParameter('age'); // "30"
console.log(name, age);