JS: Why we should also use formatted strings
Tags: webdev, tutorial, javascript, codequality
Published: 2021-02-13 12:17:25

`Hello World!` Today we will study why formatted strings (template literals) are so useful for programmers and how to use them. 

--- 

The first important thing to notice that a lot of different programming languages allow us to use formatted strings. 
We should always use formatted string because they provide us a better looking and modern code. We get rid of this multitude of + signs with a more elegant dollar sign (with curly brackets {}). 

For example in this article about how [to implement a random background color change in javascript](https://dev.to/devlorenzo/js-random-background-color-change-4pof) I could have used:
1. Normal string
```
function random_bg_color() {
    let x = Math.floor(Math.random() * 256);
    let y = Math.floor(Math.random() * 256);
    let z = Math.floor(Math.random() * 256);
    let bgColor =  "rgb(" + x + "," + y + "," + z + ")";
}
```
2. Formatted string 
```
function random_bg_color() {
    let x = Math.floor(Math.random() * 256);
    let y = Math.floor(Math.random() * 256);
    let z = Math.floor(Math.random() * 256);
    let bgColor =  `rgb( ${x}, ${y}, ${z} )`;
}
```
Check how horrific, awful, shaking and macabre this line is `let bgColor =  "rgb(" + x + "," + y + "," + z + ")";` compared to the elegance of a formatted string. Now imagine the same in a real-life project with hundreds of lines of codes and dozens of variables. You can't multiple adjectives, but it will be a hundred times horrific, awful... 
A formatted string is very easy to obtain, you place a back-tick a the start and one at the end of the expression (like a quotation mark) and then write a normal sentence. Variables are differentiated with a dollar sign. We don't have to worry about spacing or capitalizing problems after a point.

---

Another cool feature of template literals is that they allow you to write multiline code:
```
let multiline = `Remember the like
and follow ${me} for more content`;
```

--- 

Just to remember you, $ is obtained by pressing shift+4. Curly brackets with shift+alt+é for { and shift+alt+* for }.
Back-ticks vary by keyboard and country -[here a full list](https://superuser.com/questions/254076/how-do-i-type-the-tick-and-backtick-characters-on-windows). 
Principally we have:
Mac - ALT + 9 
Windows: ALT+96
Linux: ALT+’ (ALTGR + apostrophe)
On a laptop with windows, for example on an Italian keyboard, we can't do ALT+96 so we have to install a Linux keyboard or to open Charmap. To open it: Windows logo command + r, then you write Charmap, this will open:
![image](https://dev-to-uploads.s3.amazonaws.com/i/1xb507r9h2i1jr5boqfg.png)
I usually leave it open while coding and return copying the backtick every time y need it. 

---

The last thing to notice is that template strings in javascript are (or at least I think) the best in the big programming language market. We don't have to write the f like in python or to do complicate things and it's really nice looking. I also need to say that they allow you to immediately differentiate variables from strings.

---
Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue 

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!