JavaScript: Template String

By Xah Lee. Date: . Last updated: .

New in JS2015.

String can also be created by bracketing text with (U+60: GRAVE ACCENT) `. This this called template string.

console.log(`my cat` === "my cat"); // true

Literal Line Break Allowed

Literal newline character is allowed:

// template string allow literal newline
let x = `aa
bb`;

console.log(x);
// prints in 2 lines

Embeded Expression

Any form ${expr} in tempate string will have the expr evaluated and result inserted into the string.

// template string example
console.log(
 `two plus three is ${2+3}`
); // two plus three is 5

The ${} is called place-holder, or substitution string.

Here is a example with embedded variable:

// variable interpolation inside template string

let x = 76;

console.log(
 `You have ${x} points.`
); // You have 76 points.

When the expression is a object, its toString method is used to convert it to string. (or, with inheritance up to Object.toString()) [see Prototype and Inheritance]

Escape GRAVE ACCENT

If you want to include a GRAVE ACCENT in a template string, add a backslash in front, like this \`.

// escape grave mark in template string
console.log(
 `a\`b`
); // prints a`b

You can also escape ${} by \${} or $\{}.

// escape the expression part in template string

let x = 2;

console.log(`${x}`); // prints 2

console.log(`\${x}`); // prints ${x}

console.log(`$\{x}`); // prints ${x}

Nest Template String

Template string can be nested.

// nested template string

let x = "B";

console.log(
 `wow ${`A${x}C`}`
); // wow ABC

Tagged Template String

Tagged Template String

JavaScript String

BUY
ΣJS
JavaScript in Depth

JavaScript in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc