Javascript. Cómo funcionan las comillas invertidas (``)

Descubre los principales usos de las comillas invertidas en Javascript

Photo by Nhu Nguyen on Unsplash

English version: https://medium.com/@ger86/javascript-how-backticks-work-de269e0fb8ba

Como sabréis, en Javascript existen dos formas principales para declarar strings:

• Mediante comillas simples '' .
• Mediante comillas dobles "" .

Sin embargo, con la especificación ES2015 llegó la posibilidad de crear lo que se conoce como “template literals” o “template strings” para lo cual basta con encapsular texto entre comillas invertidas:

`some text`

Esto nos dará una serie de ventajas con respecto a los dos métodos principales que describiré a lo largo de este artículo. ¡Vamos a verlos!

Concatenar e interpolar strings

Probablemente éste sea uno de los usos más extendidos y popularizados de las comillas invertidas ya que nos va permitir concatenar e interpolar strings de modo que nuestro código quede mucho más limpio.

Vamos a verlos con unos cuantos ejemplos comparando la sintaxis “antigua” con la que nos proveen las comillas invertidas.

const name = 'Gerardo';
const surname = 'Fernández';
const telephone = '123 123 123';
// "Old syntax"
const userInfo = 'User info: ' + name + ' ' + surname + ' ' + telephone;
// "New syntax"
const userInfo = `User info: ${name} ${surname} ${telephone}`;

Como podéis ver, gracias a los template literals obtenemos un código mucho más fácil de leer y legible, ahorrándonos la concatenación de múltiples strings mediante el operador + .

Por supuesto, también podemos ejecutar código dentro de los template strings:

const user = getUserFromApi(); 

// "Old syntax"
const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();
// "New syntax"
const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;