밧줄.원형검색 (): 오래 전부터 알고 싶었던 방법

tl;dr: String.prototype.search() 는 기본적으로.indexOf()이지만 정규 표현식이 있습니다.IE 4 이후 모든 브라우저에서 지원되지만 ES6는 Symbol.search 를 통해 더욱 강력한 기능을 제공합니다.
나는 자바스크립트를 쓴 지 겨우 18년이 되었다.저는 2002년 어느 때부터 IE6가 왕이었고 Firefox가 방금 발표했는데 크롬은 존재하지 않았습니다.
저는 JavaScript를 쓴 지 20년이 다 되어 갑니다. 저는 문서를 깊이 연구하는 것을 좋아하는 사람입니다. 브라우저에 있는 모든 대상의 사용 가능한 기능, 방법을 배웁니다.하지만 가끔은...때때로, 이렇게 오랜 시간이 지나도, 나는 여전히 매우 오랫동안 존재해 왔지만, 나는 모르는 것들을 발견할 수 있다.
오늘 나는 이런 방법을 발견했다. String.prototype.search()형님, 저는 이 일을 진작에 알았으면 좋겠습니다.

그것의 작용

.search()string 방법은 매우 간단하다. 내가 tl에서 언급한 바와 같이.dr, 기본적으로 .indexOf()이지만 관건적인 차이점이 하나 있습니다. 정규 표현식을 사용합니다!
이것은 the MDN page의 시연이다.문자열에서 첫 번째 공백이 아닌 영숫자 문자를 찾는 방법을 보여줍니다.

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

// any character that is not a word character or whitespace
const regex = /[^\w\s]/g;

console.log(paragraph.search(regex));
// expected output: 43

console.log(paragraph[paragraph.search(regex)]);
// expected output: "."

내가 그것을 보았을 때, 이것은 나를 크게 놀라게 했다.그것이 틀림없이 미치기 때문이 아니라, 나는 그것이 나에게 유용하다는 것을 전혀 몰랐기 때문이다.여러 해 동안 나는 더 무겁고 가독성이 떨어지는 String.prototype.match() 도구로 이런 방법에 대해 수차례 해킹 공격을 하지 않았다.이 방법은 매우 유용하다. 내가 그룹과 이 모든 것을 포획하고 싶을 때, 그것은 나의 최선의 해결 방안이지만, 문자열에서 어떤 모델의 첫 번째 실례를 간단하게 찾을 수 있는 색인 .search(regex) 은 매우 깨끗하다.우선, 적어도 나에게 이곳에서 발생한 일은 명백히 알 수 있지만, .match() 방법은 항상 내가 1분을 기다려야 이해할 수 있다.다른 한편, .match()는 세 가지 반환 값이 있기 때문에 추가로 처리해야 한다.

일치하는 항목이 없으면 반환null

일치하는 항목이 있는 경우

