JavaScript獲取當前頁面url參數(shù)的方法詳解

更新時間：2025年03月07日 08:42:43 作者：yqcoder

這篇文章主要為大家詳細介紹了前端獲取當前頁面url參數(shù)的一些常見方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

一、使用 URLSearchParams（現(xiàn)代瀏覽器支持）

URLSearchParams 是 JavaScript 提供的一個內(nèi)置對象，用于處理 URL 的查詢字符串，它提供了一系列方便的方法來獲取、設(shè)置和刪除查詢參數(shù)。

// 獲取當前頁面的 URL 參數(shù)
const queryString = window.location.search;
// 創(chuàng)建 URLSearchParams 對象
const urlParams = new URLSearchParams(queryString);
// 獲取特定參數(shù)的值
const paramValue = urlParams.get("paramName");
console.log(paramValue);
// 遍歷所有參數(shù)
urlParams.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

二、手動解析查詢字符串

手動解析查詢字符串是一種兼容性較好的方法，通過字符串的分割和處理來獲取參數(shù)。

function getUrlParams() {
  const queryString = window.location.search.slice(1); // 去除問號
  const params = {};
  if (queryString) {
    const paramPairs = queryString.split("&");
    paramPairs.forEach((pair) => {
      const [key, value] = pair.split("=");
      if (key) {
        params[key] = decodeURIComponent(value || "");
      }
    });
  }
  return params;
}
// 使用示例
const allParams = getUrlParams();
const specificParam = allParams["paramName"];
console.log(specificParam);

三、在單頁面應用（SPA）中使用路由庫獲取參數(shù)

在基于 Vue.js、React.js 等框架構(gòu)建的單頁面應用中，通常會使用路由庫來管理頁面導航，這些路由庫也提供了方便的方法來獲取 URL 參數(shù)。

1. Vue.js 示例（使用 Vue Router）

<template>
  <div>
    <p>參數(shù)值: {{ $route.query.paramName }}</p>
  </div>
</template>
<script>
export default {
  mounted() {
    const paramValue = this.$route.query.paramName;
    console.log(paramValue);
  },
};
</script>

2. React.js 示例（使用 React Router）

import { useSearchParams } from "react-router-dom";
function MyComponent() {
  const [searchParams] = useSearchParams();
  const paramValue = searchParams.get("paramName");
  return (
    <div>
      <p>參數(shù)值: {paramValue}</p>
    </div>
  );
}
export default MyComponent;

四、方法擴展

下面小編為大家整理了JavaScript獲取當前頁面url的各類參數(shù)的方法，希望對大家有所幫助

Location 對象

Location 對象包含有關(guān)當前 URL 的信息

Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問

Location的各種屬性：

window.location.hash => 設(shè)置或返回從井號 (#) 開始的 URL（錨）
window.location.host => 設(shè)置或返回主機名和當前 URL 的端口號
window.location.hostname => 設(shè)置或返回當前 URL 的主機名
window.location.href => 設(shè)置或返回完整的 URL
window.location.pathname => 設(shè)置或返回當前 URL 的路徑部分
window.location.port => 設(shè)置或返回當前 URL 的端口號
window.location.protocal => 設(shè)置或返回當前 URL 的協(xié)議
window.location.search => 設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）

方法一：

// 根據(jù)參數(shù)名獲取url中的參數(shù)
function getQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    const urlObj = window.location;
    var r = urlObj.href.indexOf('#') > -1 ? urlObj.hash.split("?")[1].match(reg) : urlObj.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}
 
alert(getQueryString("參數(shù)名稱"));

方法二：

// 根據(jù)參數(shù)名獲取url中的參數(shù)
function GetQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); //獲取url中"?"符后的字符串并正則匹配
  var context = ""; 
  if (r != null) 
     context = r[2]; 
  reg = null; 
  r = null; 
  return context == null || context == "" || context == "undefined" ? "" : context; 
}
// 調(diào)用
    var 參數(shù)1 = GetQueryString['參數(shù)1'];
    var 參數(shù)2 = GetQueryString['參數(shù)2'];
    var 參數(shù)3 = GetQueryString['參數(shù)3'];

方法三：

// 根據(jù)參數(shù)名獲取url中的參數(shù)
function GetRequest() {
    var url = location.search; //獲取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
// 調(diào)用
    var Request = new Object();
    Request = GetRequest();
    var 參數(shù)1,參數(shù)2,參數(shù)3,參數(shù)N;
    參數(shù)1 = Request['參數(shù)1'];
    參數(shù)2 = Request['參數(shù)2'];
    參數(shù)3 = Request['參數(shù)3'];

到此這篇關(guān)于JavaScript獲取當前頁面url參數(shù)的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript頁面url參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: