Concatenated strings vs ES6 template literals in React

Introduction.

String concatenation is the process of joining one string to the end of another string, for example concatenation of “happy” and “holiday” is “happy holiday”

Template literals are literals bound with back-ticks (`) allowing embedded expressions called substitutions.Template string are sometimes informally called template strings, however they are not string literals and can not be used everywhere a string literal can be used. Template literals provide us with an alternative to string concatenation .They also allow us to insert variables in to a string.

Key takeaways

• What is concatenated strings
• What is ES6 template literals
• How to concatenate strings in React
• How to use template literals in React
• Difference between concatenated strings and template literals

ES6 template literals

Template literals were introduced in ECMAScript 2015/ ES6 as a new feature. It provides an easy way to create multi-line strings and perform string interpolation.

Why would I use this new template literal method? I would recommend switching to the new format for a few reasons.

• One of which is that it requires fewer characters. So the extra space that you would need to use the plus before adds extra length to your code, causing it to look more bloated
• It no longer needs to escape single or double quotes. Yes, that’s right. You no longer need to put back slashes in order to close quotation marks.
• it’s much easier to read. With the dollar sign curly bracket syntax you can more clearly see what parts of your strings are using a variable.At a glance, I can quickly see that this is a variable.
• with my code editor, it would have improved syntax highlighting

How to use template literals in react

When working with template literals in JSX, you have to make sure every expression inside your back-ticks ( ${expression} ) is going to result in a string.

Template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces ( ${expression} ).

Difference between concatenated strings and template literals

Unlike concatenated strings, we can slot expressions directly into template literals, meaning that we can effortlessly pull values into our string.

If we use ${ and } to enclose the name of a variable, and that variable's value will be spliced into our string.

Let’s us rewrite our example from concatenated string:

Console.log("Hello,welcome to" +website.name+"!\"message goes here\" ") ;

To template literal:

Console.log(`Hello,welcome to ${website.name} !"message goes here"` ) ;

Happy learning!