정규 표현식에 전역 로고가 있다면 (/.../g 위의 MDN 예와 같이 모든 일치하는 항목을 포함하는 그룹을 되돌려주고 색인을 가져올 수 없습니다

정규 표현식에 전역 로고가 없으면 index 속성

을 가진 대상을 되돌려줍니다
그래서 .match() 복잡해졌어요.
내가 때때로 사용하는 또 다른 옵션은 RegExp.prototype.exec()이다.전역 로고가 무엇이든 일치하는 항목을 찾을 때 index 속성이 있는 대상을 되돌려주는 것이 장점이지만, 단점은 여러 문자열에서 전역 로고를 실행하려면 이전 일치하는 색인으로부터 검색하기 때문에 조심해야 한다는 것이다.이것은 때때로 유용하지만, 간단한 상황에서는 결코 좋지 않다.
여러분에게 이 점을 알리기 위해 여기에는 병렬 비교가 있습니다.

// old way
const match = paragraph.match(regex)
const index = match ? match.index : -1

// new way
const index = paragraph.search(regex)

몰라요.나는 이런 일에 대해 매우 흥분한다.그렇게 지도 모른다, 아마, 아마...

ES6의 강력한 성능

내가 만난 String.prototype.search()는 좀 익살스러웠다.폴 밀러(Paul Miller)의 멋진 polyfill 라이브러리ES6 Shim의 자술 파일을 보고 있는데, 밑에 있는 the "Caveats" section에서 다음과 같은 것을 발견했다.

• Well-known Symbols
  • In order to make them work cross-realm, these are created with the global Symbol registry via Symbol.for. This does not violate the spec, but it does mean that Symbol.for('Symbol.search') === Symbol.search will be true, which it would not by default in a fresh compliant realm.

만약 이것이 너에게 의미가 없다면, 우리는 30초의 기호 속성반을 만들 것이다.의미가 있으면 다음 절을 건너뛰세요.

기호에 대한 간단한 내레이션

이것은 매우 빠른 개술이 될 것이다. 따라서 만약 기호가 그 후에도 당신에게 큰 의미가 없다면, 나는 구글 검색을 하는 것을 강력히 권장한다. 왜냐하면 이것은 JS (IMHO) 에서 업그레이드하는 데 매우 중요하기 때문이다.
기호는 ECMAScript 2015(ES6)에서 JavaScript를 도입한 새로운 원어 유형입니다.그것들의 배후에는 완전히 유일한 키를 만들어서 대상 속성 이름으로 사용하면 다른 사람들이 나중에 같은 이름을 사용해서 의외로 당신의 속성을 파괴할 수 없다. 특히 공유 대상과 전역 창 속성에서.기호를 사용하기 전에 공유 대상에서 많은 전도 밑줄이 있는 키를 볼 수 있다. 예를 들어 ___myThing 또는 무작위로 생성된 접두사, 예를 들어 142857_myThing를 볼 수 있다.만약 당신이 이런 상황을 만난 적이 없다면 이것은 보기 드문 변두리 사례처럼 보일 수도 있지만, 이것은 JS 역사상 이미 여러 차례 좌절의 근원이 되었다고 믿어라.Symbol('foo')로 생성된 표준 정원 품종 기호는 다른 사람에게 전달하지 않으면 그 누구도 접근할 수 없습니다.그러나 이른바'모두가 알고 있는 기호'가 있어 누구나 사용할 수 있다.위에서 말한 바와 같이, 전역 기호 등록표 Symbol.for() 에 이름을 등록해서 자신의 기호를 만들 수 있지만, 브라우저에서 기호 대상 속성으로 정의한 알려진 기호도 있습니다.그것들은 특수한 속성 이름으로 사용되며, 대상에 일부 기능을 사용합니다.
아마도 가장 유명한 것은 Symbol.iterator 이다. 클래스에 대한 사용자 정의 교체 행위를 정의한 다음 the spread syntax 과 [for... of 순환] 을 사용하여 대상을 교체할 수 있다.얼마 전에 ES6 교체기에 관한 기사와 생성기와의 관계를 썼는데, 이 화제에 관심이 있다면 (깊이 연구하면 미친 듯이 변할 것이다)

JavaScript 교체 프로토콜 및 적용 방법

켄 베로스・ 2018년 12월 27일・ 12분 읽기

#javascript #es2015 #es6 #intermediate

좋아, 우리 모두가 적어도 다음 이야기를 이해할 수 있는 충분한 이해가 있기를 바란다.

이야기로 돌아가다

ES6 Shim의 주의사항 부분을 읽은 뒤 내 질문은 "도대체 Symbol.search는 무엇에 쓰는 것인가?"나는 이전에 이 특별한 유명한 부호를 본 적이 없어서 the MDN page on Symbol.search 를 읽었는데 반대로 또 나로 하여금 찾게 했다String.prototype.search.
나는 여기에서 이미 약간의 수다를 떨었기 때문에 빠르게 정리해 보자. 밑줄은 네가 myString.seach(x)를 호출할 때 엔진이 네가 보낸 물건x이 키[Symbol.search]에 정의된 방법이 있는지 검사하는 것이다.없으면, 호출 RegExp 을 통해 new RegExp(x) 로 변환을 시도합니다. 이것은 문자열에만 적용됩니다.
(방주: MDN 페이지는 여기에 오도성이 있습니다. "RegExp 대상이 아닌 RegExp를 전달하면 새로운 RegExp(RegExp)가 있는 RegExp로 은밀하게 변환됩니다."그러나 우리가 다음에 보듯이 이것은 엄격한 의미의 사실이 아니다.[Symbol.search] 속성이 있는 객체를 전달하면 해당 객체가 RegExp로 변환되지 않습니다.
이것은 사용자 정의 문자열 검색 함수를 작성해서 대상에 포장할 수 있다는 것을 의미한다.이것은 함수에 항상 문자열을 전달할 수 있기 때문에 작아 보일 수 있습니다. 이것은 당연히 정확합니다.그러나 문법 방면의 일부 것들은 나로 하여금 매우 좋다고 느끼게 한다.

// Find the index of the first character following a string like:
//    "Name:\t"
const nameFinder = {
  [Symbol.search](s) {
    const result = /Name:\s*/.exec(s)
    if (result) {
      const {0: label, index} = result
      return index + label.length
    }
    else {
      return -1
    }
  }
}

// imagine this was read in from a file
const doc = `Customer Information
ID: 11223344
Name:   John Smith
Address:    123 Main Street
...`

const customerNameStart = doc.search(nameFinder)
const customerName = doc.slice(customerNameStart, doc.indexOf('\n', customerNameStart))

하나의 노드 스크립트에서 고객 정보 파일 디렉터리를 순환해서 그들의 이름을 추출하려고 시도하고, 매번 같은 검색 대상을 반복해서 사용하며, 심지어는 이름 검색기와 다른 필드의 유사 검색기를 하나의 단독 모듈에 저장하고 가져오려고 시도한다.나는 그것이 매우 깔끔할 것이라고 생각한다.스케줄러:나만?

결론

솔직히 말해서, 나는 이것이 슈퍼 혁명이나 그 어떤 것도 아니라는 것을 깨달았다. 그것은 많은 업무 절차를 바꾸지 않을 것이다.하지만 내게는 중요하지 않다.나에게 있어서 가장 중요한 것은 어떤 공구가 사용할 수 있는지 아는 것이다.나는 언제 내가 위와 같은 고객 검색 대상을 사용할지 정말 모르겠지만, 나는 이것이 매우 멋진 선택이라고 생각한다.이제 알았어. 만약 내가 진정으로 유용한 상황을 만났다면, 나는 그것을 머릿속에 기억할 거야.이것은 나의 공용사업 허리띠에 있는 또 다른 바탈랑이다.
송이경(신지현): 그리고, 난 그냥 이런 원편이 정말 멋있다고 생각했어.😎)

미주

만약 네가 이것들을 읽었다면, 고마워!나는 이것이 리키 시장이라는 것을 알고 있다. 나는 내가 아는 대부분의 개발자들보다 이런 작은 일에 대해 더욱 흥분한다.하지만 이 글에 흥분하면 댓글로 알려주시거나 DM을 주세요!