Back-Tics Syntax

Template Strings use back-ticks (``) rather than the quotes ("") to define a string:

javascript

let text = `Hello World!`;

Quotes Inside Strings

Template Strings allow both single and double quotes inside a string:

javascript

let text = `He's often called "Johnny"`;

Multiline Strings

Template Strings allow multiline strings:

javascript

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Interpolation

Template Strings allow variables in strings. Template strings provide an easy way to interpolate variables in strings.

text

${...}

Variable Substitutions:

javascript

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

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

Expression Substitution

Template Strings allow interpolation of expressions in strings:

javascript

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

HTML Templates

javascript

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

JavaScript Template Literals and Modern Strings

Back-Tics Syntax

Quotes Inside Strings

Multiline Strings

Interpolation

Expression Substitution

HTML Templates

JavaScript String Search and Pattern Matching

Introduction to TypeScript

Nguyen Bao Huy

Discussion

No comments yet

Leave a Reply