RPGMaker MV ES6 Part 3: Template Literals

[Kino]

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/