JavaScript | literales de plantilla

Template Literal en ES6 proporciona nuevas funciones para crear una string que brinda más control sobre las strings dinámicas. Tradicionalmente, String se crea usando comillas simples (‘) o comillas dobles («) . El literal de la plantilla se crea usando el carácter de acento grave (`) .

Sintaxis:

var s=`some string`;

Strings de varias líneas: para crear una string de varias líneas, se usó una secuencia de escape \n para dar un carácter de nueva línea. Sin embargo, en los literales de plantilla no es necesario agregar \n extremos de string solo cuando obtiene el carácter de comilla invertida (`) .

• Ejemplo:

  <script> // Without template literal console.log('Some text that I want \non two lines!');    // With template literal console.log(`Some text that I want on two lines!`); </script>

• Producción:

  Some text that I want
  on two lines!
  Some text that I want
  on two lines!

Expresiones: para agregar valores de forma dinámica en nuevas expresiones de plantilla literales, se utilizan. La sintaxis ${} permite una expresión que produce el valor. Este valor puede ser una string almacenada en una variable o una operación de cálculo.

${expression}

• Ejemplo: el siguiente código muestra el uso de expresiones en literales de plantilla.

  <script> let principal = 1000; let noofyears = 1; let rateofinterest = 7;    let SI = `Simple Interest is ${(principal *             noofyears * rateofinterest)/100}`; alert("Simple Interest is" + SI); </script>

• Producción:
  

Plantillas etiquetadas: una de las características de los literales de plantilla es su capacidad para crear literales de plantilla etiquetados. El literal etiquetado se escribe como una definición de función, pero la diferencia es cuando se llama a este literal. No hay paréntesis() en una llamada literal. Una array de strings se pasa como parámetro a un literal.

• Ejemplo 1:

  <script>    function TaggedLiteralEg(strings) {     document.write(strings); }    TaggedLiteralEg `GeeksforGeeks`;        </script>

• Producción:

  GeeksforGeeks

• Ejemplo 2: También es posible pasar valores a un literal etiquetado. Este valor puede ser el resultado de alguna expresión o un valor extraído de la variable. El siguiente código muestra el uso de Tagged Literal.

  <script> function TaggedLiteralEg(strings, value, value2) {     document.write(strings);     document.write("<br>"+value2+"    "+value);        }    let text = 'GeeksforGeeks'; TaggedLiteralEg`test ${text} ${2+3}`;     </script>

• Producción:

  test , ,
  5 GeeksforGeeks

String sin procesar: el método sin procesar del literal de plantilla permite el acceso a strings sin procesar tal como se ingresaron, sin procesar secuencias de escape. Además, el método String.raw() existe para crear strings sin procesar al igual que la función de plantilla predeterminada y la concatenación de strings crearía.

• Ejemplo:

  <script> var s=String.raw`Welcome to GeeksforGeeks Value of expression is ${2+3}`; document.write(s); </script>

• Producción:

  Welcome to GeeksforGeeks Value of expression is 5

Plantillas anidadas: las plantillas se pueden anidar si contienen evaluación de expresión múltiple o verificación de condición múltiple. En lugar de usar else if ladder, esto es legible y le da facilidad al desarrollador. El siguiente código encuentra el máximo de tres números usando un operador condicional y un literal de plantilla anidado.

• Ejemplo:

  <script> function maximum(x, y, z) { var c = `value ${ (y>x && y>z) ? 'y is greater' : `${x>z ? 'x is greater' : 'z is greater'}` }`; return (c); } document.write(maximum(5, 11, 15)+"<br>"); document.write(maximum(15, 11, 3)+"<br>"); document.write(maximum(11, 33, 2)+"<br>"); </script>

• Producción:

  value z is greater
  value x is greater
  value y is greater