ECMAScript 6 (ES6) memperkenalkan banyak fitur baru untuk JavaScript, di antaranya adalah template literal yang merupakan fitur yang sangat kuat. Gunakan template string ketika bekerja dengan string karena mereka menawarkan solusi yang lebih mudah dibaca, singkat, dan fleksibel dalam JS, terutama untuk interpolasi string dan string multiline. Pada artikel berikut, kita akan membahas apa itu template literal, sintaksisnya, dan bagaimana mereka mengubah permainan terkait dengan notasi titik untuk JavaScript.
Apa yang dimaksud dengan Template Literal?
Penggabungan String Tradisional:
const name = 'Alice';const greeting = 'Hello, ' + name + '! How are you today?';console.log(greeting);
Menggunakan Template Literal:
const name = 'Alice';const greeting = `Hello, ${name}! How are you today?`;console.log(greeting);
.png) |
| sumber: medium.com |
Karakteristik Penting dari Template Literal
1. Interpolasi String
const product = 'laptop';const price = 999.99;console.log(`The price of the ${product} is $${price}.`);
2. String Multiline
Tidak seperti ES6 yang memungkinkan pembuatan string multibaris dengan mudah menggunakan template literal (dengan tanda centang), sebelum ES6 tidak ada cara langsung untuk membuat string multibaris tanpa cara yang biasa digunakan dan tidak diinginkan dalam JavaScript untuk memperlakukan string, seperti penggabungan string dengan karakter baris baru (\n) dan array. Untuk mengatasi masalah ini, ES6 dilengkapi dengan Template literal yang membuat string multi-baris mudah dibuat.
Contoh:
const message = `This is a multiline string.
It spans multiple lines
without extra syntax.`;
console.log(message);
3. Ekspresi Tersemat
String di dalam ${} bisa lebih dari sekedar nama variabel. Penalaran: Pengembang dapat menggunakan ekspresi JavaScript apa pun yang valid, termasuk operasi matematika, pemanggilan fungsi, dan operator terner.
Contoh:
const a = 5;
const b = 10;
console.log(`The sum of ${a} and ${b} is ${a + b}.`);
4. Templat yang Ditandai
Fitur yang kurang umum digunakan, tetapi mengesankan adalah tagged template. Tag adalah fungsi yang memproses literal template. Hal ini memungkinkan pengembang untuk menyesuaikan keluaran string dengan cara yang sewenang-wenang, sehingga berguna untuk operasi seperti keluar dari HTML atau melokalisasi string.
Contoh:
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
return `${result}${str}<strong>${values[i] || ''}</strong>`;
}, '');
}
const name = 'Alice';
const activity = 'coding';
console.log(highlight`Welcome, ${name}! Enjoy ${activity} today!`);
Keluaran:
Welcome, <strong>Alice</strong>! Enjoy <strong>coding</strong> today!
Manfaat Template Literal
- Lebih Mudah Dibaca: Template literal memberikan keterbacaan yang lebih baik, terutama ketika bekerja dengan interpolasi yang kompleks.
- Lebih Sedikit Boilerplate: Template literal membutuhkan lebih sedikit kode untuk digunakan daripada cara tradisional untuk menggabungkan string.
- Fleksibilitas yang Lebih Baik: Templat multiline dan tag memperkenalkan dimensi baru pada komposisi string.
- Mudah untuk Debug: Menggunakan sintaks yang bersih mengurangi kemungkinan membuat kesalahan dan memungkinkan debugging yang lebih mudah.
Kapan Menggunakan Template Literal
Template literal sangat cocok untuk:
- Membuat string yang berisi variabel atau ekspresi.
- Menulis string multiline tanpa sintaks tambahan.
- Membuat template HTML atau output yang diformat.
- Melokalkan string dengan templat yang ditandai
Namun, jika string Anda hanyalah string statis sederhana, tanda kutip boleh digunakan-baik tanda kutip tunggal maupun ganda.