Recientemente, utilicé cadenas de plantilla ES6 en mi proyecto, que se resumen aquí.
1. Anteriormente también podíamos usar JavaScript para generar cadenas de plantilla, generalmente de la siguiente manera:
$("#result").append(
"Él es <b>"+persona.nombre+"</b>"+"y queremos saber su"+persona.edad+". Eso es todo"
); Pero podemos ver que este enfoque tradicional requiere el uso de muchas "" (comillas dobles) y + para unirlos y obtener la plantilla que necesitamos. Pero esto es muy inconveniente.
Por lo tanto, ES6 proporciona cadenas de plantilla, que están marcadas con ` (comilla invertida) y las variables están entre ${}. El ejemplo anterior se puede escribir de la siguiente manera usando cadenas de plantilla:
$("#result").append(
`Él es <b>${person.name}</b>y queremos saber su${person.age}.eso es todo`
); Este enfoque es mucho más simple. Ya no necesitamos usar muchos "" y + para unir cadenas y variables.
2. Por supuesto, las variables se pueden introducir en la cadena de la plantilla y también es posible no utilizar variables. Como se muestra a continuación:
` Soy un hombre.
` ` No importa lo que hagas,
confío en ti.`
3. También podemos definir las variables primero y luego incrustarlas en la cadena de plantilla:
var name="zzw";
` ${nombre}, no importa lo que hagas,
Confío en ti.` 4. Obviamente, dado que el acento grave es el identificador de la cadena de plantilla, si necesitamos usar el acento grave en la cadena, debemos evitarlo, de la siguiente manera:
`No importa` lo que hagas,
Confío en ti.`
5. Nota: Si utiliza cadenas de plantilla para representar cadenas de varias líneas, ¡todos los espacios y sangrías se guardarán en la salida! !
console.log( `No importa` lo que hagas, Confío en ti.`);
El resultado es el siguiente:
6. Puede poner cualquier expresión de JavaScript entre llaves en ${}, realizar operaciones y hacer referencia a propiedades de objetos.
varx=88;
var y=100;
console.log(`x=${++x},y=${x+y}`); El resultado es el siguiente:
7. Aún más poderoso: la cadena de plantilla también puede llamar a funciones:
function string(){
devolver "¡a zzw le gusta es6!";
}
console.log(`¿Qué quieres decir? Bueno, ${string()}`); El resultado es el siguiente:
Además, si el resultado de la función no es una cadena, se convertirá en una cadena según las reglas generales:
function string(){
devolver 666;
}
console.log(`¿Qué quieres decir? Bueno, ${string()}`); El resultado es el siguiente:
Aquí, el número 666 en realidad se convierte en la cadena 666.
8. Si la variable en ${} no tiene nombre, se informará un error:
console.log(`¿Qué quieres decir? Bueno, ${string( )}`); en el código anterior, la función string() no está declarada, por lo que se informa un error:
9. De hecho, también podemos ingresar una cadena en ${}, y el resultado del conocimiento aún devolverá una cadena:
console.log(`¿Qué quieres decir? Bueno, ${"En realidad, no soy una variable ~"}`) ; El resultado es el siguiente:
10. Si desea hacer referencia a la cadena de la plantilla, puede escribirla así:
let str="return"+"`¡Hola! ${name}`";
let func=nueva Función("nombre",cadena);
console.log(func("zzw")); Los resultados son los siguientes:
