จะรับพารามิเตอร์ URL ใน JavaScript ได้อย่างไร คำอธิบายโดยละเอียดของ 4 วิธีทั่วไป

ในฐานะนักพัฒนาส่วนหน้า เรามักจะต้องดำเนินการและประมวลผล URL สิ่งที่พบบ่อยที่สุดคือการรับค่าพารามิเตอร์ที่มีอยู่ในลิงก์ URL เพื่อนที่ใช้การพัฒนาเฟรมเวิร์กอาจพบว่าสิ่งนี้ง่ายมาก เนื่องจากเฟรมเวิร์กมีวิธีการมากมายเพื่อให้เรารับพารามิเตอร์ที่มาจากลิงค์ URL ได้อย่างสะดวก แต่บางครั้งเราไม่สามารถพึ่งพาเฟรมเวิร์กได้ และจำเป็นต้องใช้ JS ดั้งเดิมเพื่อรับพารามิเตอร์ นี่เป็นคำถามที่มักพบในการสัมภาษณ์ วันนี้เราจะฉีกโค้ดด้วยมือและใช้ JS ดั้งเดิมเพื่อรับค่าพารามิเตอร์ลิงก์ URL

1. สรุปวิธีการได้มา

มีหลายวิธีในการรับพารามิเตอร์ลิงก์ URL โดยใช้ JS ดั้งเดิม วันนี้เราจะอธิบายวิธีทั่วไปตามลำดับ:

• การใช้การจับคู่แบบปกติ

• โดยใช้วิธีแท็กในตัว การ

• ใช้วิธีแยก

• การใช้ URLSearchParams วิธีที่

2 วิธีการนำไปใช้เฉพาะ

2.1 วิธีการจับคู่ปกติ

นี่เป็นวิธีมาตรฐานมาก ประเด็นสำคัญคือเราต้องเข้าใจนิพจน์ทั่วไป

รหัสจะเป็นดังนี้:

<script>
  //ใช้นิพจน์ทั่วไป ให้ url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  // // ส่งกลับพารามิเตอร์ ฟังก์ชันวัตถุ queryURLParams(url) {
    la pattern = /(w+)=(w+)/ig; //กำหนดนิพจน์ทั่วไป la parames = {}; //กำหนดพารามิเตอร์ object url.replace(pattern, ($, $1, $2) => {
      พารามิเตอร์[$1] = $2;
    -
    พารามิเตอร์ส่งคืน
  -
  console.log (queryURLParams (url))
</script>

จุดเน้นของโค้ดด้านบนคือคำจำกัดความของนิพจน์ทั่วไปและการใช้วิธีการแทนที่

-

$,$ 1 และ $2 แสดงถึงชื่อ=ช้าง ชื่อ ช้าง และอื่นๆ ตามลำดับ คุณสามารถเรียนรู้ได้ด้วยตัวเองเพื่อการใช้งานการแทนที่รวมกับนิพจน์ทั่วไปโดยละเอียดยิ่งขึ้น

ผลการรับรู้:

2.2 วิธีการใช้แท็กนี้

ไม่ค่อยมีคนใช้ เพราะท้ายที่สุดแล้วมันมีความหมายทางเทคโนโลยีสีดำเล็กน้อย หลักการหลักคือการใช้แท็กเพื่อรับคุณลักษณะในตัว เช่น href แฮช การค้นหา และคุณลักษณะอื่นๆ

รหัสจะเป็นดังนี้:

