Fork me on GitHub

Ahad Bokhari

ES6 - String & Template Literals

Edit   ·   words

We all know that JavaScript strings are limited and lacking in capabality, especially if you’re coming from Ruby or Python. Template literals are a feature that developers will love and are basically just string literals allowing embedded expressions.

  • ES6 introduces string interpolation, string formatting, multiline strings and embedded expressions with template literals
  • Template strings use (``) rather than single or double quotes used with regular strings
  • Placeholders using the ${ } syntax are used from string substition and works fine with any kind of expression
    • expressions in between the placeholders (${expression}) and text b/w them get passed to a function

Familiarizing yourself with the syntax:

const a = `this is a template literal`;
console.log( typeof a ); // => string

const b = `You can use template literals in multiline
statements without using \\n`;
console.log( b ); // => yup, it works!

const c = `Some string text ${expression}`;

Use the following syntax to embed expressions within template literals

const a = 100,
      b = 100;
console.log(`The sum of ${a} * ${b} is ${a * b}`); 
// => The sum of 100 * 100 is 1000

const user = { name: `Ahad Bokhari` };
console.log(`You are now logged in, ${ user.name.toUpperCase() }. `);
// => You are now logged in AHAD BOKHARI