Co oznacza $ {} (znak dolara i nawiasy klamrowe) w ciągu znaków w JavaScript?

160

Nie widziałem nic tutaj ani na MDN. Jestem pewien, że czegoś mi brakuje. Gdzieś musi być dokumentacja na ten temat?

Funkcjonalnie wygląda na to, że umożliwia zagnieżdżenie zmiennej w ciągu znaków bez wykonywania konkatenacji za pomocą +operatora. Szukam dokumentacji dotyczącej tej funkcji.

Przykład:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);

Rozwiń fragment

— Darren Joy
źródło

Czy możesz podać kontekst, o co pytasz? To pytanie jest niejasne, jak napisano.

— Sam Hanley,

3

Literały szablonu ECMAScript 2015

5

To nie jest złe pytanie. To nowa funkcja i na pewno nie mogę znaleźć duplikatu w SO, chociaż przykład tego, co dokładnie zostało zobaczone, byłby dobry.

@ zez - zgadzam się, ale przykładowy kod i odniesienie do źródła byłyby pomocne.

— RobG

Dodano przykład. Odniesienie było w wyzwaniu kodowania, ale było dane, jakby było czymś, czego po prostu używasz. Nic na niej nie widziałem i też nie mogłem znaleźć. (W ciągu ostatnich kilku lat nigdy nie musiałem tutaj zadawać pytania. Więc wydaje się, że mam teraz prawie wszystko ...)

— Darren Joy

192

Mówisz o literałach szablonów .

Pozwalają zarówno na ciągi wielowierszowe, jak i na interpolację ciągów.

Ciągi wielowierszowe:

console.log(`foo
bar`);
// foo
// bar

Rozwiń fragment

Interpolacja ciągów:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

Rozwiń fragment

— Rick Runyon
źródło

67

Jedną rzeczą, która przez długi czas mnie myliła, jest to, że literały szablonów używają znaku wstecznego, który znajduje się po lewej stronie „1” na klawiaturze, zamiast pojedynczego cudzysłowu (').

— Sydney,

19

Super: Możesz nawet "wstrzyknąć" kod:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

5

To dziwne, że Template LiteralIE nie jest obsługiwany lub może naturalne jest, że IE nie obsługuje fajnych rzeczy. Czytaj więcej

— Mohammad Musavi

12

Jak wspomniano w powyższym komentarzu, możesz mieć wyrażenia w ciągach / literałach szablonu. Przykład:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3

Rozwiń fragment

— Joel H.
źródło

Czy słuszne jest stwierdzenie, że ciągi szablonów mogą służyć do wstrzykiwania kodu do ciągu?

— carloswm85

Wstrzykujesz wyrażenia, a wyrażenia są kodem. Nie możesz wprowadzić żadnego typu kodu, ale tylko wyrażenia JavaScript.

— Joel H

Postaram się być bardziej szczegółowy. Korzystając z literałów łańcuchowych, mogę wstrzyknąć wyrażenia takie jak obj.value INSIDE dowolny ciąg przy użyciu notacji $ {}. Dobrze?

— carloswm85

Tak, i możesz sam to wypróbować w konsoli, np.hey ${obj.name}

— Joel H

0

Można również wykonywać niejawne konwersje typów za pomocą literałów szablonów. Przykład:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya

— Shalom David
źródło