String.prototype.matchAll()을 통한 일치 결과 개선

Joe Medley
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 플래그를 삭제하면 모든 캡처 그룹을 얻지만 첫 번째 일치 항목만 가져옵니다. 상태 메시지가 표시됩니다.

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

이 문자열에는 'test2'로 시작하는 두 번째 가능한 일치 항목이 포함되어 있지만 여기에는 없습니다. 이제 퍼즐을 풀어 보겠습니다. 각 일치 항목의 캡처 그룹을 모두 가져오려면 어떻게 해야 할까요? String.prototype.matchAll() 제안에 관한 설명에는 가능한 두 가지 접근 방식이 나와 있습니다. 더 이상 필요하지 않을 것이기 때문에 설명하지 않겠습니다

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);
}

이와 관련해 몇 가지 유의해야 할 사항이 있습니다. 전역 검색에서 배열을 반환하는 match()와 달리 matchAll()for...of 루프와 원활하게 작동하는 반복자를 반환합니다. 반복자는 몇 가지 추가 항목이 있는 캡처 그룹을 포함하여 각 일치 항목에 대해 배열을 생성합니다. 콘솔에 출력하면 다음과 같이 표시됩니다.

['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
정규 표현식에 지정된 이름이 지정된 캡처 그룹의 결과를 포함합니다.

결론

놓친 부분이 있다면 아래 댓글로 알려주세요. 이전 업데이트 또는 V8 웹사이트에서 JavaScript의 최근 변경사항에 관한 자세한 내용을 확인할 수 있습니다.