Apa arti $ {} (tanda dolar dan kurung kurawal) dalam string di Javascript?

160

Saya belum melihat apa pun di sini atau di MDN. Saya yakin saya hanya melewatkan sesuatu. Pasti ada dokumentasi tentang ini di suatu tempat?

Secara fungsional, sepertinya Anda dapat membuat variabel di dalam string tanpa melakukan penggabungan menggunakan +operator. Saya mencari dokumentasi tentang fitur ini.

Contoh:

var string = 'this is a string';

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

Darren Joy
sumber
Bisakah Anda memberikan konteks pada apa yang Anda tanyakan? Pertanyaan ini tidak jelas seperti yang tertulis.
Sam Hanley
5
Ini bukan pertanyaan yang buruk. Ini adalah fitur baru, dan saya yakin tidak dapat menemukan duplikat pada SO, meskipun sebuah contoh dari apa yang sebenarnya dilihat sudah baik.
@ juling — setuju, tetapi kode sampel dan referensi ke sumber akan sangat membantu.
RobG
Contoh ditambahkan. Referensi ada dalam tantangan pengkodean tetapi itu diberikan, seolah-olah itu adalah sesuatu yang baru saja Anda gunakan. Belum melihat apa pun di sana dan tidak bisa menemukan apa-apa juga. (Selama beberapa tahun terakhir saya tidak pernah bertanya Q di sini. SO sepertinya memiliki hampir segalanya sekarang ...)
Darren Joy

Jawaban:

192

Anda sedang berbicara tentang templat literal .

Mereka memungkinkan untuk string multiline dan interpolasi string.

String multiline:

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

Interpolasi string:

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

Rick Runyon
sumber
67
Satu hal yang membingungkan saya untuk waktu yang lama adalah bahwa templat literals menggunakan backtick, yang ada di sebelah kiri "1" pada keyboard, bukan tanda kutip tunggal (').
Sydney
19
Keren: Anda bahkan dapat "menyuntikkan" kode:console.log(`Your array:\n ${arr.join('\n ')}`)
T4NK3R
5
Aneh bahwa Template Literaltidak didukung di IE atau mungkin itu wajar untuk IE tidak mendukung hal-hal keren. Baca selengkapnya
Mohammad Musavi
12

Seperti disebutkan dalam komentar di atas, Anda dapat memiliki ekspresi di dalam string templat / literal. Contoh:

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
sumber
Apakah benar mengatakan bahwa string template dapat digunakan untuk menyuntikkan kode ke dalam string?
carloswm85
Anda menyuntikkan ekspresi dan ekspresi adalah kode. Anda tidak dapat menyuntikkan semua jenis kode, namun, hanya ekspresi JavaScript.
Joel H
Saya akan mencoba untuk lebih spesifik. Saat menggunakan string literal saya bisa menyuntikkan ekspresi suka obj.value DI DALAM string apa pun menggunakan notasi $ {}. Baik?
carloswm85
Ya, dan Anda dapat mencobanya sendiri di konsol, misalnyahey ${obj.name}
Joel H
0

Anda juga dapat melakukan Konversi Jenis Tersirat dengan literal templat. Contoh:

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

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