최근에 Alibaba 프런트엔드 인터뷰 질문을 검색했는데 그 중 하나가 JavaScript의 replacement() 메서드 사용과 관련이 있었습니다. 원래 질문은 다음과 같습니다.
“다음 기능이 무엇인지 말해 보세요. 빈칸에는 무엇을 채워야 할까요?”
// define (function (window) { function fn(str) { this.str = str; } fn.prototype.format = function () { var arg = ______; return this.str.replace(_______, function (a, b) { return arg[b] || ''; }); } window.fn = fn; })(window); // use (function(){ var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>'); console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); })();
분석 과정은 다음과 같습니다(번호를 매기는 것이 좋을 것 같은 느낌, 개인적으로는 더 정리된 것 같습니다)
1. 이 질문에는 익명 함수, 프로토타입 등과 같은 다른 지식 포인트도 포함되어 있지만 이 토론의 초점은 아닙니다.
2. 질문에 따르면 이 질문의 소스 코드가 템플릿 엔진 작성과 유사하다는 것을 알 수 있습니다. 템플릿의 '{1}'과 같은 자리 표시자를 전달된 매개변수로 바꿉니다. 따라서 arg는 인수여야 합니다. 하지만! ! ! arg는 배열이 아니라 배열과 유사한 객체이기 때문에(이해하지 못하는 경우 직접 Google에 검색해 볼 수 있습니다(u_u)). 따라서 몇 가지 변환을 수행해야 합니다.
3. 등호 오른쪽이 첫 번째 빈 답입니다. 너무 많이 말하면 두 번째 공간이 우리 논의의 초점입니다 ~~~~~~우리는 두 번째 공간이 정규 표현식을 통해 자리 표시자를 찾고 자리 표시자에 있는 숫자에 따라 변환하는 것이라는 것을 모두 알고 있습니다. arg 배열의 문자열 솔직히 말해서, 바꾸기 메소드의 두 번째 매개변수가 함수인 경우는 거의 없습니다. 일반적으로 다음 코드를 보면 그렇습니다.
우선, 교체 함수의 구문은 다음과 같습니다: stringobject.replace(regexp/substr,replacement)
regexp/substr이 필요한 경우. 대체할 문자열이나 패턴을 지정하는 regexp 개체입니다. (값이 문자열인 경우 먼저 정규식 개체로 변환되지 않고 리터럴 리터럴 패턴으로 검색됩니다.) 교체가 필요합니다. 문자열 값. 텍스트를 바꾸거나 대체 텍스트를 생성하는 기능을 지정합니다. 마지막으로 첫 번째 일치 항목 또는 정규 표현식의 모든 일치 항목을 대체 항목으로 바꾼 후 얻은 새 문자열이 반환됩니다.
5. ECMAScript에서는 replacement() 메서드의 매개변수 대체가 문자열이 아닌 함수일 수 있다고 규정합니다. 이 경우 일치하는 각 항목에 대해 함수가 호출되고 해당 함수가 반환하는 문자열이 대체 텍스트로 사용됩니다. 첫 번째 매개변수는 일치하는 문자를 나타내고, 두 번째 매개변수는 일치하는 문자의 최소 인덱스 위치(RegExp.index)를 나타내며, 세 번째 매개변수는 일치하는 문자열(RegExp.input)을 나타냅니다.
6. 따라서 두 번째 공백은 다음과 같이 쓸 수 있습니다: /{(d )}/g, 명령문에 배치될 때 완전한 문장은 다음과 같습니다.
로 대체됩니다.
첫 번째 일치를 수행할 때 {2}는 arg[2]
로 대체됩니다.
7. 위는 js 문자열 메소드인 replacement()의 두 번째 매개변수에 대한 설명입니다(불완전한 부분이 있으면 직접 추가해 주세요). 물론 이번 인터뷰 질문도 해결되었습니다~ ~~~~~
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.