Learn How to do String Interpolation with JavaScript

with jsdev96

Jy6ebc47qq6yl0g83ku4?cache=true

Why String Interpolation is Important

String interpolation is a really useful programming language feature that allows you to inject variables directly into a string.

Until the release of ES6, string interpolation was not available in JavaScript. The lack of this feature has lead to horrifying concatenated code that looks like this:

function crazyString(something, someone, somewhere) {
  return someone + " was looking for " + something + " in the general vicinity of " + somewhere;
}

What’s the wrong with this? It is difficult to read and understand, especially when the function grow more complex. No developer wants to maintain a bunch of data that is frankenstein’d together to make a human readable sentence. You have to keep track of all the white space between each string, which is easy to overlook. At no fault of their own, many developers have been forced to write JavaScript like this because JavaScript simply lacks string interpolation.

For comparison purposes, lets look at how the Ruby programming language handles string interpolation.

def function(something, someone, somewhere)
  "#{someone} was looking for #{something} in the general vicinity of #{somewhere}"
end

By surrounding the arguments or variables in #{} syntax, ruby makes it possible to avoid that ugly concatenation. Ok neat, but how do we do this with JavaScript?

ES6 to the Rescue

At the time of writing this lesson, ES6 is not fully adopted in all browsers, but BabelJS is a compiler that coverts ES6 code into old school JavaScript. Implementing Babel is easy, so there is really no excuse not to take advantage of ES6 in this day and age.

Let’s rewrite the function in the previous step using ES6 string interpolation.

function organizedString(something, someone, somewhere) {
  return `${someone} was looking for ${something} in the general vicinity of ${somewhere}`;
}

Way cleaner and easy to read. You can do it too in three easy steps!

  1. Make sure BabelJS is included in your project
  2. Wrap your string in back-ticks, like this `string`.
  3. Embed your variables with ${}, like `string ${variable}`

Important: It is necessary that any string using interpolation be wrapped in `back-ticks`, as opposed “double quotes” or ‘single quotes’. When you use back-ticks, you are actually creating a Template Literal, which is just a string that can accept embedded code. The template literal has a few other tricks up its sleeve, but I’m going to save those for a future lesson.

Within my JavaScript projects, I have found string interpolation to be one of the most useful aspects of ES6.

Do Math Inside a JavaScript String (or Template Literal)

This Section is Locked!

Unlock this lesson for free to view all sections.

Signup and Unlock for free

Grades

a

Graded

Thank you for explaining something that confused me so clearly.

Av 1 6de6c68998209aa73ceb4952e20f35de3e0e321b80400da723550f17f6175432
a 100.0%
Technology Code

  • 3 Unlocks
  • 4005 Total Reads
  • 12 minutes Est. Learning Time