¿Uso del carácter de comillas invertidas (`) en JavaScript?

En JavaScript, un backtick parece funcionar igual que una comilla simple. Por ejemplo, puedo usar un backtick para definir una cadena como esta:

var s = `abc`; 

¿Hay alguna manera en que el comportamiento del backtick realmente difiera del de una sola cita?


† Tenga en cuenta que entre los progtwigdores, “backtick” es un nombre para lo que generalmente se llama acento grave . Los progtwigdores también utilizan a veces los nombres alternativos “backquote” y “backgrave”. Además, en Stack Overflow y en otras partes, otras ortografías comunes para “backtick” son “back-tick” y “back tick”.

Esta es una característica llamada plantilla literales .

Fueron llamadas “cadenas de plantilla” en ediciones anteriores de la especificación ECMAScript 2015.

Los literales de plantillas son compatibles con Firefox 34, Chrome 41 y Edge 12 y superiores, pero no con Internet Explorer.

Los literales de plantilla se pueden usar para representar cadenas de varias líneas y pueden usar “interpolación” para insertar variables:

 var a = 123, str = `--- a is: ${a} ---`; console.log(str); 

Salida:

 --- a is: 123 --- 

Lo que es más importante, pueden contener no solo un nombre de variable, sino cualquier expresión de Javascript:

 var a = 3, b = 3.1415; console.log(`PI is nearly ${Math.max(a, b)}`); 

ECMAScript 6 presenta un nuevo tipo de cadena literal, que utiliza 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 person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' }; let usualHtmlStr = "

My name is " + person.name + ",

\n" + "

I am " + person.age + " old

\n" + "\"" + person.greeting + "\" is what I usually say"; let newHtmlStr = `

My name is ${person.name},

I am ${person.age} old

"${person.greeting}" is what I usually say`; console.log(usualHtmlStr); console.log(newHtmlStr);

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 inmediatamente.

Un beneficio realmente bueno 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

¡Cualquier expresión válida puede aparecer dentro de ${..} en un literal de cadena interpolada, incluidas las llamadas a funciones, las llamadas de expresión de función en línea e incluso otros literales de cadena interpolados!

 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 interpolado de la cadena `${who}s` fue un poco más cómodo para nosotros cuando combinamos la variable who con la cadena "s" , en lugar de who + "s" . Además, para mantener una nota, una cadena interpolada literal solo tiene un ámbito léxico donde aparece, no de forma dinámica.

 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 el literal de la plantilla para el HTML es definitivamente más legible al reducir la molestia.

La vieja manera llana:

 '
' + '

' + content + '

' + 'Let\'s go' '
';

Con ECMAScript 6:

 `

${content}

Let's go
`
  • Su cadena puede abarcar varias líneas.
  • No tienes que escapar de los caracteres de la cita.
  • Puedes evitar agrupaciones como: “”>
  • No tienes que usar el operador plus.

Literales de plantillas etiquetadas

También podemos etiquetar una cadena de plantilla, cuando se etiqueta una cadena de plantilla, los literales 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 propagación aquí para pasar varios valores. El primer argumento, lo llamamos cadenas, es una matriz de todas las cadenas sin formato (la materia entre las expresiones interpoladas).

Luego recostackmos todos los argumentos subsiguientes en una matriz llamada valores utilizando el ... gather/rest operator , aunque, por supuesto, podría haberlos dejado como parámetros con nombre individuales siguiendo el parámetro de cadenas como 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 argumentos recostackdos 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 literal de cadena etiquetada es como un paso de procesamiento después de que se evalúan las interpolaciones, pero antes de comstackr el valor de la cadena final, le permite un mayor control sobre la generación de la cadena a partir del literal. Veamos un ejemplo de cómo crear plantillas reutilizables.

 const Actor = { name: "RajiniKanth", store: "Landmark" } const ActorTemplate = templater`

${'name'} is a Actor

You can find his movies at ${'store'}.

`; 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 tags reciben un primer argumento que llamamos cadenas, que es una matriz. Pero hay un bit adicional de datos incluidos: las versiones en bruto sin procesar de todas las cadenas. Puede acceder a esos valores de cadena sin procesar 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 sin procesar 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 escaparse. ECMAScript 6 viene con una función incorporada que se puede usar como una etiqueta literal de cadena: String.raw(..) . Simplemente pasa a través de las versiones en bruto de las cadenas:

 console.log(`Hello\nWorld`); /* "Hello World" */ console.log(String.raw`Hello\nWorld`); // "Hello\nWorld" 

Backticks ( ` ) se utilizan para definir literales de plantilla. Los literales de plantilla son una nueva función en ES6 para facilitar el trabajo con cadenas.

caracteristicas:

  • Podemos interpolar cualquier tipo de expresión en los literales de la plantilla.
  • Pueden ser multilínea.

Nota: podemos usar fácilmente comillas simples ( ' ) y comillas dobles ( " ) dentro de las comillas invertidas ( ` ).

Ejemplo:

 var nameStr = `I'm "Rohit" Jindal`; 

Para interpolar las variables o expresiones podemos usar la notación ${expression} para eso.

 var name = 'Rohit Jindal'; var text = `My name is ${name}`; console.log(text); // My name is Rohit Jindal 

Cadenas multilínea significa que ya no tiene que usar \n para nuevas líneas.

Ejemplo:

 const name = 'Rohit'; console.log(`Hello ${name}! How are you?`); 

Salida:

 Hello Rohit! How are you? 

Backticks encierran literales de plantilla, conocidos anteriormente como cadenas de plantilla. Los literales de plantilla son literales de cadena que permiten expresiones incrustadas y funciones de interpolación de cadena.

Los literales de plantilla tienen expresiones incrustadas en marcadores de posición, indicados por el signo de dólar y los corchetes alrededor de una expresión, es decir, ${expression} . El marcador de posición / expresiones se pasan a una función. La función por defecto solo concatena la cadena.

Para escapar de una comilla invertida, coloque una barra invertida delante de ella:

 `\`` === '`'; => true 

Utilice backticks para escribir más fácilmente una cadena de múltiples líneas:

 console.log(`string text line 1 string text line 2`); 

o

 console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); 

JavaScript de vainilla:

 console.log('string text line 1\n' + 'string text line 2'); 

o

 console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); 

Secuencias de escape:

  • \u00A9 Unicode iniciados por \u , por ejemplo \u00A9
  • El punto de código de Unicode se escapa indicado por \u{} , por ejemplo \u{2F804}
  • Escapes hexadecimales iniciados por \x , por ejemplo, \xA9
  • Escapes literales octales iniciados por \ y (a) dígito (s), por ejemplo \251

Lo bueno es que podemos hacer matemáticas básicas directamente:

 let nuts = 7 more.innerHTML = ` 

You collected ${nuts} nuts so far!
Double it, get ${nuts + nuts} nuts!! `

 

Resumen:

Backticks en JavaScript es una función que se introduce en ECMAScript 6 // ECMAScript 2015 para hacer cadenas dinámicas fáciles. Esta característica de ECMAScript 6 también se denomina literal de cadena de plantilla . Ofrece las siguientes ventajas en comparación con las cadenas normales:

  • En las cadenas de plantillas, los saltos de línea están permitidos y, por tanto, pueden ser multilínea. Los literales de cadena normales (declarados con '' o "" ) no pueden tener saltos de línea.
  • Podemos interpolar fácilmente los valores de las variables a la cadena con la syntax ${myVariable} .

Ejemplo:

 const name = 'Willem'; const age = 26; const story = ` My name is: ${name} And I'm: ${age} years old `; console.log(story); 
Intereting Posts