함수를 호출하는 백틱

Question 1

어떻게 설명해야할지 모르겠지만 달리면

console.log`1`

Google 크롬에서 다음과 같은 출력을 얻습니다.

console.log`1`
VM12380:2 ["1", raw: Array[1]]

백틱이 로그 함수를 호출하는 이유는 무엇이며 왜 인덱스를 생성 raw: Array[1]합니까?

Catgocat에 의해 JS 룸에서 질문이 제기되었지만, 왜 이런 일이 발생하는지에 맞지 않는 문자열 템플릿 에 대한 것 외에는 어떤 대답도 의미 가 없습니다.

Question 2

그것은 ES-6에서 Tagged Template이라고 불립니다. 더 많은 정보를 읽을 수 있습니다. 여기 , 재미있게 채팅의 별표 섹션에서 링크를 찾았습니다.

그러나 코드의 관련 부분은 다음과 같습니다 (기본적으로 필터링 된 정렬을 만들 수 있음).

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

기본적으로 다른 함수와 마찬가지로 console.log 함수로 "1"에 태그를 지정합니다. 태그 지정 함수는 템플릿 문자열의 구문 분석 된 값과 추가 작업을 수행 할 수있는 값을 개별적으로 허용합니다.

Babel은 위의 코드를 다음으로 변환합니다.

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

위의 예에서 볼 수 있듯이 babel에 의해 트랜스 파일 된 후 태그 지정 함수 (console.log)는 트랜스 파일 된 다음 es6-> 5 코드의 반환 값을 전달받습니다.

_taggedTemplateLiteralLoose( ["1"], ["1"] );

이 함수의 반환 값은 console.log로 전달되어 배열을 인쇄합니다.

Question 3

태그가 지정된 템플릿 리터럴 :

다음 구문 :

function`your template ${foo}`;

태그가 지정된 템플릿 리터럴 이라고합니다 .

태그가 지정된 템플릿 리터럴로 호출되는 함수는 다음과 같은 방식으로 인수를받습니다.

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

스 니펫 확장

첫 번째 인수는 모든 개별 문자열 문자의 배열입니다.
나머지 인수는 문자열 보간을 통해받은 변수의 값과 일치합니다. 예제에서 arg4(문자열 보간이 3 배 밖에 없기 때문에) 값이 없으므로 undefined로그를 시도 할 때 기록됩니다.arg4

나머지 매개 변수 구문 사용 :

템플릿 문자열에서 문자열 보간이 몇 번 발생하는지 미리 알 수없는 경우에는 나머지 매개 변수 구문을 사용하는 것이 유용합니다. 이 구문은 함수가 수신하는 나머지 인수를 배열에 저장합니다. 예를 들면 :

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;

스 니펫 확장