ES6 Template Strings

Template Strings

Template strings allow you to write strings that span multiple lines and include embedded expressions:

Example

const name = "John";
const age = 30;
const message = "Hello, " + name + "!\n" +
"You are " + age + " years old.";

Example

const name = "John";
const age = 30;
const message = `Hello, ${name}!
You are ${age} years old.`;

Template strings use backticks (`) instead of quotes and can include:

• Multiple lines without \n
• Expressions inside ${}
• Quotes without escaping

Example

const html = `
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
`;

Note: The indentation in multi-line strings becomes part of the string.

Example

const x = `
  John:
    Hello, how are you?
  Jane:
    I'm fine, thanks!
`;

Expression Interpolation

You can include any valid JavaScript expression inside ${} in a template string:

Example

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Example

let price = 10;
let quantity = 5;

let total = `Total: ${price * quantity}`;

Example

const items = ["apple", "banana", "orange"];
const list = `You have ${items.length} items:
${items.map(item => `- ${item}`).join('\n')}`;

Example

const isAdmin = true;
const message = `Status: ${isAdmin ? 'Admin' : 'User'}`;

Tagged Templates

You can also use template strings with a function (called a tag) to modify the output.

Note: Tagged templates are an advanced feature. You might not need them in most cases.

The function takes the text and the expression(s) as arguments.

Look at the example below:

Example

function highlight(strings, fname) {
  let x = fname.toUpperCase();
  return strings[0] + x + strings[1];
}

let name = "John";

let text = highlight`Hello ${name}, how are you?`;

Example Explained

The function name is highlight, you can name it whatever you want.

The first argument holds the text between the expressions, as an array. The array items are splitted by the expression. In this example strings[0] holds "Hello " and strings[1] holds " how are you?".

The second argument holds the expressions. In this example fname holds "John".

Inside the function you can use the arguments to create the final string, and return it.

Note: If the template string contains multiple expressions, the text will still be held in the first argument, but the expressions will either be held in multiple arguments, or as an array in the second argument.

Example

function highlight(strings, fname1, fname2) {
  let x = fname1.toUpperCase();
  let y = fname2.toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;

Example

function highlight(strings, ...fname) {
  let x = fname[0].toUpperCase();
  let y = fname[1].toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;