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}`);

Darren Joy
źródło
Czy możesz podać kontekst, o co pytasz? To pytanie jest niejasne, jak napisano.
Sam Hanley,
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

Odpowiedzi:

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

Interpolacja ciągów:

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

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

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