Backticks wywołujące funkcję

Nie wiem, jak to wyjaśnić, ale kiedy biegnę

console.log`1`

W Google Chrome otrzymuję dane wyjściowe jak

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

Dlaczego lewy przycisk wywołuje funkcję dziennika i dlaczego tworzy indeks raw: Array[1]?

Pytanie zadane w pokoju JS przez Catgocat, ale żadne odpowiedzi nie miały sensu poza czymś o tworzeniu szablonów sznurków, które tak naprawdę nie pasowało do tego, dlaczego tak się dzieje.

Nazywa się Tagged Template w ES-6 więcej o nich można poczytać Tutaj , zabawne znalazłem link w oznaczonej gwiazdką sekcji samego czatu.

Ale odpowiednia część kodu znajduje się poniżej (zasadniczo możesz utworzyć filtrowane sortowanie).

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

Zasadniczo jest to po prostu oznaczenie „1” funkcją console.log, tak jak zrobiłoby to z każdą inną funkcją. Funkcje znakowania akceptują przeanalizowane wartości ciągów szablonów i osobno wartości, na których można wykonać dalsze zadania.

Babel transponuje powyższy kod do

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

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

Jak widać w powyższym przykładzie, po transpilacji przez babel, funkcja tagowania (console.log) jest przekazywana jako wartość zwracana następującego kodu es6-> 5 transpiled.

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

Wartość zwracana przez tę funkcję jest przekazywana do console.log, który następnie wydrukuje tablicę.

Otagowany literał szablonu:

Następująca składnia:

function`your template ${foo}`;

Nazywa się oznaczonym literałem szablonu.

Funkcja, która jest wywoływana jako otagowany literał szablonu, otrzymuje swoje argumenty w następujący sposób:

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

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

1. Pierwszy argument to tablica wszystkich pojedynczych znaków ciągu
2. Pozostały argument odpowiada wartościom zmiennych, które otrzymujemy poprzez interpolację ciągów. Zauważ w przykładzie, że nie ma wartości for arg4(ponieważ jest tylko 3-krotna interpolacja ciągów) i dlatego undefinedjest rejestrowana, gdy próbujemy zarejestrowaćarg4

Używając składni parametru rest:

Jeśli nie wiemy z góry, ile razy interpolacja łańcuchów będzie miała miejsce w ciągu szablonu, często przydatne jest użycie składni parametru rest. Ta składnia przechowuje pozostałe argumenty, które funkcja otrzymuje w tablicy. Na przykład:

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

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