javascript - microsoft - visual studio windows 7
ES6 Template Literals Vs cadenas concatenadas (4)
Tengo el siguiente código para los
template literals
Ecma-Script-6
let person = {name: ''John Smith''};
let tpl = `My name is ${person.name}.`;
let MyVar="My name is "+ person.name+".";
console.log("template literal= "+tpl);
console.log("my variable = "+MyVar);
El resultado es el siguiente:
template literal= My name is John Smith.
my variable = My name is John Smith.
this es el violín. Traté de buscar la diferencia exacta pero no pude encontrarla. Mi pregunta es cuál es la diferencia entre estas dos declaraciones,
let tpl = `My name is ${person.name}.`;
Y
let MyVar = "My name is "+ person.name+".";
Ya puedo obtener la cadena
MyVar
concatenada con
person.name
aquí, entonces, ¿cuál sería el escenario para usar la plantilla literal?
Es mucho más limpio y, como se indica en los comentarios, es una característica común en otros idiomas. La otra cosa que encontré agradable fueron los saltos de línea, muy útiles al escribir cadenas.
let person = {name: ''John Smith'', age: 24, greeting: ''Cool!'' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>/n" +
"<p>I am " + person.age + " old</p>/n" +
"<strong>/"" + person.greeting +"/" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Si bien, mi respuesta no aborda directamente la pregunta. Pensé que podría ser de interés señalar un inconveniente de usar literales de plantilla a favor de la combinación de matrices.
Digamos que tengo
let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "''The Rock''"};
Entonces, algunos pacientes tienen un segundo nombre y otros no.
Si quisiera una cadena que representara el nombre completo de un paciente
let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;
Entonces esto se convertiría en "John undefined Smith"
Sin embargo si lo hiciera
let patientName = [patient1.firstName, patient1.middleName, patient1.lastName].join(" ");
Entonces esto se convertiría en "John Smith"
EDITAR
General_Twyckenham señaló que una unión en "" daría lugar a un espacio adicional entre "John" y "Smith".
Para solucionar esto, puede tener un filtro antes de la unión para deshacerse de los valores falsos:
[patient1.firstName, patient1.middleName, patient1.lastName].filter(el => el).join(" ");
Si está utilizando literales de plantilla solo con marcadores de posición (por ejemplo,
`Hello ${person.name}`
) como en el ejemplo de la pregunta, entonces el resultado es lo mismo que simplemente concatenar cadenas.
Subjetivamente se ve mejor y es más fácil de leer, especialmente para cadenas de varias líneas o cadenas que contienen ambos
''
y
"
ya que ya no tiene que escapar de esos caracteres.
La legibilidad es una gran característica, pero lo más interesante de las plantillas son los literales de plantillas etiquetadas :
let person = {name: ''John Smith''};
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!
En la tercera línea de este ejemplo, se llama a una función llamada
tag
.
El contenido de la cadena de plantilla se divide en múltiples variables, a las que puede acceder en los argumentos de la función de
tag
: secciones literales (en este ejemplo, el valor de
strArr[0]
es
My name is
y el valor de
strArr[1]
es
!
) y sustituciones (
John Smith
).
La plantilla literal se evaluará según lo que devuelva la función de
tag
.
El
wiki de ECMAScript
enumera algunos casos de uso posibles, como la entrada o localización de escape o codificación automática.
Puede crear una función de etiqueta llamada
msg
que busque las partes literales como
My name is
y las sustituya con traducciones al idioma de la configuración regional actual, por ejemplo, al alemán:
console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.
El valor devuelto por la función de etiqueta ni siquiera tiene que ser una cadena.
Puede crear una función de etiqueta llamada
$
que evalúa la cadena y la usa como un selector de consulta para devolver una colección de nodos DOM, como en este
example
:
$`a.${className}[href=~''//${domain}/'']`
ES6
presenta un nuevo tipo de cadena literal, usando el
/
back-tick` como delimitador.
Estos literales permiten incrustar expresiones básicas de interpolación de cadenas, que luego se analizan y evalúan automáticamente.
let actor = {name: ''RajiniKanth'', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>/n" +
"<p>I am " + actor.age + " old</p>/n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
Como puede ver, usamos el ... `` alrededor de una serie de caracteres, que se interpretan como un literal de cadena, pero cualquier expresión de la forma
${..}
se analiza y evalúa en línea de inmediato.
Un beneficio realmente agradable de los literales de cadena interpolados es que se les permite dividirse en varias líneas:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!
Expresiones Interpoladas
¡Se permite que cualquier expresión válida aparezca dentro de
${..}
en un literal de cadena interpolado, incluidas las llamadas a funciones, las llamadas a expresiones de función en línea e incluso otros
interpo‐ lated string literals
!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!
Aquí, el literal de cadena interpolado interno / $ {who} s`` fue un poco más conveniente para nosotros al combinar la variable who con la cadena
"s"
, en oposición a who + "s".
Además, para mantener una nota hay un literal de cadena interpolado que tiene un
lexically scoped
donde aparece, no un
dynamically scoped
de ninguna manera
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"
Usar la
template literal
para el HTML es definitivamente más legible al reducir la molestia.
La vieja manera simple:
''<div class="'' + className + ''">'' +
''<p>'' + content + ''</p>'' +
''<a href="'' + link + ''">Let/'s go</a>''
''</div>'';
Con
ES6
:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let''s go</a>
</div>`
- Su cadena puede abarcar varias líneas.
- No tiene que escapar de los caracteres de cita.
- Puede evitar agrupaciones como: ''">''
- No tiene que usar el operador más.
Etiquetado Literales de plantilla
También podemos etiquetar una cadena de
template
, cuando se etiqueta una cadena de
template
, los
literals
y las sustituciones se pasan a la función que devuelve el valor resultante.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = ''Neat'';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Podemos usar el operador de
spread
aquí para pasar múltiples valores.
El primer argumento, lo llamamos cadenas, es una matriz de todas las cadenas simples (el material entre cualquier expresión interpolada).
Luego reunimos todos los argumentos posteriores en una matriz llamada valores utilizando el
... gather/rest operator
, aunque por supuesto podría haberlos dejado como parámetros individuales nombrados siguiendo el parámetro de cadenas como lo hicimos anteriormente
(value1, value2 etc)
.
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = ''Neat'';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Los
argument(s)
reunidos en nuestra matriz de valores son los resultados de las expresiones de interpolación ya evaluadas que se encuentran en el literal de cadena.
Un
tagged string literal
es como un paso de procesamiento después de evaluar las interpolaciones, pero antes de que se compile el valor final de la cadena, lo que le permite tener más control sobre la generación de la cadena a partir del literal.
Veamos un ejemplo de creación
re-usable templates
.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${''name''} is a Actor</h3>
<p>You can find his movies at ${''store''}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('''');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Cuerdas crudas
nuestras funciones de etiqueta reciben un primer argumento que llamamos
strings
, que es una
array
.
Pero hay un bit adicional de datos incluidos: las versiones sin procesar sin procesar de todas las cadenas.
Puede acceder a esos valores de cadena sin
.raw
utilizando la propiedad
.raw
, como esta:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello/nWorld`;
Como puede ver, la versión
raw
formato de la cadena conserva la secuencia / n escapada, mientras que la versión procesada de la cadena la trata como una nueva línea real sin escape.
ES6
viene con una función integrada que se puede usar como una etiqueta literal de cadena:
String.raw(..)
.
Simplemente pasa por las versiones en bruto de las
strings
:
console.log( `Hello/nWorld` );
/* "Hello
World" */
console.log( String.raw`Hello/nWorld` );
// "Hello/nWorld"