這篇文章主要介紹“JavaScript中怎么獲取URL參數(shù)”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript中怎么獲取URL參數(shù)”文章能幫助大家解決問題。

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設計、普寧網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1. 獲取方式總結

利用原生JS獲取URL鏈接參數(shù)的方法也有好幾種，今天我們依次來講解常見的幾種：

• 通過正則匹配的方式

• 利用a標簽內置方法

• 利用split方法分割法

• 使用URLSearchParams方法

2. 具體實現(xiàn)方法

2.1 正則匹配法

這是非常中規(guī)中舉的一種方法，重點是要求我們要懂正則表達式。

代碼如下：

上段代碼中重點是正則表達式的定義以及replace方法的使用,其中、1、$2分別代表name=elephant、name、elephant，以此類推。replace結合正則更加詳細的使用方法可以自行下去學習。

實現(xiàn)效果：

2.2 利用a標簽

這種方法較少人使用，因為畢竟有點黑科技的意思在里面。它的原理主要就是利用了a標簽得到一些內置屬性，如href、hash、search等屬性。

代碼如下：

上段代碼中先創(chuàng)建了一個a標簽，然后就可以根據(jù)a標簽的屬性分別得到url的各個部分了，這其實和Vue的路由跳轉獲取參數(shù)有點類似。

實現(xiàn)效果：

2.3 split分割法

該種方法利用了split可以以某個字符講字符串分割為數(shù)組的特點，巧妙地將各個參數(shù)分割出來。

代碼如下：

上傳代碼中如果在實際項目中，可以直接利用location.search獲取“?”后面的字符串，這里為了方便演示，所以利用split分割了以下。

實現(xiàn)效果：

2.4 URLSearchParams方法

URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù)，但是存在一定的兼容性問題，官網(wǎng)的解釋如下：

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。

該接口提供了非常的的方法讓我們來處理URL參數(shù)，這里我們只介紹如何獲取URL參數(shù)值，更加詳細的使用方法大家可以參考官網(wǎng)。

代碼如下：

這里我們基本上只用了兩行主要代碼就實現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個迭代協(xié)議iterator，所以我們需要利用Object.fromEntries()方法將把鍵值對列表轉換為一個對象。

關于迭代協(xié)議，大家可以參考官網(wǎng)：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

實現(xiàn)效果：

兼容性：

可以看到我們這個接口不兼容萬惡之源的IE。

關于“JavaScript中怎么獲取URL參數(shù)”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。