DEV Community

Heru Hartanto
Heru Hartanto

Posted on • Edited on

Understanding Tagged Template Literals in JavaScript

What are Tagged Template Literals?

A tagged template literal involves a template literal prefixed with a function, called a tag. This function can process and manipulate the literal's content. Here's a simple example:

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Processed string';
}

const name = 'Alice';
const greeting = tag`Hello, ${name}! How are you?`;
console.log(greeting);
Enter fullscreen mode Exit fullscreen mode

Use Cases for Tagged Template Literals

  1. Internationalization (i18n)

Tagged template literals can dynamically translate strings based on the user’s locale. Here’s an example using Japanese:

function i18n(strings, ...values) {
    const translations = {
        'Hello, ': 'こんにちは、',
        '! How are you?': '!元気ですか?',
    };

    return strings.reduce((result, str, i) => result + translations[str] + (values[i] || ''), '');
}

const name = 'アリス';
const greeting = i18n`Hello, ${name}! How are you?`;
console.log(greeting); // Output: "こんにちは、アリス!元気ですか?"

Enter fullscreen mode Exit fullscreen mode

2. Custom String Formatting

They can also implement custom formatting logic, such as escaping HTML.

function escapeHTML(strings, ...values) {
    const escape = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return strings.reduce((result, str, i) => result + str + escape(values[i] || ''), '');
}

const userInput = '<script>alert("XSS")</script>';
const sanitized = escapeHTML`User input: ${userInput}`;
console.log(sanitized); // Output: "User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"
Enter fullscreen mode Exit fullscreen mode

Conclusion

Tagged template literals provide a versatile tool for dynamic string manipulation in JavaScript. They can simplify tasks like internationalization and custom string formatting, leading to more expressive and maintainable code.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay