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

Descubre los principales usos de las comillas invertidas en Javascript

Photo by Nhu Nguyen on Unsplash
  • Mediante comillas dobles "" .
`some text`

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.

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}`;
const user = getUserFromApi(); 
// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;

No es necesario escapar los caracteres “ y ‘ mediante \

Otra de las ventajas de emplear las comillas invertidas ( `` ) es que ya no es necesario escapar las comillas dobles ( "" ) o las simples ( '' ), algo a lo que habitualmente nos vemos obligados cuando trabajamos con idiomas como el inglés:

const foo = 'Can\'t connect to the server';const bar = `Can't connect to the server`;
const foo = "Error: \"Introduce a valid email\"";const bar = `Error: "Introduce a valid email"`;

Strings en varias líneas

En Javascript no es posible declarar strings en varias líneas. Por ejemplo, si intentamos lo siguiente:

const html = "<article>
<h1>Article title</h1>
</article>";
SyntaxError: "" string literal contains an unescaped line break
const html = "<article> \
<h1>Article title</h1> \
</article>";
const html = '<article>' +
'<h1>Article title</h1>' +
'</article>';
const html = `<article>
<h1>Article title</h1>
</article>`;
const string = `First line
Second line`
First
Second

Tagged templates

Otra de las características que nos aportan las comillas invertidas es la posibilidad de crear lo que se conocen como tagged templates (también conocidos como tag functions), algo que es usado por librerías tan populares como Apollo o Styled Components:

// Apollo queryconst query = gql`
query {
...
}

// Styled components
const Container = styled.div`
width: 1000px;
background: red;
`;
<div style="width: 1000px; background:red">
...
</div>
function foo() {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
const varOne = 'bar';
const varTwo = 'zeta';
foo`This is bar: ${varOne} and zeta: ${varTwo}`;
["This is bar: ", " and zeta: ", ""] (array)
bar (string)
zeta (string)
  • el resto de argumentos ( arguments[1] y arguments[2] ) son el resultado de las variables ya interpoladas ( bar y zeta )
function foo(literals, ...expressions) {
console.log(literals);
console.log(expressions[0]);
console.log(expressions[1]);
}
const name = 'Gerardo';
const email = 'info@mail.com';
console.log(i18n`Hi ${name}, your email is ${email}`);// Hola Gerardo, tu email es info@mail.com

Conclusiones

Como habéis podido ver, aunque al principio pueda ser una característica de Javascript que pase desapercibida, los tagged template literals nos dan mucha versatilidad a la hora de escribir código y se han vuelto cada vez más populares gracias a librerías como Apollo o los Styled Components.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store