Pattern matching with template literals in Typescript - Mini Project: Build & Apply

Pattern Matching with Template Literals in TypeScript

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Pattern matching with template literals helps in validating codes, IDs, or formatted strings in many applications like form validation or data filtering.

💼 Career

Understanding pattern matching and template literals is useful for frontend and backend developers to handle string data efficiently and write clean, readable code.

1

Create the array of strings

Create an array called codes with these exact string values: 'abc123', 'xyz789', 'abc456', 'def123', 'abc789'.

Typescript

# Create the array called codes with the exact strings
# Your code here

Need a hint?

Use square brackets [] to create an array and separate strings with commas.

2

Create the pattern string with template literals

Create a constant string called pattern using template literals that matches strings starting with 'abc' and ending with any three digits. Use the template literal syntax with backticks and a placeholder for the digits as ${'\d\d\d'}.

Typescript

const codes = ['abc123', 'xyz789', 'abc456', 'def123', 'abc789'];
// Create the pattern string called pattern using template literals
// Your code here

Need a hint?

Use backticks ` to create a template literal. Use ${} to insert a pattern for three digits as a string.

3

Filter strings matching the pattern

Create a new array called matchingCodes by filtering codes. Use the filter method with a function that uses a regular expression to test if each code matches the pattern ^abc\d{3}$. Use the exact variable names matchingCodes and codes.

Typescript

const codes = ['abc123', 'xyz789', 'abc456', 'def123', 'abc789'];
const pattern = `abc${'\d\d\d'}`;
// Filter codes to create matchingCodes array using regex
// Your code here

Need a hint?

Use filter with a function that returns true if the code matches the regex /^abc\d{3}$/.

4

Print the matching codes

Use console.log to print the matchingCodes array.

Typescript

const codes = ['abc123', 'xyz789', 'abc456', 'def123', 'abc789'];
const pattern = `abc${'\d\d\d'}`;
const matchingCodes = codes.filter(code => /^abc\d{3}$/.test(code));
// Print the matchingCodes array
# Your code here

Need a hint?

Use console.log(matchingCodes); to show the filtered array.