Template literals in JavaScript

Interpolation, multiline strings, and the tagged form.

const lang = "javascript";
const steps = 45;

console.log(`${lang} has ${steps} steps, ${steps > 40 ? "enough" : "few"}`);
console.log(`line one
line two`);

function highlight(strings, ...values) {
  return strings.reduce(
    (out, part, i) => out + part + (i < values.length ? `[${values[i]}]` : ""),
    "",
  );
}

console.log(highlight`practicing ${lang} for ${steps} steps`);

How it works

1. ${} takes any expression, not just a variable.
2. A backtick string keeps its newlines.
3. A tag function receives the strings and the values separately.

Keywords and builtins used here

• const
• function
• return

The run, in numbers

Lines

15

Characters to type

370

Tokens

115

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 81 seconds.

Type this snippet

Step 2 of 5 in Text, step 7 of 43 in Language basics.

← Previous Next →