What are tagged template literals and their practical uses?

 function tag(strings, ...values) {
   console.log(strings); // Array of string literals
   console.log(values);  // Array of interpolated values
   return 'processed';
 }

 const name = 'John';
 const age = 30;
 const result = tag`Hello ${name}, you are ${age} years old`;
 // strings: ['Hello ', ', you are ', ' years old']
 // values: ['John', 30]

    function html(strings, ...values) {
      return strings.reduce((result, str, i) => {
        const value = values[i - 1];
        const escaped = String(value)
          .replace(/&/g, '&')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
        return result + escaped + str;
      });
    }

    const userInput = '<script>alert("XSS")</script>';
    const safe = html`<div>${userInput}</div>`;

    function i18n(strings, ...values) {
      // Look up translation for the template
      return translate(strings, values);
    }

    const greeting = i18n`Hello ${userName}!`;

    function sql(strings, ...values) {
      // Safely escape values to prevent SQL injection
      return {
        text: strings.reduce((query, str, i) => 
          query + str + (i < values.length ? `$${i + 1}` : ''),
        ''),
        values: values
      };
    }

    const query = sql`SELECT * FROM users WHERE id = ${userId}`;

    const Button = styled.button`
      background: ${props => props.primary ? 'blue' : 'white'};
      color: ${props => props.primary ? 'white' : 'blue'};
    `;