Jurrien Piris

Full-stack developer

Concatenating strings and variables without a mess

When working with JavaScript strings, you will often need to combine two or more separate strings together to form one string. Conversely, at times you will want to break up a long string into multiple strings simply to make your source code more readable. In either case, the same techniques are used to bind multiple strings back together to form a single string. You have probably heard about Handlebars or you might even used JS template engines to render your HTML and keep everything nice and clean. Or do you catch yourself concatenating your strings and variables with the plus concatenating operator? ES6 has a feature so called: template literals. I see that a lot of people are not using it yet, however I find this one of the greatest feature - ever. :)

Handlebars example
The following data:
{
  firstname : 'Jurrien',
  lastname  : 'Piris'
}

And with Handlebars syntax

{{ firstname }} {{ lastname }} // Will become

Jurrien Piris


String operator

Besides the plus sign being a arithmetic operator it is alsof being used as string operator. The + operator does string concatenation as soon as one of its operands is a string. Then the other operand is converted to string. It is used to signify that one whole string is to be 'added' to another whole string. In my opinion this is quickly getting a mess and therefore unreadable when you have huge chunks of HTML with variables in it.

let firstname = 'Jurrien';
let lastname = 'Piris';

let string = "Hey "  + firstname + ' ' + lastname;

// Bigger pile of shit
var html = "";

html +='<div class="cookie-message">';
html +='    <div class="' + class + ' cookie-message-content">';
html +='            <div class="' + class + ' cookie-message-content-cookie">🍪</div>';
html +='                <div class="cookie-message-content-text">';
html +=                     message;
html +='                </div>';
html +='            </div>';
html +='    </div>';
html +='</div>';

ES6 template literals

First of all, here are things we should know about template literals.

1. Template literals is just another way of writing strings that makes use of backticks instead of single quotes '' or double quotes"". It was referred to as template strings prior to ES6.
2. To embed an expression (placeholder) in template literals, we enclose them in a dollar sign and curly braces like this: ${expression}.
3. Everything in the back-ticks gets passed to a default function which concatenates to a single string unless a function is specified.

// Simple example
let firstname = 'Jurrien';
let lastname = 'Piris';

let string = `Hey ${firstname} ${lastname}`;


// Function embedding
let getAge = () => 22;
console.log(`Currently I am ${getAge()} years old.`); // Currently I am 22 years old.


// Multi line strings
console.log("I am the first line \n, I am the second line \n I am the third line.");


// Mathematical expression
console.log(`Today I have eaten ${2+1} cookies and ${1+1} bags of chips.`) // Today I have eaten 3 cookies and 2 bags of chips.

Look how easy and clean this can be done with ES6 template literals. Thank you for reading. :)