La adición de literales de plantilla en ECMAScript 6 (ES6) nos permite interpolar cadenas en JavaScript.
En palabras más simples, podemos usar marcadores de posición para inyectar variables en una cadena. Puede ver un ejemplo de interpolación de cadenas utilizando literales de plantilla en el siguiente fragmento:
const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); En primer lugar, verá que estamos usando comillas invertidas para literales de plantilla. Además de eso, también tenemos el formato de ${placeholder}, que nos permite insertar un valor dinámico en la cadena. Todo lo que ${}esté dentro se evalúa como JavaScript.
Por ejemplo, podríamos escribir Earth is estimated to be ${age + 10} billion years old.y funcionaría como si lo hiciéramos const age = 4.5 + 10;.
¿Cómo lo hicimos antes?
Antes de los literales de plantilla, lo habríamos hecho así:
const earthAge = "Earth is estimated to be " + age + " billion years old."; Como puede ver, ya tenemos muchas comillas para una cadena simple. Imagina que tenemos que insertar un puñado de variables. Puede transformarse rápidamente en una cadena compleja que no es muy legible. Por lo tanto, los literales de plantilla hacen que las cadenas sean más limpias y legibles.
Sin embargo, este es solo un caso. Veamos más casos de uso de literales de plantilla.
Cuerdas multilínea
Otro uso útil de las cadenas de plantillas son las cadenas de varias líneas. Antes de los literales de plantilla, usamos \npara nuevas líneas, como en console.log('line 1\n' + 'line 2').
Para dos líneas, esto podría estar bien. Pero imagina que queremos cinco líneas. Una vez más, la cadena se vuelve innecesariamente compleja.
const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; El fragmento anterior demuestra una vez más lo sencillo y limpio que se vuelve escribir cadenas de varias líneas con literales de plantilla.
Como ejercicio, intente convertir la cadena anterior para usar concatenación y nueva línea \n.
Expresiones
Con literales de plantilla, también podemos usar expresiones en las cadenas. Qué significa eso?
Por ejemplo, podríamos usar expresiones matemáticas como multiplicar dos números. El fragmento a continuación ilustra eso:
const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); Sin literales de plantilla, tendríamos que hacer algo como esto:
const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; Escribir una cadena como la anterior puede volverse rápidamente complejo y confuso. Como seguimos viendo, las plantillas literales hacen que sea más fácil y elegante incrustar expresiones en la cadena.
Operador ternario
Con la interpolación de cadenas, incluso podemos usar un operador ternario dentro de una cadena. Esto nos permite verificar el valor de una variable y mostrar diferentes cosas dependiendo de ese valor.
Veamos el siguiente ejemplo:
const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); En el ejemplo anterior, verificamos si el monto total es más de diez dólares, por ejemplo.
Si el importe es superior a diez, avisamos al usuario que se rechazará el pago con tarjeta. De lo contrario, se acepta el pago con tarjeta. Como puede ver, la interpolación de cadenas nos permite hacer cosas interesantes con cadenas.
Conclusión
La adición de literales de plantilla en ES6 nos permite escribir cadenas mejores, más cortas y claras. También nos da la capacidad de inyectar variables y expresiones en cualquier cadena. Esencialmente, todo lo que escriba dentro de las llaves ( ${}) se trata como JavaScript.
Por lo tanto, podemos usar literales de plantilla para:
- escribir cadenas de varias líneas
- incrustar expresiones
- escribir cadenas con el operador ternario
Si le gusta lo que escribo, es probable que le encante lo que le envío por correo electrónico. Considere suscribirse a mi lista de correo. Si no es fanático de los boletines , siempre podemos mantenernos en contacto en Twitter .