JavaScript - Tagged Templates

Hello, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of Tagged Templates. Don't worry if you've never heard of them before – by the end of this lesson, you'll be tagging templates like a pro!

What Are Tagged Templates?

Tagged templates are a powerful feature introduced in ES6 (ECMAScript 2015) that allows you to parse template literals with a function. Now, I know that might sound a bit intimidating, but think of it as giving your template strings superpowers!

In simpler terms, tagged templates let you process a template string before it's finally rendered. It's like having a personal assistant who can modify your messages before you send them out.

Basic Syntax

Let's start with the basic syntax:

function myTag(strings, ...values) {
// Your magic goes here
}

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

In this example, myTag is our template tag function. It receives two types of arguments:

An array of string literals
The interpolated values (those inside ${})

Why Use Tagged Templates?

You might be wondering, "Why should I bother with tagged templates?" Well, let me tell you a little story.

Once upon a time, there was a young developer named Alex. Alex was building a messaging app and wanted to make sure no one could send harmful HTML in their messages. Tagged templates came to the rescue! Alex used them to sanitize user input and prevent potential security risks.

Tagged templates are super useful for:

Sanitizing user input
Internationalization (i18n)
Styling (like in styled-components for React)
And much more!

Examples of Tagged Templates

Let's dive into some examples to see tagged templates in action!

Example 1: A Simple Greeting

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

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

In this example, our greet function takes the name and converts it to uppercase. The strings array contains ["Hello, ", "!"], and values array contains ["alice"].

Example 2: HTML Escaping

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&amp;")
.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;

This example shows how we can use tagged templates to escape potentially harmful HTML. Our safeHtml function replaces special characters with their HTML entity equivalents.

Example 3: Styling with 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;

This example demonstrates how tagged templates can be used for styling, similar to how they're used in libraries like styled-components.

Advanced Usage: Tagged Template Methods

Tagged templates can also have methods attached to them. Let's look at an example:

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

In this example, our currency tag returns an object with methods, allowing for flexible formatting options.

Conclusion

Tagged templates are a powerful feature in JavaScript that allow for complex string manipulation and processing. They're not just a fancy way to concatenate strings – they open up a world of possibilities for creating safer, more flexible, and more expressive code.

Remember, like any powerful tool, tagged templates should be used judiciously. They're great for specific use cases like sanitization, internationalization, or creating domain-specific languages, but for simple string interpolation, regular template literals are often sufficient.

Now that you've learned about tagged templates, why not try creating your own? Start small, maybe with a simple formatting function, and gradually work your way up to more complex use cases. Happy coding, future JavaScript masters!

Method	Description
`strings.raw`	Gives access to the raw strings in the template literals
`String.raw`	A built-in tag function for getting the raw string form of template literals

JavaScript - Tagged Templates

Halo, para para JavaScript nujang! Hari ini, kita bakal buat perjalanan yang menarik ke dunia Tagged Templates. Jangan khawatir kalau Anda belum pernah dengar tentang mereka sebelumnya – oleh akhir pelajaran ini, Anda bakal bisa menandai template seperti seorang ahli!

Apa Itu Tagged Templates?

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

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

Sintaks Dasar

Mari kita mulai dengan sintaks dasar:

function myTag(strings, ...values) {
// Magic Anda disini
}

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

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

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

Mengapa Menggunakan Tagged Templates?

Anda mungkin berpikir, "Mengapa harus kerja keras dengan tagged templates?" Well, biarkan saya ceritakan Anda cerita pendek.

Pada suatu waktu, ada seorang pengembang muda bernama Alex. Alex sedang membuat aplikasi pesan dan ingin memastikan bahwa tidak ada yang bisa mengirim HTML yang berbahaya dalam pesannya. Tagged templates datang ke bantuan! Alex menggunakannya untuk mensanitasi input pengguna dan mencegah risiko keamanan yang mungkin.

Tagged templates sangat berguna untuk:

Mensanitasi input pengguna
Internationalization (i18n)
Penyusunan gaya (seperti di styled-components untuk React)
Dan banyak lagi!

Contoh Tagged Templates

Ayo masuk kedalam 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 kita mengambil nama dan mengubahnya menjadi huruf besar. Array strings berisi ["Hello, ", "!"], dan array values berisi ["alice"].

Contoh 2: Menghindari HTML

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&amp;")
.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 bisa menggunakan tagged templates untuk menghindari HTML yang berbahaya. Fungsi safeHtml kita mengganti karakter khusus dengan padanan HTML mereka.

Contoh 3: Penyusunan Gaya 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 bisa digunakan untuk penyusunan gaya, sama seperti di library seperti styled-components.

Penggunaan Tingkat Lanjut: Metode Tagged Template

Tagged templates juga bisa memiliki metode yang dilampirkan kepadanya. 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, tag currency kita mengembalikan objek dengan metode, memungkinkan opsi pemformatan yang fleksibel.

Kesimpulan

Tagged templates adalah fitur yang kuat di JavaScript yang memungkinkan manipulasi dan pemrosesan string yang kompleks. Mereka tidak hanya cara menarik untuk menggabungkan string – mereka membuka banyak kemungkinan untuk menciptakan kode yang lebih aman, fleksibel, dan ekspresif.

Ingat, seperti semua alat yang kuat, tagged templates sebaiknya digunakan dengan hati-hati. Mereka sangat cocok untuk kasus penggunaan khusus seperti mensanitasi, internationalization, atau membuat bahasa domain-khusus, tapi 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 pemformatan sederhana, dan perlahan-lahan tingkatkan ke kasus penggunaan yang lebih kompleks. Semoga sukses, para master JavaScript masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Template Literal

Tutorial Seterusnya:

JavaScript - Objek