จับคู่ผลลัพธ์ได้ดีขึ้นด้วย String.prototype.matchAll()

Joe Medley

Chrome 73 ขอแนะนำเมธอด String.prototype.matchAll() โดยจะทำงานคล้ายกับ match() แต่แสดงผลตัววนซ้ำที่มีการจับคู่นิพจน์ทั่วไปทั้งหมดในนิพจน์ทั่วไปแบบติดหนึบหรือแบบติดหนึบ วิธีนี้เป็นวิธีง่ายๆ ในการทำซ้ำการจับคู่ที่ตรงกัน โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการเข้าถึงเพื่อจับภาพกลุ่ม

Match() มีปัญหาอะไร

คำตอบสั้นๆ คืออะไร เว้นแต่ว่าคุณพยายามแสดงผลการจับคู่ทั่วโลกด้วยกลุ่มการเก็บข้อมูล นี่คือปริศนาการเขียนโปรแกรมสำหรับคุณ ลองพิจารณาโค้ดต่อไปนี้

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const results = string.match(regex);
console.log(results);
// → ['test1', 'test2']

เรียกใช้ฟังก์ชันนี้ในคอนโซลและสังเกตเห็นว่าระบบแสดงผลอาร์เรย์ที่มีสตริง 'test1' และ 'test2' ถ้านำ g Flag ออกจากนิพจน์ทั่วไปที่ได้รับ จะมีกลุ่มที่มีการจับภาพทั้งหมด แต่ผมได้รับเฉพาะการจับคู่รายการแรก ซึ่งมีลักษณะดังนี้

['test1', 'e', 'st1', '2', index: 0, input: 'test1test2', groups: undefined]

สตริงนี้มีการจับคู่ที่เป็นไปได้รายการที่ 2 ซึ่งขึ้นต้นด้วย 'test2' แต่ฉันไม่มี คราวนี้มาไขปริศนากัน ฉันจะนำกลุ่มที่กำลังแข่งทั้งหมด จากการแข่งขันแต่ละนัดได้อย่างไร คำอธิบายสำหรับข้อเสนอ String.สมัครสมาชิก.matchAll() จะแสดงแนวทางที่เป็นไปได้ 2 วิธี ได้แก่ ผมจะไม่ขออธิบายคำอธิบายเหล่านี้ เพราะหวังว่า คุณคงไม่ต้องการข้อความเหล่านี้อีกแล้ว

String.prototype.matchAll()

ตัวอย่างข้อความอธิบายของ matchAll() จะมีลักษณะอย่างไร ลองดูสิ

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const matches = string.matchAll(regex);
for (const match of matches) {
  console.log(match);
}

สิ่งที่ควรทราบ 2-3 ข้อเกี่ยวกับเรื่องนี้ matchAll() จะแสดงผลการวนซ้ำที่ทำงานได้อย่างสวยงามโดยมีการวนซ้ำ for...of แบบ ซึ่งแตกต่างจาก match() ที่แสดงผลอาร์เรย์ในการค้นหาส่วนกลาง ตัววนซ้ำจะสร้างอาร์เรย์สำหรับการจับคู่แต่ละรายการ รวมถึงกลุ่มจับภาพที่มีตัวเลือกเพิ่มเติมเล็กน้อย ถ้าคุณพิมพ์ใบเสร็จเหล่านี้ไปที่คอนโซล จะมีลักษณะดังนี้

['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]

คุณอาจสังเกตเห็นว่าค่าของการจับคู่แต่ละรายการเป็นอาร์เรย์ในรูปแบบเดียวกับที่ match() แสดงผลสำหรับนิพจน์ทั่วไปที่ไม่ใช่ส่วนกลาง

เนื้อหาโบนัส

ซึ่งมีไว้สำหรับผู้ที่เพิ่งเริ่มใช้นิพจน์ทั่วไปหรือไม่เชี่ยวชาญ คุณอาจสังเกตเห็นผลลัพธ์ของทั้ง match() และ matchAll() (สำหรับการทำซ้ำแต่ละครั้ง) เป็นอาร์เรย์ที่มีพร็อพเพอร์ตี้ที่มีชื่อเพิ่มเติมบางรายการ ขณะเตรียมบทความนี้ เราสังเกตเห็นว่าพร็อพเพอร์ตี้เหล่านี้มีข้อบกพร่องบางอย่างในเอกสารเกี่ยวกับ MDN (ซึ่งฉันได้แก้ไขแล้ว) นี่คือคำอธิบายสั้นๆ

index

ดัชนีของผลลัพธ์แรกในสตริงต้นฉบับ ในตัวอย่างด้านบน test2 เริ่มต้นที่ตำแหน่ง 5 ดังนั้น index จึงมีค่าเป็น 5

input

สตริงทั้งหมดที่ matchAll() เรียกใช้ ในตัวอย่างของฉันคือ 'test1test2'

groups

มีผลลัพธ์ของกลุ่มการบันทึกที่มีชื่อที่ระบุในนิพจน์ทั่วไปของคุณ

บทสรุป

หากมีข้อมูลใดขาดหายไป โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง อ่านข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงล่าสุดของ JavaScript ได้ในการอัปเดตก่อนหน้าหรือในเว็บไซต์ V8