Data Types

Template Strings

Template strings combine text and typed values without manual concatenation.

interpolation `${...}` inserts an expression into a template string.

Template Strings

example
templates.ts
Replay: real traced execution (multi-file project)
const firstName: string = "Ada";
const completedLessons: number = 3;
const nextLesson: string = "arrays";

const summary: string = `${firstName} completed ${completedLessons} lessons.`;
const prompt: string = `Next up: ${nextLesson.toUpperCase()}`;

console.log(summary);
console.log(prompt);

const firstName: string = "Grace";
const completedLessons: number = 3;
const nextLesson: string = "arrays";

const summary: string = `${firstName} completed ${completedLessons} lessons.`;
const prompt: string = `Next up: ${nextLesson.toUpperCase()}`;

console.log(summary);
console.log(prompt);

const firstName: string = "Linus";
const completedLessons: number = 3;
const nextLesson: string = "arrays";

const summary: string = `${firstName} completed ${completedLessons} lessons.`;
const prompt: string = `Next up: ${nextLesson.toUpperCase()}`;

console.log(summary);
console.log(prompt);

const firstName: string = "Ada";
const completedLessons: number = 1;
const nextLesson: string = "arrays";

const summary: string = `${firstName} completed ${completedLessons} lessons.`;
const prompt: string = `Next up: ${nextLesson.toUpperCase()}`;

console.log(summary);
console.log(prompt);

const firstName: string = "Ada";
const completedLessons: number = 5;
const nextLesson: string = "arrays";

const summary: string = `${firstName} completed ${completedLessons} lessons.`;
const prompt: string = `Next up: ${nextLesson.toUpperCase()}`;

console.log(summary);
console.log(prompt);

  1. firstName ← Ada, completedLessons ← 3, nextLesson ← arrays, summary ← Ada completed 3 lessons.

    1const firstName→ Ada: string = "Ada";  //@firstName="Grace", "Linus"2const completedLessons→ 3: number = 3;  //@completedLessons=1, 53const nextLesson→ arrays: string = "arrays";45const summary→ Ada completed 3 lessons.: string = `${firstNameAda} completed ${completedLessons3} lessons.`;6const prompt→ Next up: ARRAYS: string = `Next up: ${nextLessonarrays.toUpperCase()}`;78console.log(summaryAda completed 3 lessons.);9console.log(promptNext up: ARRAYS);
    outputAda completed 3 lessons.
Next up: ARRAYS

  1. firstName ← Grace, completedLessons ← 3, nextLesson ← arrays, summary ← Grace completed 3 lessons.

    1const firstName→ Grace: string = "Grace";2const completedLessons→ 3: number = 3;3const nextLesson→ arrays: string = "arrays";45const summary→ Grace completed 3 lessons.: string = `${firstNameGrace} completed ${completedLessons3} lessons.`;6const prompt→ Next up: ARRAYS: string = `Next up: ${nextLessonarrays.toUpperCase()}`;78console.log(summaryGrace completed 3 lessons.);9console.log(promptNext up: ARRAYS);
    outputGrace completed 3 lessons.
Next up: ARRAYS

  1. firstName ← Linus, completedLessons ← 3, nextLesson ← arrays, summary ← Linus completed 3 lessons.

    1const firstName→ Linus: string = "Linus";2const completedLessons→ 3: number = 3;3const nextLesson→ arrays: string = "arrays";45const summary→ Linus completed 3 lessons.: string = `${firstNameLinus} completed ${completedLessons3} lessons.`;6const prompt→ Next up: ARRAYS: string = `Next up: ${nextLessonarrays.toUpperCase()}`;78console.log(summaryLinus completed 3 lessons.);9console.log(promptNext up: ARRAYS);
    outputLinus completed 3 lessons.
Next up: ARRAYS

  1. firstName ← Ada, completedLessons ← 1, nextLesson ← arrays, summary ← Ada completed 1 lessons.

    1const firstName→ Ada: string = "Ada";2const completedLessons→ 1: number = 1;3const nextLesson→ arrays: string = "arrays";45const summary→ Ada completed 1 lessons.: string = `${firstNameAda} completed ${completedLessons1} lessons.`;6const prompt→ Next up: ARRAYS: string = `Next up: ${nextLessonarrays.toUpperCase()}`;78console.log(summaryAda completed 1 lessons.);9console.log(promptNext up: ARRAYS);
    outputAda completed 1 lessons.
Next up: ARRAYS

  1. firstName ← Ada, completedLessons ← 5, nextLesson ← arrays, summary ← Ada completed 5 lessons.

    1const firstName→ Ada: string = "Ada";2const completedLessons→ 5: number = 5;3const nextLesson→ arrays: string = "arrays";45const summary→ Ada completed 5 lessons.: string = `${firstNameAda} completed ${completedLessons5} lessons.`;6const prompt→ Next up: ARRAYS: string = `Next up: ${nextLessonarrays.toUpperCase()}`;78console.log(summaryAda completed 5 lessons.);9console.log(promptNext up: ARRAYS);
    outputAda completed 5 lessons.
Next up: ARRAYS

Follow the Template

  1. firstName starts as "Ada".
  2. completedLessons starts at 3.
  3. summary becomes Ada completed 3 lessons..
  4. nextLesson is "arrays".
  5. prompt becomes Next up: ARRAYS. | firstName | completedLessons | summary | | --- | --- | --- | | Ada | 3 | Ada completed 3 lessons. | | Grace | 1 | Grace completed 1 lessons. | | Linus | 5 | Linus completed 5 lessons. |

Exercise: templates.ts

Reproduce Ada completed 3 lessons. and Next up: ARRAYS, then use the pinned names and lesson counts to predict each summary.