tablas - obtener datos de una tabla html javascript
¿Uso del carácter de retroceso(`) en JavaScript? (7)
En JavaScript, un backtick † parece funcionar igual que una cita simple. Por ejemplo, puedo usar un backtick para definir una cadena como esta:
var s = `abc`;
¿Hay alguna forma en que el comportamiento del backtick realmente difiere del de una cita simple?
† Tenga en cuenta que entre los programadores, "backtick" es un nombre para lo que generalmente se llama acento grave . Los programadores también usan a veces los nombres alternativos "backquote" y "backgrave". Además, en Stack Overflow y en otros lugares, otras ortografías comunes para "backtick" son "back-tick" y "back tick".
Resumen:
Backticks en JavaScript es una característica que se introduce en ECMAScript 6 // ECMAScript 2015 para crear cadenas dinámicas fáciles. Esta función 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 plantilla se permiten los saltos de línea y, por lo tanto, pueden ser multilínea.
Los literales de cadena normales (declarados con
''''o"") no pueden tener saltos de línea. -
Podemos interpolar fácilmente valores variables a la cadena con la sintaxis
${myVariable}.
Ejemplo:
const name = ''Willem'';
const age = 26;
const story = `
My name is: ${name}
And I''m: ${age} years old
`;
console.log(story);
Compatibilidad del navegador:
El literal de cadena de plantilla es compatible de forma nativa con todos los principales proveedores de navegadores (excepto Internet Explorer). Por lo tanto, es bastante seguro de usar en su código de producción. Puede encontrar una lista más detallada de las compatibilidades del navegador aquí .
Además de la interpolación de cadenas, también puede llamar a una función usando la tecla de retroceso.
var sayHello = function () {
console.log(''Hello'', arguments);
}
// to call this function using ``
sayHello`some args`; // check console for the output
// or
sayHello`
some args
`;
Compruebe el componente con estilo , lo usan mucho.
ECMAScript 6 presenta un nuevo tipo de literal de cadena, que utiliza la marca de retroceso 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 = "<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);
Como puede ver, utilizamos 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 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 de cadena interpolado interno
`${who}s`
fue un poco más agradable para nosotros cuando combinamos 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 alcance léxico donde aparece, no un alcance dinámico 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 plantilla 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 ECMAScript 6:
`<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 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 múltiples valores. El primer argumento, lo llamamos cadenas, es una matriz de todas las cadenas simples (el material entre las expresiones interpoladas).
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 argumentos 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 literal de cadena etiquetado 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 un mayor control sobre la generación de la cadena a partir del literal. Veamos un ejemplo de creación de plantillas reutilizables.
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 cadenas, que es una matriz.
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 sin 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.
ECMAScript 6 viene con una función incorporada que se puede usar como una etiqueta literal de cadena:
String.raw(..)
.
Simplemente pasa por las versiones en bruto de las cadenas:
console.log(`Hello/nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello/nWorld`);
// "Hello/nWorld"
Esta es una característica llamada plantilla de literales .
Se llamaron "cadenas de plantillas" en ediciones anteriores de la especificación ECMAScript 2015.
Los literales de plantilla son compatibles con Firefox 34, Chrome 41 y Edge 12 y superior, pero no con Internet Explorer.
- Ejemplos: http://tc39wiki.calculist.org/es6/template-strings/
- Especificación oficial: Especificación de idioma ECMAScript 2015, 12.2.9 Componentes léxicos literales de plantilla (un poco seco)
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)}`);
Lo bueno es que podemos hacer matemáticas básicas directamente:
let nuts = 7
more.innerHTML = `
<h2>You collected ${nuts} nuts so far!
<hr>
Double it, get ${nuts + nuts} nuts!!
`
<div id="more"></div>
Se volvió realmente útil en una función de fábrica:
function nuts(it){
return `
You have ${it} nuts! <br>
Cosinus of your nuts: ${Math.cos(it)} <br>
Triple nuts: ${3 * it} <br>
Your nuts encoded in BASE64:<br> ${btoa(it)}
`
}
nut.oninput = (function(){
out.innerHTML = nuts(nut.value)
})
<h3>NUTS CALCULATOR
<input type="number" id="nut">
<div id="out"></div>
Los backticks (
`
) se usan para definir literales de plantilla.
Los literales de plantilla son una nueva característica en ES6 para facilitar el trabajo con cadenas.
caracteristicas:
- Podemos interpolar cualquier tipo de expresión en los literales de plantilla.
- Pueden ser multilínea.
Nota:
podemos usar fácilmente comillas simples (
''
) y comillas dobles (
"
) dentro de los backticks (
`
).
Ejemplo:
var nameStr = `I''m "Rohit" Jindal`;
Para interpolar las variables o la expresión, 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
Las cadenas de varias líneas significan 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?
Los backticks encierran literales de plantilla, anteriormente conocidos como cadenas de plantilla. Los literales de plantilla son literales de cadena que permiten expresiones incrustadas y características de interpolación de cadena.
Los literales de plantilla tienen expresiones incrustadas en marcadores de posición, denotados por el signo de dólar y corchetes alrededor de una expresión, es decir,
${expression}
.
El marcador de posición / expresiones se pasan a una función.
La función predeterminada simplemente concatena la cadena.
Para escapar de un backtick, coloque una barra diagonal inversa antes:
`/`` === ''`''; => true
Usa los backticks para escribir más fácilmente una cadena de varias líneas:
console.log(`string text line 1
string text line 2`);
o
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
vs JavaScript 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:
-
/u00A9Unicode iniciados por/u, por ejemplo/u00A9 -
Escapes de puntos de código Unicode indicados 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