Modern ES6+ Javascript Pt. 4
Part 4 - Strings and ES6 Template Strings
Welcome back, in the previous article we covered the Number Datatype within JavaScript. Now we will cover Strings and also ECMAScript 6, Template Strings!
Strings
In ECMAScript 5 and below, A string literal could only be wrapped in single quotes or double quotes. It can contain zero or more characters. The \(backslash) is the escape character. JavaScript was built at a time when Unicode was a 16-bit character set, so all characters in JavaScript are 16 bits wide. The escape sequences allow you to insert characters into strings that are not normally permitted, such as backslashes, quotes, and control characters.
Concatenation: Strings are immutable. Once you add them, they can never be changed. That said, it is very easy to make a new string by concatenating other strings together with the + operator.
Template Strings
Also known as Template literals, ECMAScript 6’s template literals provide syntax for creating domain-specific languages (DSLs) for working with content in a safer way than the solutions available in ECMAScript 5 (and below).
In Technical terms, To allow developers to solve more complex problems, this scheme extends the ECMAScript syntax with syntactic sugar to allow libraries to provide DSLs that easily produce, query, and manipulate content from other languages that are immune or resistant to injection attacks such as XSS, SQL Injection, etc.
That said, in reality, template literals are simply ECMAScript 6’s answer to the following features that JavaScript lacked in ECMAScript 5 and in earlier versions:
- Multiline strings: A formal concept of multiline strings
- Basic string formatting: The ability to substitute parts of the string for values contained in variables
- HTML escaping: The ability to transform a string so it is safe to insert into HTML
The working community of ES6 decided that instead of adding more functionality to JavaScript’s already existing strings, they will provide template literals that would represent an entirely new approach to solving these problems. In simple terms, template literals just act like those regular strings but delimited by backticks (`) instead of double or single quotes. For example, consider the following:
As you can see, the above code shows how the variable message contains a normal JavaScript string. The template literal syntax is used to create the string value, which is then assigned to the message variable. If you want to use a backtick within a string, you can just escape it with a backslash (), as like below:
Please remember that there’s no need to escape either double or single quote inside the template literals.
Multiline Strings: Since the first version of the language, JavaScript community has been wanting a way to create multiline strings. But unfortunately, when you’re using double or single quotes, strings must be completely contained on a single line.
That said, JavaScript does have a workaround for creating multiline strings. You can create multiline strings by using a backslash () before a newline. Here’s an example:
As you see, this string has no newlines present when printed to the console because the backslash is treated as a continuation rather than a newline. If you want to show a newline within the output, you’d need to manually include it:
Other pre-ECMAScript 6 attempts to create multiline strings usually relied on arrays or string concatenation, such as the following:
In pre-ECMAScript 6 era, creating multiline strings for arrays found to be very useful for HTML escaping, and/or proper indentation of your HTML within JavaScript. You would simply do something like:
This may seem useful to you and make some sense but honestly, come ECMAScript 6, this sounds like you are just faking into the DOM. Clearly, not a great way! Here’s how you do them in ES6.
Making Substitutions: To this point, template literals may just look like to you as fancier versions of normal JavaScript strings. But, the real difference between the two is in template literal substitutions. It allows you to embed any valid JavaScript expression inside a template literal and output the result as part of the string. Here’s how:
The substitution ${friendsName} accesses the local variable name and inserts it into the friendsMessage string. The message variable would then holds the result for the substitution.
A template literal can access any variable accessible in the scope in which it is defined. Attempting to use an undeclared variable in a template literal throws an error in strict and non-strict modes.
As all substitutions are just JavaScript expressions, you can substitute more than just simple variable names. You can easily embed calculations, function calls, and more.
References
This story has been proudly referenced by these books below:
Thanks a lot…
If you would like to hire me for your next cool project, or just want to say hello… my twitter handle is @harmanmanchanda for getting in touch with me! My DM’s are open to the public so just hit me up.