<script>
  ให้ URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
  ฟังก์ชั่น queryURLParams (url) {
    // 1. สร้างแท็ก ให้ link = document.createElement('a');
    link.href = url;
    ให้ searchUrl = link.search.substr(1); // รับสตริงหลังเครื่องหมายคำถาม ให้ hashUrl = link.hash.substr(1); // รับค่าหลัง # la obj = {}; object/ / 2. เก็บ hashUrl ไว้ใน object? obj['HASH'] = hashUrl : null; // #Is มีค่าอยู่เบื้องหลัง la list = searchUrl.split("&");
    สำหรับ (ให้ i = 0; i < list.length; i++) {
      ให้ arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    -
    กลับ obj;
  -
  console.log (queryURLParams (URL))
</script>

ในโค้ดด้านบน แท็กจะถูกสร้างขึ้นก่อน จากนั้นแต่ละส่วนของ url สามารถรับได้ตามคุณสมบัติของแท็ก ซึ่งจริงๆ แล้วค่อนข้างคล้ายกับการข้ามการกำหนดเส้นทางของ Vue เพื่อรับพารามิเตอร์

ผลการรับรู้:

2.3 วิธีแยก

วิธีการนี้ใช้ประโยชน์จากข้อเท็จจริงที่ว่าการแยกสามารถแบ่งสตริงออกเป็นอาร์เรย์ตามอักขระบางตัว และแบ่งแต่ละพารามิเตอร์อย่างชาญฉลาด

รหัสจะเป็นดังนี้:

<script>
  ให้ URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  ฟังก์ชั่น queryURLParams (URL) {
    // const url = location.search; // ในโครงการ คุณสามารถรับสตริงได้โดยตรงหลังอักขระ "?" ใน url ผ่านวิธีการค้นหา ให้ url = URL.split("?")[1];
    ให้ obj = {}; // ประกาศวัตถุพารามิเตอร์ ให้ arr = url.split("&"); // แยกเป็นอาร์เรย์ด้วยเครื่องหมายและสำหรับ (ให้ i = 0; i < arr.length; i++) {
      ให้ arrNew = arr[i].split("="); // แยกเป็นอาร์เรย์ด้วย "=" obj[arrNew[0]] = arrNew[1];
    -
    กลับ obj;
  -
  console.log (queryURLParams (URL))
</script>

หากใช้โค้ดอัปโหลดในโปรเจ็กต์จริง คุณสามารถใช้ location.search เพื่อรับสตริงหลัง "?" ได้โดยตรง เพื่อความสะดวกในการสาธิต การแยกจะใช้เพื่อแบ่งสิ่งต่อไปนี้

ผลการรับรู้:

2.4 วิธี URLSearchParams

วิธี URLSearchParams ช่วยให้เราได้รับพารามิเตอร์ URL อย่างสะดวกสบาย แต่มีปัญหาความเข้ากันได้บางประการ เว็บไซต์อย่างเป็นทางการอธิบายไว้ดังนี้:

อินเทอร์เฟซ URLSearchParams กำหนดวิธีการปฏิบัติบางประการในการประมวลผลสตริงการสืบค้น URL

อินเทอร์เฟซนี้มีวิธีการพิเศษสำหรับเราในการประมวลผลพารามิเตอร์ URL ที่นี่เราจะแนะนำวิธีรับค่าพารามิเตอร์ URL เท่านั้น คุณสามารถดูได้จากเว็บไซต์อย่างเป็นทางการ

รหัสจะเป็นดังนี้:

<script>
  ให้ URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  ฟังก์ชั่น queryURLParams (URL) {
    ให้ url = URL.split("?")[1];
    const urlSearchParams = URLSearchParams ใหม่ (url);
    const params = Object.fromEntries(urlSearchParams.entries());
    ส่งคืนพารามิเตอร์
  -
  console.log (queryURLParams (URL))
</script>

ที่นี่เราใช้โค้ดหลักเพียงสองบรรทัดเพื่อใช้การแยกวิเคราะห์พารามิเตอร์ ควรสังเกตว่า urlSearchParams.entries() ส่งคืนตัววนซ้ำโปรโตคอลการวนซ้ำ ดังนั้นเราจึงจำเป็นต้องใช้เมธอด Object.fromEntries() เพื่อแปลงรายการคู่คีย์-ค่าให้เป็นอ็อบเจ็กต์

เกี่ยวกับโปรโตคอลการวนซ้ำ คุณสามารถดูเว็บไซต์อย่างเป็นทางการ:

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

เพื่อให้บรรลุผล:

ความเข้ากันได้:

คุณจะเห็นว่าอินเทอร์เฟซของเราเข้ากันไม่ได้กับ IE ซึ่งเป็นที่มาของความชั่วร้ายทั้งหมด

สรุป:

มีการแนะนำสี่วิธีที่นี่เพื่อแยกวิเคราะห์ค่าพารามิเตอร์ลิงก์ URL หนึ่งในวิธีที่ใช้กันอย่างแพร่หลายที่สุดคือวิธีแยก ในฐานะดาวรุ่งพุ่งแรง urlSearchParams ค่อยๆ ได้รับการยอมรับจากทุกคน และมีหลายวิธีที่จะทำให้เข้ากันได้กับ IE

[วิดีโอแนะนำที่เกี่ยวข้อง: ส่วนหน้าของเว็บ]

ข้างต้นคือวิธีรับพารามิเตอร์ URL ใน JavaScript สำหรับคำอธิบายโดยละเอียดของวิธีการทั่วไป 4 วิธี โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese สำหรับข้อมูลเพิ่มเติม!