Why does template strings exist?

Simply to add multiple strings into a single string.
For example, If I ask you to add the string a and b. How would you do this?

const a = 'My is Anjan Shomodder'const b = 'I am a software engineer'

You might do this:

const combinedString = a + bconsole.log(combinedString)

This will work. But what if you want to add number to it. How would you write I am 20 years old.

const age = 20const c = 'I am'const d = 'years old.'

You might do this:

const combinedString =  a + age + dconsole.log(combinedString)

This will work. But it is not that readable. What if you can write all the substring, javascript expressions like variables, function calls in a single string? That would be great. It would be readable and easy to do.

That's why we have Es6 template strings or template literals whatever you say.

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

The way you write is instead of normal quotation mark you use backticks.

Inside backticks you put normal javascript string.

const a = `My is Anjan Shomodder`

If you want to use variables then you do this.

const a = 'My is Anjan Shomodder.'const b = 'I am a software engineer.'const c = 'I am'const d = 'years old.'const age = 20const combinedString = `${a}${b}${c}${age}${d} I always write good code. ha ha ha`

So instead of writing the variables directly. You add a dollar sign$ and then you wrap them by curly brackets.

output: My is Anjan Shomodder. I am a software engineer.

You can put whatever expressions you like.

• add two number

const a = 21const b = 10const resultString = `${a} and ${b} adds up to ${a + b}`

• Ternary operator: Single line if statement.

console.log(`My name is ${3>2 : "Anjan" : "Mark" }`)

output: My name is Anjan

And you get the point.

You can also write multiline strings.

console.log(`string text line 1 string text line 2`)

And that's all you need to know about template strings.

Shameless Plug

I am creating a video series on my youtube channel about how to build a static blogging site using JAMstack.

What are you going to learn from this video series?

• ReactJS, NextJs
• Static Site Generation
• Dynamic Routing
• Material-ui
• MongoDB
• how to build a real time view counter
• a small search engine with mongodb and so on.

Project Demo

You can demo the project from here

View the Project code.

So like, share and subscribe to Cules Coding. It takes a lot of effort to build those videos.

If you have any question, put them on the comment section. And also you can connect to me on any social media as @thatanjan. I post content there. So stay safe and good bye.

About me:

Who am I?

My name is Anjan. I am a full stack web developer from Dhaka, Bangladesh.

What problems do I solve?

I can create complex full stack web applications like social media application, blogging, e-commerce website and many more.

Why do I do what I do?

I love to solve problems and develop new ideas. I also enjoy sharing my knowledge to other people who are wiling to learn. That's why I write blog posts and run a youtube channel called Cules Coding

Think we should work together?

Feel free to contact me

Email: [email protected]

linkedin: @thatanjan

portofolio: anjan

Github: @thatanjan

Instagram (personal): @thatanjan

Instagram (youtube channel): @thatanjan

twitter: @thatanjan

About My channel:

Why would you subscribe to Cules Coding?

Cules Coding will teach you full stack development. I will teach you not only the basic concepts but also the advanced concepts that other youtube channels don't cover. I will also teach you Data Structures and Algorithms with abstraction and without Math. You will also find many tutorials about developer tools and technologies. I also explain advanced concepts and technologies with simplicity.

So what are you waiting for?

Subscribe to Cules Coding
so that my friend you don't miss any of these cool stuffs.