Javascript'teki bir dizede $ {} (dolar işareti ve kıvırcık ayraçlar) ne anlama geliyor?

160

Burada veya MDN'de hiçbir şey görmedim. Eminim sadece bir şeyleri özlüyorum. Bir yerde bununla ilgili bir belge mi olmalı?

İşlevsel olarak, dizeyi kullanarak bir değişkeni dize içine yerleştirmenize izin verir gibi görünüyor + işleci . Bu özellik hakkında belge arıyorum.

Misal:

var string = 'this is a string';

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

Snippet'i genişlet

— Darren Joy
kaynak

Sorduğunuz şeyle ilgili bir bağlam verebilir misiniz? Bu soru yazıldığı gibi belirsiz.

— Sam Hanley

3

ECMAScript 2015 şablon değişmez değerleri

5

Bu kötü bir soru değil. Bu yeni bir özellik ve kesinlikle SO'da bir kopya bulamıyorum, ancak tam olarak ne görüldüğünün bir örneği iyi olurdu.

@ şaşı — katılıyorum, ancak örnek kod ve kaynağa referans yararlı olacaktır.

— RobG

Örnek eklendi. Referans bir kodlama zorluğuydu, ama sadece kullandığınız bir şeymiş gibi verilmişti. Üzerinde hiçbir şey görmemiş ve hiçbir şey bulamamıştım. (Son birkaç yıldır burada hiç Q sormak zorunda kalmadım. SO şimdi hemen hemen her şeye sahip gibi görünüyor ...)

— Darren Joy

192

Şablon değişmezlerinden bahsediyorsunuz .

Hem çok satırlı dizelere hem de dize enterpolasyonuna izin verir.

Çok satırlı dizeler:

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

Snippet'i genişlet

Dize enterpolasyonu:

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

Snippet'i genişlet

— Rick Runyon
kaynak

67

Beni uzun zamandır şaşırtan bir şey, şablon değişmezlerinin klavyede tek tırnak işareti (') yerine "1" in solunda bulunan backtick kullanmasıdır.

— Sydney

19

Cool: Hatta "enjekte edebilir" kodu:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

5

Template LiteralIE'de desteklenmeyen garip ya da IE'nin havalı şeyleri desteklememesi doğaldır. Devamını oku

— Mohammad Musavi

12

Yukarıdaki yorumda belirtildiği gibi, şablon dizeleri / değişmez değerleri içinde ifadeler olabilir. Misal:

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

Snippet'i genişlet

— Joel H
kaynak

Şablon dizelerinin, dizeye kod enjekte etmek için kullanılabileceğini söylemek doğru mu?

— carloswm85

İfadeleri enjekte ediyorsunuz ve ifadeler kod. Bununla birlikte, hiçbir tür kodu enjekte edemezsiniz, yalnızca JavaScript ifadeleri.

— Joel H

Daha spesifik olmaya çalışacağım. Dize değişmezleri kullanırken obj.value gibi ifadeler enjekte edebilirim kullanırken $ {} gösterimini kullanarak herhangi bir dizenin içinde INSIDE . Sağ?

— carloswm85

Evet, ve konsolda kendiniz deneyebilirsiniz, örneğinhey ${obj.name}

— Joel H

0

Örtük Tür Dönüşümleri şablon değişmezleriyle de gerçekleştirebilirsiniz. Misal:

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

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

— Şalom Davut
kaynak