JavaScript - Template (literals|strings) - Here Document


Template literals are string literals allowing embedded expressions.

Template literals enables:

in the same syntactic sugar than a bash expression.


Template literals:

  • are enclosed by the back-tick
  • can contain place holders. These are indicated by the Dollar sign and curly braces expression
  • can be tagged. They allow to parse template literals with a function.

\ is the escape character in template literals.


Variable Substitution

variable substitution

var name='Nico';
console.log(`Hello ${name}`);

Back-tick Equality

console.log(`\`` === '`')


Without Template literals
console.log('string text line 1\n' +
'string text line 2');
With Template literals
console.log(`string text line 1
string text line 2`);

Concatenation vs Expression Substitution

Without Template literals
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + 
' and\nnot ' + (2 * a + b) + '.');
With Template literals
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);


Named Variable

var person = 'Nico'; // ${person}
var yearsOfExperience = 1; // ${yearsOfExperience}

var output = myTagFunction`that ${person} is a ${yearsOfExperience} in Javascript`; 
// that Nico is a NewBie in Javascript

function myTagFunction(strings, personExp, yearExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  var str2 = strings[2]; // " in Javascript "

  if (yearExp> 3){
    levelStr = 'Medior';
  } else {
    levelStr = 'Newbie';

  return str0 + personExp + str1 + levelStr + str2;


Unamed Variable (Positional and Inline)

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    return result.join('');

var t1Closure = template`${0}${1}${0}!`;
console.log(t1Closure('Y', 'A'));  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
console.log(t2Closure('Hello', {foo: 'World'}));  // "Hello World!"

Documentation / Reference

Discover More
Card Puncher Data Processing
D3 - DSV

d3-dsv is a library to parse a DSV string (not file) into an array of rows where the property are the headers. To parse a CSV file, see . stringnumbers A template string...
D3 Stratify Output
D3 - Stratify (From CSV to tree)

With a stratify function, you can turn a series of CSV record in a JSON tree object. Since v4 In the stratify object definition, you may change the following properties: the parentId function...
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
Javascript Console Dir
Javascript - (Console) Logging

logging in javascript are functions of the console Console logging permits inspecting a Web application (page). window Level Shows All Shows all console output Errors Only show output from...
Javascript - String

The in javascript. A string in JavaScript is encoded with the ucs-2 16-bit character set. An element of a JavaScript string is therefore a 16-bit code unit. code unitscode pointssurrogate pair Strings...
React - Styled Component

Styled component is a Css In Js solution. Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components. styled-components ...
React Framework - Next.js

Next is a React framework for server-rendered React applications. isomorphic apps (code that runs in the browser or in node) note from the getting started...

Share this page:
Follow us:
Task Runner