RPGMaker MV ES6 Part 3: Template Literals

Discussion in 'Learning Javascript' started by Kino, Oct 17, 2016.

  1. Kino

    Kino EIS Game Dev Veteran

    Messages:
    515
    Likes Received:
    675
    Location:
    United States
    First Language:
    English
    Primarily Uses:
    RMMV
    Introduction


    Today we discuss template literals, which are a new type of string in JavaScript. Compared to the other string types, template literals are more robust. Here are some of the features of template literals.


    Features

    • Multiline strings
    • Easy syntax for passing variables
    • Expression Interpolation



    In this post, we'll be going through each feature in code snippets.


    Multiline Strings


    Unlike regular strings in JavaScript, which suffer from being a single line, template literals support multiline strings, which means you can actually have formatted text in a template literal. This is an extremely powerful feature because it allows developers to construct complicated strings in RPGMaker MV. This means you can create formatted text strings in the code that can be displayed to the user without having to use linebreaks, tabs, spaces; it adds a lot of cleanliness. Which brings me to the next point, expression interpolation.


    Expression Interpolation


    Expression interpolation could be considered a fancy word for passing variables to a template literal or a string. We could always do this in JavaScript before using the "+" symbol. The plus symbol allowed us to concatenate our variable with a string no problem. However, now, we have a simpler way to pass variables into a string, that looks a lot cleaner, and is much easier to read. 


    You'll see the power of both in the code example below, with a comparison of what it's like in ES5 vs ES6.


    Code Example


    //Template Literals

    //Multiline Strings

    //ES5
    var es5string = "Hello sir, welcome to our store, I'm sure you've had"
    + "\na tough day sir."
    + "\nDon't worry, we can still help you!";

    //ES6
    var es6string = `Hello sir, welcome to our store, I'm sure you've had
    a tough day sir.
    Don't worry, we can still help you!`;

    // Expression Interpolation
    var a = 20;
    var b = 55;
    var name = "Harold";

    //ES5
    var es5string2 = name + ": the total is " + (a + b) + ".";

    //ES6
    var es6string2 = `${name}: the total is ${a+b}.`;

    console.log(es5string2); //Harold: the total is 75.
    console.log(es6string2); //Harold: the total is 75.

    //As you can see the es6 way of doing thing is a lot easier, when you want a string to span multiple lines, or
    //Just want to insert variables into a string, you can even put object properties as potential variables


    As you can see, the ES6 syntax is a lot cleaner and easier to use when you to include multiple lines in a single string or variables. One thing it definitely increases is code readability. If you wanted to use the ES5 syntax, you'd have to insert line breaks, if the string is too long, you have to concatenate -- in short too unwieldy.


    Conclusion


    With that said, I hope this post helps you improve your code, and if you have any suggestions please comment down below!


    And if you want to view more posts like these: http://endlessillusoft.com/category/tutorials/
     
    Last edited by a moderator: Oct 23, 2016
    #1
    Clock Out and DoubleX like this.

Share This Page