ZWH ZONE

JavaScript 取得 URL 的 params

zhiwei. huang -

使用情境

  • 前端需要根據 URL 上的 params 來處理對應的操作
  • 關鍵字：javascript get url params
  • 關鍵字：How can I get query string values in JavaScript?

三種方式筆記

  1. Vanilla JavaScript
  2. URLSearchParams
  3. Proxy

Vanilla JavaScript

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)

URLSearchParams

使用 URLSearchParams，不過此方式可能需要留意下瀏覽器的支援程度 caniuse

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

如果你需要一次取得全部 params 的資料了話，可以使用下面方式：

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

Proxy

使用 Proxy 的效能會比直接使用上面使用 Object.fromEntries() 的效能好一些，可以參考此 JSBEN.CH

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"

參考來源：

stackoverflow how-can-i-get-query-string-values-in-javascript