rl 解析

  const urlSearchParams = new URLSearchParams(window.location.search);
  const queryParams = Object.fromEntries(urlSearchParams.entries());
  console.log(queryParams);//成功轉(zhuǎn)換成對象

Url 解析 知道query中的key直接獲取對應(yīng)的value

  const urlSearchParams = new URLSearchParams(window.location.search);
  const value = urlSearchParams.get("a");
  console.log(value);

家好，我是大澈！

本文約 600+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質(zhì)代碼片段。

今天分享一段優(yōu)質(zhì) JS 代碼片段，從而比以往更簡單的從 URL 中獲取查詢參數(shù)。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！

const getQueryByName = (name) => {
  const query = new URLSearchParams(location.search)
  return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null

分享原因

這段代碼通過 URLSearchParams 對象簡化了從 URL 中獲取查詢參數(shù)的過程。

通過這種方法，可以更方便地在 JavaScript 中解析和獲取 URL 查詢參數(shù)，特別適用于處理需要從 URL 中提取參數(shù)的場景，比如讀取用戶在網(wǎng)頁中的輸入或搜索關(guān)鍵字等。

這是項目中一個很常見的操作，之前我們經(jīng)常會使用 正則表達(dá)式 或者 拆分字符串 來完成，現(xiàn)在有了更簡單的方式！

代碼解析

1. const query = new URLSearchParams(location.search);

創(chuàng)建 URLSearchParams 對象。

URLSearchParams 是 Web API 的一部分，用于操作 URL 的查詢字符串。

location.search 返回當(dāng)前 URL 的查詢字符串（例如 ?name=value&key=value）。

URLSearchParams 對象將其解析為一個可以操作的查詢參數(shù)對象。

2. decodeURIComponent(query.get(name));

query.get(name) 方法從查詢參數(shù)對象中獲取名稱為 name 的參數(shù)值。

decodeURIComponent 用于對參數(shù)值進(jìn)行解碼，以確保返回的值是一個人類可讀的字符串，避免 URL 編碼帶來的問題（例如 %20 代表空格）。

- end -