JAVASCRIPT

template literal types

/** A template literal produces a new string literal type by concatenating
    the contents. When a union is used in the interpolated position, the 
    type is the set of every possible string literal that could be 
    represented by each union member: */

type Taste = "Delicious" | "Spicy";
type Food = "Pizza" | "Meat";
 
type Menu = `${Taste | Food}`;

// Menu will now be one of the following:
// 'DeliciousPizza' | 'DeliciousMeat' | 'SpicyPizza' | 'SpicyMeat'

template literal syntax

`half of 100 is ${100 / 2}`

Template literals

If you are gonna copy and paste answers from MDN... you should AT LEAST
check the page hedaer to see what topic you are copying. That way you don't 
post a porno graphic where a 3-D graphic belongs.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag`string text ${expression} string text`

Template literals (Template strings)

// Untagged, these create strings:
`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

// Tagged, this calls the function "tagFunction" with the template as the
// first argument and substitution values as subsequent arguments:
tagFunction`string text ${expression} string text`

template literal

// Untagged, these create strings:
`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

// Re-usable template:
const templateFn = expression => `string text ${expression} string text`;

// Tagged, this calls the function "example" with the template as the
// first argument and substitution values as subsequent arguments:
example`string text ${expression} string text`

Template Literals

let fourthItem = 'Item 4';
let myHtml = `
  <ol class="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>${fourthItem}</li>
  </ol>
`;

Template Literals for Strings

const str1 = 'This is a string';

// cannot use the same quotes
const str2 = 'A "quote" inside a string';  // valid code
const str3 = 'A 'quote' inside a string';  // Error

const str4 = "Another 'quote' inside a string"; // valid code
const str5 = "Another "quote" inside a string"; // Error

template literals js

var str = "foo";
var myString = `Insert variables inside strings like this: ${str}`;

Template Literal

const name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!