If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Oklahoma City
    Member #
    962 times

    JavaScript Template Literals

    I'm super bored, so thought I'd point out something most people don't know is available in JS: template literals.

    Template literals are like strings, but with added functionality. Instead of quotes, to define a template literal, you'll use backticks (under the escape key on most keyboards).

    var text = `A template literal`;
    On the surface, template literals behave much like strings. If you log the line of code above to the console, it will log out just like a string.

    Template literals have some functionality that expands what you can do with a string. First, they accept preformatted and multi-lined text. So:

    var multiline = `A 
    When logged to the console, multiline will log out on three separate lines.

    Even more useful, template literals allow for expression interpolation, which works similar to string concatenation.


    // the old way
    var concat = "I have " + (4 * 6) + " beers left.";
    // template literal way
    var beers = 4 * 6;
    var interp = `I have ${beers} beers left`;
    Both examples will output the same sentence. As you can see, you can add the variable into the template literal directly. Additionally, the interpolation syntax can take a full-on expression, so:

    var todrink = "12";
    var expressinterp = `I have ${4 * 12 / 2 * 1} beers left. I will drink ${parseInt(todrink)} of them`;
    This example will calculate the first expression, and convert the second to an integer.

    Template literals are a newer way to create expressive string output, and create text templates.

    Have a repeated set of elements on a page, like breadcrumbs on a single page site?

    Create the template:

    HTML Code:
    var template = `<ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <nav class="breadcrumbs"></nav>
    <!--- content --->
    <nav class="breadcrumbs"></nav>
    <!--- content --->
    <nav class="breadcrumbs"></nav>
    <!--- content --->
    Then, in your JS file:

    window.addEventListener('load', function(){
      // Select the navs
      var n = document.querySelectorAll('.breadcrumbs');
      // Loop thru and apply the template to each
        el.innerHTML = template;
    This code will add our list to the inside of each of the breadcrumbs nav elements.

    Template literals are an ES6 feature. Browser support is deep, but there is no support in IE. Google Traceur ES6 polyfill and the Babel ES6 polyfill add support for template literals except for the toString() method.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 11:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: