React ES6 Template Strings

Template Strings

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

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

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

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

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:

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

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

let price = 10;
let quantity = 5;

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

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

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.

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

Look at the example below:

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.

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?`;

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?`;