
JavaScript (ES6)+ : String Concatenation with Template Literals
Have you ever ran into code that looks something like this?
const firstName = "Paul"
const lastName = "Halliday"
const greeting = "Hello, my name is " + firstName + " " + lastName
// Hello, my name is Paul Halliday
In order to combine the firstName
and lastName
into a greeting
, we're using the +
operator.
Whilst this works in practice, it's kind of annoying because we have to manually add spaces, whitespace, and then remember to concatenate our next variable.
Thankfully, there's a better way to do this.
String Interpolation using Backticks
We can use the backtick ``
(found next to Z or 1) on your keyboard instead of quotes to concatenate strings as seen here:
const firstName = "Paul"
const lastName = "Halliday"
const greeting = `Hello, my name is ${firstName} ${lastName}`
Inside of our backticks we're using the ${expression}
syntax, where expression
resolves to the function or variable that we want to show.
Browser support
As always, you should be careful about using any new syntax without a compilation step/polyfill.
Here's the list of browsers that support this syntax: https://caniuse.com/#feat=template-literals