Template Literals in JavaScript: Everything to Know in 10 Minutes
Template literals are a more powerful type of string in JavaScript. In this video, we're going to walk through the three template literal features you should know about!
String interpolation is the process of embedding values or expressions directly into your template literal. This encourages more readable string constructions since you don't have to worry about dealing with odd spacing issues
Template literals support multi-lined strings. This means that you can press the enter key and continue constructing your string without getting a syntax error. So you don't need to use the \n (or new line character) to introduce a new line in your strings
Tagged template literals are extremely powerful such that they give you a ton of freedom of what final value gets returned from your template literal. You can create a function that can parse out the string literals and embedded expressions in your template literal, and then you can conduct whatever logic you see fit. This means that you not only can you create a new string inside your tagged template literal function but you can create other objects, functions, or even React components.
🎬 Subscribe to the channel! - / @ijemmaonwuzulike
Timestamps
0:00 Intro
0:57 What is a Template Literal?
1:13 Feature: String Interpolation
3:51 Feature: Multi-lined Strings
4:49 Feature: Tagged Template Literal
6:15 Build a String using a Tagged Template Literal
6:56 Why and When to Use Template Literals?
7:28 Use Case: Bold Each Expression in Template Literal
8:39 Code Enhancement: Use reduce
9:08 Another Use Case: Styled Components
== Let's Connect ==
🐦 Twitter - / ijemmaohno
== Who I Am ==
I'm Ijemma, a frontend software engineer currently working in New York City. I make videos on all things JavaScript and, more broadly, frontend web development.
#javascript #webdevelopment #softwareengineer