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

Descubre los principales usos de las comillas invertidas en Javascript

Gerardo Fernández

--

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()}`;

--

--

Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React