Plantilla literales en JavaScript | Explicado

JavaScript es un lenguaje de programación web de alto nivel que nos proporciona un tipo de datos de cadena donde podemos almacenar cadenas. Las cadenas se pueden implementar con cotizaciones individuales o cotizaciones dobles ("o" ") en JavaScript. var myString = "Hola mundo!";

Sin embargo, el tipo de datos de cadena es limitado y no ofrece muchas funcionalidades como un lenguaje de programación de alto nivel (Python, Ruby) ofrece a sus desarrolladores. Este problema se resolvió cuando se introdujo JavaScript Literales de plantilla En Es6. Veamos qué plantilla hay literales en JavaScript en esta publicación.

Literales de plantilla

Los literales de plantilla nos brindan la capacidad de trabajar con cadenas con más control y más potencia sobre el tipo de datos de cadena tradicional. A diferencia de las cadenas, se usan los literales de plantilla Backticks " en lugar de comillas simples o dobles como se muestra a continuación:

var myString = 'Hola mundo!';

Algunas de las cadenas de plantilla de características nos proporcionan son:

• Interpolación: asignación de variables y expresiones dentro de una plantilla literal.
• Multiline Strings: no necesitamos /norte Para ir a otra línea, simplemente vamos a otra línea en plantilla literal y el navegador sabe que tiene que mostrar esa cadena en otra línea.
• Plantillas etiquetadas: cambia la plantilla literal, y luego, después de cambiar la plantilla, literal devuelve la cadena resultante. Las plantillas etiquetadas son como funciones con la excepción de que se llaman sin el () paréntesis.

Exploremos estas características una por una:

Interpolación

Las variables y las expresiones se pueden interpolarse fácilmente en cadenas utilizando literales de plantilla. Incrustar una expresión dentro de la plantilla literal se conoce como Interpolación. Podemos lograr la interpolación utilizando el $ somevar sintaxis. Veamos un ejemplo:

var myString = 'Hola mundo!';
consola.log ('él dijo: $ myString');

En el código anterior, iniciamos una variable y la accedemos dentro de una cadena utilizando la sintaxis de interpolación. Y para mostrar el resultado en la consola, estamos utilizando la consola.Método log ():

Cadenas multilíneas

Otra aplicación de la plantilla literal es que nos da la capacidad de administrar o escribir cadenas fácilmente en múltiples líneas. Antes de la plantilla, los literales, era un poco difícil y complicado ya que tuvimos que usar la barra de de fondo dentro de las citas dobles para decirle al navegador que la cadena debería estar en la siguiente línea. Por ejemplo:

var myString = "Hola \ n"+"Mundo!";
consola.log (myString);

En el código anterior, inicializamos una cadena y usamos \norte para decirle al navegador que la cadena después \norte debería estar en la siguiente línea.

Ahora veamos cómo podemos lograr la misma funcionalidad usando plantilla literal donde simplemente escribiremos la segunda cadena en otra línea:

var myString = 'Hola
Mundo!';
consola.log (myString);

Podemos ver que las plantillas literales nos hicieron muy fácil escribir cadenas multilíneas y es más fácilmente legible y comprensible.

Plantillas etiquetadas

Otra potente característica de la plantilla de características que nos ofrece es las plantillas etiquetadas que simplemente modifican una cadena de plantilla al agregar un nombre de función al comienzo de la cadena de plantilla. En palabras más simples, una plantilla etiquetada cambia la plantilla literal y devuelve la cadena resultante.

Las plantillas etiquetadas se definen exactamente como una función, sin embargo, cuando llama a una etiqueta de plantilla, no usa el () paréntesis. La sintaxis para inicializar una función de etiqueta se da a continuación:

function tagName (literales, ... sustituciones)
// devuelve alguna cadena

La función de etiqueta toma dos argumentos; El primero es el literales que indican las cadenas literal y la segunda es la ... sustituciones en el que se almacenan las entradas posteriores analizadas para cada sustitución.

Ahora veamos un ejemplo para implementar una función de etiqueta:

// plantilla de etiqueta
función mytagname (myString)
devolver mystring;

// Creación de plantilla etiquetada
outada const = mytagname'hello nombre ';
// Resultado de visualización
consola.log (salida);

En el código anterior, hemos creado una función que está devolviendo una cadena. Después de eso, creamos una plantilla etiquetada y luego llamamos a la función de plantilla de etiqueta anterior para la cual la sintaxis utilizada es: mytagname'hello nombre ' donde el mytagname es la etiqueta de plantilla y el Hello nombre es la plantilla literal. Al final, mostramos el resultado usando la consola.Método log ():

Veamos ahora otro ejemplo en el que pasaremos literales y sustituciones a la función de etiqueta:

// valores
Dejemos saludar = "Hola!";
Let Name = "Jhon";
// función de etiqueta
transformación de funciones (literales, ... sustituciones)
consola.registro (literales); // ["", " mi nombre es "]
consola.log (sustituciones); // ["Hola", "Jhon"]

// Función literal de la etiqueta de llamada
transformar '$ salud Mi nombre es $ nombre';

En el código anterior, primero definimos la función de etiqueta de transformación que toma dos argumentos; "Literales" que es una matriz y tiene contenido estático ("Mi nombre es"), mientras que el parámetro REST de sustituciones también es una matriz que tiene todas las etiquetas (salud, nombre). La salida del código anterior se muestra a continuación:

Conclusión

La cadena estándar del tipo de datos proporcionada por JavaScript no era lo suficientemente potente, por lo tanto, JavaScript introdujo literales de plantilla en ES6. Los literales de plantilla nos dan más potencia sobre las cuerdas y se inicializan usando backticks ". En esta publicación, vimos qué plantillas hay literales en JavaScript junto con las características que los literales de plantilla nos ofrecen sobre la cadena de JavaScript estándar.