Values, Types, and Expressions

Template Literals

Build strings by embedding values with backticks.

template-strings A template literal uses backticks and `${...}` to embed values directly in a string. String methods like `toUpperCase` return new strings.

Template Literals

name
template_strings.js
Replay: real traced execution (multi-file project)
const name = "Ada";
const age = 30;
const greeting = `${name} is ${age}`;
const upper = name.toUpperCase();

console.log("greeting=" + greeting);
console.log("upper=" + upper);

const name = "Bo";
const age = 30;
const greeting = `${name} is ${age}`;
const upper = name.toUpperCase();

console.log("greeting=" + greeting);
console.log("upper=" + upper);

const name = "Cy";
const age = 30;
const greeting = `${name} is ${age}`;
const upper = name.toUpperCase();

console.log("greeting=" + greeting);
console.log("upper=" + upper);

  1. name ← Ada, age ← 30, greeting ← Ada is 30, upper ← ADA

    1const name→ Ada = "Ada"; //@name="Bo", "Cy"2const age→ 30 = 30;3const greeting→ Ada is 30 = `${nameAda} is ${age30}`;4const upper→ ADA = nameAda.toUpperCase();56console.log("greeting=" + greetingAda is 30);7console.log("upper=" + upperADA);
    outputgreeting=Ada is 30
upper=ADA

  1. name ← Bo, age ← 30, greeting ← Bo is 30, upper ← BO

    1const name→ Bo = "Bo";2const age→ 30 = 30;3const greeting→ Bo is 30 = `${nameBo} is ${age30}`;4const upper→ BO = nameBo.toUpperCase();56console.log("greeting=" + greetingBo is 30);7console.log("upper=" + upperBO);
    outputgreeting=Bo is 30
upper=BO

  1. name ← Cy, age ← 30, greeting ← Cy is 30, upper ← CY

    1const name→ Cy = "Cy";2const age→ 30 = 30;3const greeting→ Cy is 30 = `${nameCy} is ${age30}`;4const upper→ CY = nameCy.toUpperCase();56console.log("greeting=" + greetingCy is 30);7console.log("upper=" + upperCY);
    outputgreeting=Cy is 30
upper=CY

Follow the Template

  1. name starts as Ada.
  2. age is 30.
  3. greeting becomes Ada is 30.
  4. upper becomes ADA.
  5. The program prints greeting=Ada is 30 and upper=ADA. | name | greeting | upper | | --- | --- | --- | | Ada | Ada is 30 | ADA | | Bo | Bo is 30 | BO | | Cy | Cy is 30 | CY |

Exercise: template_strings.js

Reproduce greeting=Ada is 30 and upper=ADA, then use the pinned names Bo and Cy to predict each output.