Cómo usar los literales de plantillas ES6 en JavaScript
En programación, el término “literal” se refiere a notación de valores en codigo. Por ejemplo, notamos un valor de cadena con un cadena literal que son caracteres encerrados entre comillas dobles o simples ("foo", 'bar', "¡Esto es una cuerda!").
Literales de plantilla fueron introducidos en ECMAScript 6. Funcionan de manera muy similar a los literales de cuerdas; ellos producen valores de plantilla y valores de plantilla en bruto, ambos de los cuales son cadenas.
Sin embargo, a diferencia de los literales de cadena, los literales de plantilla pueden producir valores que son cuerdas multi-alineado, algo que se puede lograr en una cadena literal solo por añadiendo nuevos caracteres de línea (\norte) a ello.
Los literales de plantilla también pueden crear cadenas con otros valores (derivado de expresiones) para las cuales tendría que usar el operador más en una cadena literal ("tu id es:" + idNo; dónde idNo es una expresión variable con un valor numérico).
Todas estas características hacen que los literales de plantilla sean más preferibles a crear valores de cadena.
Sintaxis de los literales de plantilla.
El delimitador de una plantilla literal es el comezón ' personaje (También conocido como el carácter de comillas o el símbolo de acento grave). Una expresión dentro del literal (cuyo valor es evaluado durante el tiempo de ejecución e incluido en el valor final producido por el literal) se incluye en llaves con un signo de dólar precedente PS.
'string $ someExpression more string'
Aquí están algunas ejemplos de literales de plantilla productor sin alterar, sustituido (expresiones reemplazadas con sus valores evaluados), y multilínea instrumentos de cuerda.
console.log ('hello'); // hola nombre var = "Joan"; console.log ('hello $ name'); // hola Joan console.log ('Querida Joan, Bienvenido.'); // Querida Joan, // Bienvenida. Escape y valores de plantilla en bruto
En una plantilla literal, la ' (retroceso), \ (barra invertida), y PS caracteres (signo de dólar) debe ser escapado utilizando la Personaje de escape \ Si van a ser incluidos en el valor de su plantilla..
Por defecto, todas las secuencias de escape en un literal de plantilla son ignorado. Si desea incluirlo en la salida, necesita usar su valor de plantilla en bruto.
console.log ('código en línea en marca: \' código \ "); // código en línea en marca: 'código' var nombre =" Joan "; console.log ('hola \ $ nombre.'); / / hello $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. los String.raw método valores de plantilla en bruto de salida (La forma de cadena sin formato de un literal de plantilla). En el código anterior, la llamada a la función del crudo método se conoce como “plantilla etiquetada”.
Plantillas etiquetadas
Una plantilla etiquetada es una Llamada de función dónde, en lugar de los paréntesis habituales (con parámetros opcionales) además del nombre de la función, hay una plantilla literal De la cual la función obtiene sus argumentos..
Entonces, en lugar de llamar a una función como esta:
foo (ArgumentsForFoo);
Se llama así:
foo'ATemplateStringProvidingArgumentsForFoo ';
La función foo se llama un función de etiqueta. Su primer argumento recibido de la plantilla literal es un formación llamó al objeto de plantilla.
El objeto de plantilla (una matriz) tiene todos los valores de cadena interpretado a partir de la plantilla literal y tiene una crudo propiedad (otra matriz) que contiene todos los valores de cadena sin procesar (sin escape) interpretado desde el mismo literal.
Siguiendo el objeto de la plantilla, los argumentos de la función de etiqueta incluyen todos evaluado valores externos Presente en ese literal (los encerrados entre las llaves PS).
En el código de abajo, el foo la función se crea para dar salida a sus argumentos. La función entonces se llama en la plantilla etiquetada de moda, con una plantilla literal que lleva dos expresiones (nombre y carné de identidad).
nombre var = "juan"; ID de var = 478; foo'hello $ nombre. su id es: $ id. '; función foo () console.log (argumentos [0]); // Array ["hola", ". Tu id es:", "." ] console.log (argumentos [1]); // John console.log (argumentos [2]); // 478
El primer argumento emitido es el objeto de plantilla portando todas las cadenas interpretadas a partir de la plantilla literal, los argumentos segundo y tercero son los valores evaluados de las expresiones, nombre y carné de identidad.
los crudo propiedad
Como se mencionó anteriormente, el objeto de plantilla tiene una propiedad llamada crudo que es una matriz que contiene todos los valores de cadena sin procesar (sin escape) interpretado a partir de la plantilla literal. Así es como puedes acceder al crudo propiedad:
var name1 = "John", name2 = "Joan"; foo'hello \ $ nombre1, $ nombre2, ¿cómo están los dos? '; función foo () console.log (argumentos [0]); // Array ["hello $ name1,", ", ¿cómo están los dos?"] Console.log (argumentos [0] .raw); // Array ["hello \ $ name1,", ", ¿cómo están los dos?"] Console.log (argumentos [1]); // Joan
Utilizar casos de plantillas etiquetadas.
Las plantillas etiquetadas son útiles cuando necesitas romper una cuerda en partes separadas, como suele ser el caso en una URL, o al analizar un idioma. Encontrarás una colección de ejemplos de plantillas etiquetadas aquí.
Aparte de IE, los literales de plantilla son Compatible con todos los principales navegadores.
A continuación, puede encontrar algunos ejemplos de funciones de etiquetas con diferentes firmas que representan los argumentos:
nombre var = "juan"; foo'hello $ nombre, ¿cómo están los dos? '; bar'hello $ nombre, ¿cómo están los dos? '; función foo (... args) console.log (args); // Array [Array ["hola", ", ¿cómo están los dos?"], "John"] barra de funciones (strVals, ... exprVals) console.log (strVals); // Array ["hola", "¿cómo están los dos?" ] console.log (exprVals); // Array ["John"]
En el bar función, el primer parámetro (strVals) es el objeto de plantilla y el segundo (que utiliza la sintaxis de propagación) es una matriz que se reunió todos los valores de expresión evaluados De la plantilla literal pasada a la función..
Juntar la cuerda
Si quieres obtener la frase completa (derivado del literal) dentro de la función de etiqueta, concatenar todos los valores de las matrices que llevan las cadenas de la plantilla y los valores de expresión evaluados. Me gusta esto:
function foo (strs, ... exprs) // si hay expresiones incluidas en el literal if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; yo < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
los strs matriz tiene todas las cuerdas encontrado en el literal y exprs sostiene todos los valores de expresión evaluados de lo literal.
Si existe un solo valor de expresión, concatene cada valor de matriz de strs (excepto el último) con el mismo valor de índice de exprs. Luego, al final, agregue el último valor del strs matriz a la cadena concatenada, formando una oración completa de esta manera.
