Elemen baru yang ditambahkan di ES6 adalah literal template. Ini adalah tipe baru untuk membuat string dalam JavaScript yang menambahkan beberapa fitur baru yang penting, seperti kemampuan untuk membuat string multi-baris dan menyertakan ekspresi dalam string. Sebagai pengembang, semua fitur ini dapat meningkatkan kemampuan Anda untuk memanipulasi string dan memungkinkan Anda membuat string dinamis.
Posting ini akan mengilustrasikan literal template dan cara menggunakannya dalam JavaScript.
Apa itu Literal Template JavaScript (Template Strings)?
“ Literal Template ” biasa disebut dengan “ String Template ”. Mereka dikelilingi oleh backtick ( “ ) karakter, dibandingkan dengan tanda kutip dalam string. Tempat penampungnya dilambangkan dengan tanda dolar “ $ ”, dan kurung kurawal {} Suka ' ${ekspresi} ” dapat diterima dalam literal templat. Jika Anda ingin menggunakan ekspresi, Anda dapat memasukkannya ke dalam ' ${ekspresi} ” kotak di dalam backticks.
Literal template adalah versi yang disempurnakan dari string JavaScript standar. Substitusi membuat perbedaan yang signifikan antara template literal dan string biasa. Anda dapat mengintegrasikan variabel dan ekspresi ke dalam string menggunakan pengganti. Variabel dan ekspresi ini akan diganti nilainya secara otomatis oleh mesin JavaScript.
Sintaksis
Gunakan sintaks di bawah ini untuk mendeklarasikan string tunggal menggunakan literal templat:
` teks string `
Untuk beberapa baris, ikuti sintaks yang diberikan:
` baris teks string 1
baris teks string
Jika Anda ingin menambahkan ekspresi di dalam backticks, sintaks berikut digunakan:
Lihatlah contoh-contoh berikut untuk mengembangkan pemahaman yang lebih baik tentang konsep yang dinyatakan.
Contoh 1: Mendeklarasikan String Baris Tunggal Menggunakan Literal Template JavaScript
Biasanya, untuk membuat sebuah string diperlukan tanda kutip tunggal atau ganda, tetapi dalam literal template, Anda dapat membuat string sebagai berikut:
console.log ( ` LinuxPetunjuk ` ) ;
Outputnya menunjukkan bahwa ia bekerja sama seperti sengatan pembuatan sederhana dengan bantuan tanda kutip tunggal atau ganda:
Contoh 2: Deklarasikan String Multi-baris Menggunakan Literal Template JavaScript
Biasanya, untuk mencetak beberapa baris, kami menggunakan operator penggabungan (+) dan untuk menambahkan baris baru, (\n) dapat digunakan, yang seringkali dapat membuat kode menjadi kompleks:
console.log ( 'Selamat datang di LinuxHint. \n ' + 'Situs web terbaik untuk mempelajari keterampilan.' ) ;
Sedangkan untuk menggunakan literal template, Anda dapat memulai baris baru dengan menekan enter dari keyboard di blok backticks:
Situs web terbaik untuk kemampuan belajar. ` ) ;
Keluaran
Contoh 3: String dengan Substitusi Ekspresi
Di sini, pertama kita akan membuat dua variabel “ x ' dan ' kamu ”, dengan nilai “ dua puluh ' dan ' limabelas ”, masing-masing:
var x = dua puluh ;var y = limabelas ;
Kemudian, buat variabel “ jumlah ” untuk menambahkan “ x ' dan ' kamu ”:
Jika Anda ingin menambahkan dua angka dan menampilkan jumlah angka-angka ini di konsol, biasanya diperlukan untuk menggabungkan string dan variabel dalam format string biasa yang sering membuat kekacauan untuk menggunakan tanda kutip tunggal atau ganda berulang kali dengan string dan menggabungkannya satu sama lain dan dengan variabel menggunakan ( + ):
Sementara, menggunakan literal template, Anda hanya perlu menentukan string dengan variabel sebagai ekspresi di dalam ' ${} ” di blok backtick:
Keluaran
Kami telah mengumpulkan semua informasi penting yang terkait dengan literal template.
Kesimpulan
“ Literal Template ”, juga dikenal sebagai “ String Template ”, adalah versi yang disempurnakan dari string JavaScript standar yang dikelilingi oleh tanda centang belakang ( “ ) karakter, dibandingkan dengan tanda kutip dalam string. Ini memungkinkan pembuatan string baris tunggal dan multi-baris tanpa menggunakan operator rangkaian dan menyertakan ekspresi dalam string. Posting ini telah membahas literal template dalam JavaScript dengan contoh yang dijelaskan.