JavaScript - Tagged Templates

Halo, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia Tagged Templates. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - hingga akhir pelajaran ini, Anda akan mengetag template seperti seorang ahli!

Apa Itu Tagged Templates?

Tagged templates adalah fitur yang kuat yang diperkenalkan dalam ES6 (ECMAScript 2015) yang memungkinkan Anda mengurai template literals dengan sebuah fungsi. Saya tahu ini mungkin terdengar menakutkan, tapi pikirkan seperti memberikan superpower kepada string template Anda!

Dalam kata yang sederhana, tagged templates memungkinkan Anda memproses string template sebelum akhirnya ditampilkan. Itu seperti memiliki asisten pribadi yang dapat memodifikasi pesan Anda sebelum Anda mengirimkannya.

Sintaks Dasar

Mari kita mulai dengan sintaks dasar:

function myTag(strings, ...values) {
// Tempat keajaiban Anda berada di sini
}

const result = myTag`Hello, ${name}!`;

Dalam contoh ini, myTag adalah fungsi template tag kami. Itu menerima dua jenis argumen:

1. Sebuah array dari string literals
2. Nilai yang diinterpolasi (yang berada dalam ${})

Mengapa Menggunakan Tagged Templates?

Anda mungkin bertanya-tanya, " Mengapa harus bermasalah dengan tagged templates?" Baiklah, mari saya ceritakan Anda kisah pendek.

Pada suatu waktu, ada seorang pengembang muda bernama Alex. Alex sedang membangun aplikasi messaging dan ingin memastikan bahwa tidak ada yang bisa mengirim HTML berbahaya dalam pesan mereka. Tagged templates datang ke tempat penyelamat! Alex menggunakan mereka untuk mensanitasi input pengguna dan mencegah risiko keamanan potensial.

Tagged templates sangat berguna untuk:

• Mensanitasi input pengguna
• Internationalisasi (i18n)
• Styling (seperti dalam styled-components untuk React)
• Dan banyak lagi!

Contoh Tagged Templates

Mari kita masuk ke beberapa contoh untuk melihat tagged templates dalam aksi!

Contoh 1: Pesan Sederhana

function greet(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// Output: Hello, ALICE!

Dalam contoh ini, fungsi greet mengambil nama dan mengubahnya menjadi huruf besar. Array strings berisi ["Hello, ", "!"], dan array values berisi ["alice"].

Contoh 2: HTML Escaping

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (values[i] ? escapeHtml(values[i]) : '');
}, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// Output: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

Contoh ini menunjukkan bagaimana kita dapat menggunakan tagged templates untuk mengescape HTML yang berpotensi berbahaya. Fungsi safeHtml mengganti karakter spesial dengan padanan entitas HTML mereka.

Contoh 3: Styling dengan Tagged Templates

function css(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] || '');
}, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
color: ${color};
font-size: ${fontSize};
`;

console.log(styles);
// Output:
//   color: red;
//   font-size: 20px;

Contoh ini menunjukkan bagaimana tagged templates dapat digunakan untuk styling, sama seperti dalam pustaka seperti styled-components.

Penggunaan Tingkat Lanjut: Metode Tagged Template

Tagged templates juga dapat memiliki metode yang dilampirkan padanya. Mari kita lihat contoh:

function currency(strings, ...values) {
const result = strings.reduce((acc, str, i) => {
return acc + str + (values[i] || '');
}, '');

return {
toString() {
return result;
},
USD() {
return '$' + result;
},
EUR() {
return '€' + result;
}
};
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // Output: 100
console.log(formatted.USD()); // Output: $100
console.log(formatted.EUR()); // Output: €100

Dalam contoh ini, tagged currency mengembalikan objek dengan metode, memungkinkan format yang fleksibel.

Kesimpulan

Tagged templates adalah fitur yang kuat dalam JavaScript yang memungkinkan manipulasi dan pengolahan string yang kompleks. Mereka tidak hanya cara menyingkat penggabungan string - mereka membuka dunia kemungkinan untuk menciptakan kode yang lebih aman, fleksibel, dan ekspresif.

Ingat, seperti semua alat yang kuat, tagged templates harus digunakan dengan bijak. Mereka sangat cocok untuk kasus penggunaan khusus seperti sanitasi, internationalisasi, atau menciptakan bahasa domain spesifik, tetapi untuk interpolasi string sederhana, template literals biasa biasanya cukup.

Sekarang Anda telah belajar tentang tagged templates, mengapa tidak mencoba membuat sendiri? Mulai dari yang sederhana, mungkin dengan fungsi formatting sederhana, dan perlahan-lahan tingkatkan ke kasus penggunaan yang lebih kompleks. Selamat coding, para master JavaScript masa depan!

Metode	Deskripsi
strings.raw	Memberikan akses ke string mentah dalam template literals
String.raw	Sebuah fungsi tag bawaan untuk mendapatkan bentuk string mentah dari template literals

Credits: Image by storyset