• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Jun 01 2015

Diving Into Template Strings with ES6

With the exciting beta release of ECMAScript 6, we thought it would be fun to play with one of its boasted features and provide a little tutorial. Template strings are strings that allow for embedded expressions.

With the exciting beta release of ECMAScript 6, we thought it would be fun to play with one of its boasted features and provide a little tutorial. Template strings are strings that allow for embedded expressions.

The Template Strings feature brings a lot of goodies to JavaScript strings and also helps us to eliminate extra libraries. It is supported by Chrome 41+, IE Tech Preview, Firefoz 35+ and also io.js. Most of the major ES6 transpilers also support this feature letting us start to use it in production immediately.

For template strings, we use the back-tick (` `) character instead of the regular single or double quotes.

Multiline String

Normally, we would use one of the following syntax to create a multiline string:

    
    var string1 = 'This is line 1\n\
        This is line 2';
        // or
    var string2 = 'This is line 1\n' +
        'This is line 2'
    

Now, with template strings, any new line character in source code is treated as an actual new line character. The code can be written as:

    
        var string1 = `This is line 1
            This is line 2`;
    

Variable Substitution

Using template strings, we can not substiute variables on the runtime. To use this feature, wrap the variable name inside ${} in the string template:

    
    var a = 10,
    string=`Value of a is ${a}`;
    console.log(string);// Value of a is 10

This can also be used for expressions:

    
    var a = 10,
        string = `a times 10 is ${a*10}`;
    console.log(string);
    // a times 10 is 100
    function sum (a, b) {
        return a + b;
    }
    
    
    var string2 = `10 + 20 = ${sum(10, 20)}`;
    console.log(string2);
    // 10 + 20 = 30
    

Tagged Templates

Tag is a function that has the ability to intercept and process templates. Tag is a function which gets the individual string fragments in a template as the first argument and variables as other arguments:

    
    function tagFn (strings, ...value) {
            console.log(strings[0]); // "10 + 20 = "
            console.log(values[0]); // 10
            console.log(values[1]); // 20
            return `something else`;
    }
    var a = 10,
        b = 20;
    tagFn` 10 * 20 = ${a+b}`
    // something else
    

This is a pretty powerful feature and can be used for purposes like sanitization of HTML, i18n or something similar.

Written by Mayank Patel

Written by inrhythmAdmin · Categorized: Software Engineering · Tagged: ES6, Node.js, software engineering, tutorial

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Interested in learning more?
Connect with Us
InRhythm

140 Broadway
Suite 2270
New York, NY 10005

1 800 683 7813
get@inrhythm.com

Copyright © 2022 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT