Template Literals

By  on  

Seemingly every language has a template string enhancement, and within JavaScript we've written our own to allow more seamless development without the need to concatenate everything.  Some of these template helpers even allow for looping, iteration, and conditional support.  Native implementations always start small but I'm excited about template literals in JavaScript!

The JavaScript

The template format is very simple:  backticks(`) instead of single or double quotes, and a $ for interpolation wrapping:

// Basic interpolation
var name = 'David';
console.log(`Hi, my name is ${name}`); // Hi, my name is David

// Math :)
var one = 1;
var two = 2;
console.log(`Your total is: ${one+two}`); // Your total is: 3

// More math
console.log(`Another total is: ${one + two * 2}`); // Another total is: 5

// Object properties
var obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

You can also use template strings for basic new line acceptance:

var myString = `Hello

I'm a new line`; // No error!

The JavaScript template string feature is a nice add, and will first become available in Firefox.  This template string feature isn't groundbreaking but it's a nice enhancement and something long overdue, if only for multi-line strings.

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Styling CSS Print Page Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

  • By
    Check All/None Checkboxes Using MooTools

    There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2. The XHTML Note the image with the ucuc ID -- that...

Discussion

  1. Isuru
    var name = 'David'; 
    var me = 'Isuru';
    console.log(Thank you Mr. ${name}! Great to know this. :) - ${me});
    
    • Ha! Great one Isuru!

      Thanks David! :D

  2. Steve

    2 questions:

    1.) What happens for undefined/null variables? Are they swapped for blanks or …?

    var foo = "Cars";
    //var bar = 37;
    var baz = null;
    
    alert(`You have ${bar} ${foo} left in your ${baz}!`);
    >>> a.) "You have ${bar} Cars left in your ${baz}!"
    >>> b.) "You have undefined Cars left in your null!"
    

    2.) Just to clarify… are the templates “evaluated” when the string variable is defined? or at runtime when the line is evaluated?

    var count = 0;
    
    function doIt(){
      alert(`You have ${count} new messages`);
    }
    
    count = getMessageCount();//returns 53
    
    doIt();
    
    >>> "you have 0 new messages"
    >>> "you have 53 new messages"
    
    • > What happens for undefined/null variables?

      The same as what happens when they are concatenated normally.

      > are the templates “evaluated” when the string variable is defined? or at runtime when the line is evaluated?

      The line is evaluated at runtime, when the string variable is defined. Remember JS doesn’t do a compile step. In your example, every time the doIt function is called, it creates a new template string. When the template string is created, the template string references will be evaluated and interpolated.

    • Gaurav Khurana

      they are evaluated as string null or undefined ;
      var test = null, greet = ‘hello world’, obj=undefined;
      ${test} ${greet} ${obj} // “null hello world undefined”
      you may use this to ignore them
      ${test||''} ${greet} ${obj||''} ; //” hello world “

  3. Multi-line strings is definitely something to look forward to – I’ve been using them in CoffeeScript for years.

    I have to say using ` and ${} is a bit weird, where other languages simply use " and #{}.

    • Can’t use those because of backwards compatibility.

  4. The backticks are pretty horrible, especially since there doesn’t seem to be a reason to not just keep both ‘ and ” for templating. Both are active strings already, accepting \t and \n and the like as macros (the most minimal form of a template macro). Given the proliferation of mustache, I’d have expected something like “string with {{varContent}}”. No reason to invent a new quoting symbol (and ` is an diacritic, not a quote mark of any sort. TeX made that mistake in the 80s, but has since recovered), and arguably, no reason to invent a new syntax for the templating macros when the world’s already using one that’s highly popular =(

    • > No reason to invent a new quoting symbol

      Why do you think they picked the new syntax? I’m sure that the first thing they thought of was reusing existing syntax, but not breaking existing websites is a pretty good reason to invent a new quoting symbol. A standard set of substitutions like \t and \n is not at all comparable to accepting arbitrary variables and expressions.

      What you are suggesting would break and potentially expose cross-site scripting vulnerabilities in websites expecting quoted strings to be inert. Future changes to JS need to be backwards compatible with older versions, at least those still in service – this even means some affordances for avoiding conflicts with popular libraries e.g. MooTools vs Array.prototype.contains: https://esdiscuss.org/topic/having-a-non-enumerable-array-prototype-contains-may-not-be-web-compatible

      There’s little point raging about this, it’s done and happening. If you can’t or won’t change something there’s little point complaining about it. And at the end of the day what does it matter which quoting symbol is used? It doesn’t matter at all.

  5. Emil

    Question: Is there any other use for this than getting a multiline string?

    
    Is this just the easiest way
    to get a multiline string into js?
    
    

    Also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings

  6. Emil

    So the code above should be wrapped in a <script type="text/template"> tag.

    Tagged templates could actually help with exactly this, just safeHtml ${userinput} :)

  7. In case your wondering about performance. :)
    http://jsperf.com/template-strings-perf/3

  8. balaganesh

    Hey David,

    call function using template literals

    //from https://michelenasti.com/2018/09/19/Javascript-chiamare-funzioni-senza-usare-parentesi-(what!).html
    function hello(name) {
    	console.log(How are you ${name});
    }
    
    // The convention is to write the string right 
    // after the function name...
    helloMichele 
    //-> How are you Michele 
    
    //...but you can put a space too 
    hello Michele 
    //-> How are you Michele

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!