Elemen baharu yang ditambahkan dalam ES6 ialah literal templat. Ia adalah jenis baharu untuk mencipta rentetan dalam JavaScript yang menambahkan beberapa ciri baharu yang penting, seperti keupayaan untuk mencipta rentetan berbilang baris dan menyertakan ungkapan dalam rentetan. Sebagai pembangun, semua ciri ini boleh meningkatkan kebolehan anda untuk memanipulasi rentetan dan membolehkan anda membuat rentetan dinamik.
Siaran ini akan menggambarkan literal templat dan cara menggunakannya dalam JavaScript.
Apakah itu JavaScript Template Literals (Template Strings)?
“ Literal Template ” biasanya dikenali sebagai “ Rentetan Templat ”. Mereka dikelilingi oleh backtick ( “ ) watak, berbanding dengan petikan dalam rentetan. Pemegang tempatnya dilambangkan dengan tanda dolar “ $ ”, dan pendakap kerinting {} seperti ' ${expression} ” boleh diterima dalam literal templat. Jika anda ingin menggunakan ungkapan, anda boleh meletakkannya dalam ' ${expression} ” kotak di dalam kutu belakang.
Literal templat ialah versi rentetan JavaScript standard yang dipertingkat. Penggantian membuat perbezaan yang ketara antara templat literal dan rentetan biasa. Anda boleh menyepadukan pembolehubah dan ungkapan ke dalam rentetan menggunakan pengganti. Pembolehubah dan ungkapan ini akan mempunyai nilainya secara automatik digantikan oleh enjin JavaScript.
Sintaks
Gunakan sintaks di bawah untuk mengisytiharkan rentetan tunggal menggunakan literal templat:
` teks rentetan `
Untuk berbilang baris, ikuti sintaks yang diberikan:
` baris teks rentetan 1
baris teks rentetan
Jika anda ingin menambah ungkapan di dalam backticks, sintaks berikut digunakan:
Semak contoh berikut untuk membangunkan pemahaman yang lebih baik tentang konsep yang dinyatakan.
Contoh 1: Isytiharkan Rentetan Baris Tunggal Menggunakan Literal Templat JavaScript
Biasanya, untuk mencipta rentetan, ia diperlukan untuk menggunakan petikan tunggal atau berganda, tetapi dalam literal templat, anda boleh mencipta rentetan seperti berikut:
konsol.log ( ` LinuxHint ` ) ;
Output menunjukkan bahawa ia berfungsi sama seperti sengatan penciptaan mudah dengan bantuan petikan tunggal atau berganda:
Contoh 2: Isytihar Rentetan Berbilang Baris Menggunakan Huruf Templat JavaScript
Biasanya, untuk mencetak berbilang baris, kami menggunakan operator penggabungan (+) dan untuk menambah baris baharu, (\n) boleh digunakan, yang selalunya boleh menjadikan kod kompleks:
konsol.log ( 'Selamat datang ke LinuxHint. \n ' + 'Laman web terbaik untuk mempelajari kemahiran.' ) ;
Manakala untuk menggunakan literal templat, anda boleh memulakan baris baharu dengan menekan enter daripada papan kekunci dalam blok backticks:
Laman web yang terbaik untuk kemahiran belajar. ` ) ;
Pengeluaran
Contoh 3: Rentetan dengan Penggantian Ungkapan
Di sini, pertama kita akan mencipta dua pembolehubah ' x ” dan “ Y ”, dengan nilai “ dua puluh ” dan “ lima belas ”, masing-masing:
var x = dua puluh ;var y = lima belas ;
Kemudian, buat pembolehubah ' jumlah ” untuk menambah “ x ” dan “ Y ”:
Jika anda ingin menambah dua nombor dan memaparkan jumlah nombor ini pada konsol, biasanya, ia diperlukan untuk menggabungkan rentetan dan pembolehubah dalam format rentetan biasa yang sering mencipta kekacauan untuk menggunakan petikan tunggal atau berganda berulang kali dengan rentetan dan menyertainya antara satu sama lain dan dengan pembolehubah menggunakan ( + ):
Walaupun, menggunakan literal templat, anda hanya perlu menentukan rentetan dengan pembolehubah sebagai ungkapan di dalam ' ${} ” dalam blok tanda belakang:
Pengeluaran
Kami telah mengumpulkan semua maklumat penting yang berkaitan dengan literal templat.
Kesimpulan
“ Literal Template ', juga dikenali sebagai ' Rentetan Templat ”, ialah versi diperbaik bagi rentetan JavaScript standard yang dikelilingi oleh tanda belakang ( “ ) watak, berbanding dengan petikan dalam rentetan. Ia membenarkan penciptaan rentetan satu baris dan berbilang baris tanpa menggunakan operator penggabungan dan termasuk ungkapan dalam rentetan. Siaran ini telah membincangkan literal templat dalam JavaScript dengan contoh yang dijelaskan.