React ES6 Template Strings

Template Strings

Example

Before:

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

Example

With Template Strings:

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:

Expressions inside ${}

Quotes without escaping

Example

Multi-line Strings:

const html = `

< h1 > Title </h1 >
< p > Paragraph </p >

`;

Note:

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

Example

const x = `

John:

Jane:

`;

Expression Interpolation

${}

Example

Insert variables inside template strings:

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

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

Example

Insert expressions inside template strings:

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

Note:

Look at the example below:

Example