Tengo el siguiente código en Ruby. Quiero convertir este código en JavaScript. ¿Cuál es el código equivalente en JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Tengo el siguiente código en Ruby. Quiero convertir este código en JavaScript. ¿Cuál es el código equivalente en JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Respuestas:
ECMAScript 6 (ES6) introduce un nuevo tipo de literal, a saber, los literales de plantilla . Tienen muchas características, interpolación variable entre otras, pero lo más importante para esta pregunta, pueden ser multilíneas.
Una plantilla literal está delimitada por comillas invertidas :
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Nota: no estoy abogando por usar HTML en cadenas)
El soporte del navegador está bien , pero puede usar transpilers para ser más compatible.
Javascript no tiene una sintaxis de documento aquí. Sin embargo, puede escapar de la nueva línea literal, que se acerca:
"foo \
bar"
Como se menciona en la primera respuesta, con ES6 / Babel, ahora puede crear cadenas de varias líneas simplemente usando las teclas de retroceso:
const htmlString = `Say hello to
multi-line
strings!`;
La interpolación de variables es una nueva característica popular que viene con cadenas delimitadas por retroceso:
const htmlString = `${user.name} liked your post about strings`;
Esto solo se transmite a la concatenación:
user.name + ' liked your post about strings'
La guía de estilo JavaScript de Google recomienda utilizar la concatenación de cadenas en lugar de escapar de las nuevas líneas:
No hagas esto:
var myString = 'A rather long string of English text, an error message \ actually that just keeps going and going -- an error \ message to make the Energizer bunny blush (right through \ those Schwarzenegger shades)! Where was I? Oh yes, \ you\'ve got an error and all the extraneous whitespace is \ just gravy. Have a nice day.';
El espacio en blanco al comienzo de cada línea no se puede eliminar de forma segura en tiempo de compilación; los espacios en blanco después de la barra oblicua generarán errores difíciles; y aunque la mayoría de los motores de script admiten esto, no es parte de ECMAScript.
Utilice la concatenación de cadenas en su lugar:
var myString = 'A rather long string of English text, an error message ' + 'actually that just keeps going and going -- an error ' + 'message to make the Energizer bunny blush (right through ' + 'those Schwarzenegger shades)! Where was I? Oh yes, ' + 'you\'ve got an error and all the extraneous whitespace is ' + 'just gravy. Have a nice day.';
\
lugar de `\` es difícil de notar] y (3) mientras que la mayoría de los motores de script admiten esto, no es parte de ECMAScript [es decir, por qué ¿usa características no estándar?] Recuerde que es una guía de estilo, que trata de hacer que el código sea fácil de leer + mantener + depurar: no solo "funciona" correctamente.
el patrón text = <<"HERE" This Is A Multiline String HERE
no está disponible en js (recuerdo haberlo usado mucho en mis viejos días de Perl).
Para mantener la supervisión con cadenas multilíneas complejas o largas, a veces uso un patrón de matriz:
var myString =
['<div id="someId">',
'some content<br />',
'<a href="#someRef">someRefTxt</a>',
'</div>'
].join('\n');
o el patrón anónimo ya mostrado (escape de nueva línea), que puede ser un bloqueo feo en su código:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Aquí hay otro 'truco' extraño pero que funciona 1 :
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
edición externa: jsfiddle
ES20xx admite cadenas de expansión sobre varias líneas utilizando cadenas de plantilla :
let str = `This is a text
with multiple lines.
Escapes are interpreted,
\n is a newline.`;
let str = String.raw`This is a text
with multiple lines.
Escapes are not interpreted,
\n is not a newline.`;
1 Nota: esto se perderá después de minimizar / ofuscar su código
Usted puede tener líneas múltiples en JavaScript puro.
Este método se basa en la serialización de funciones, que se define como dependiente de la implementación . Funciona en la mayoría de los navegadores (ver más abajo), pero no hay garantía de que seguirá funcionando en el futuro, así que no confíes en él.
Usando la siguiente función:
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
Puede tener aquí documentos como este:
var tennysonQuote = hereDoc(function() {/*!
Theirs not to make reply,
Theirs not to reason why,
Theirs but to do and die
*/});
El método se ha probado con éxito en los siguientes navegadores (no mencionado = no probado):
Sin embargo, ten cuidado con tu minificador. Tiende a eliminar comentarios. Para el compresor YUI , se conservará un comentario que comience con /*!
(como el que usé).
Creo que una solución real sería usar CoffeeScript .
ACTUALIZACIÓN DE ES6: puede usar la tecla de retroceso en lugar de crear una función con un comentario y ejecutar toString en el comentario. La expresión regular necesitaría actualizarse solo para eliminar espacios. También podría tener un método de prototipo de cadena para hacer esto:
let foo = `
bar loves cake
baz loves beer
beer loves people
`.removeIndentation()
Eso sería genial. Alguien debería escribir este método de cadena .removeIndentation ...;)
Puedes hacerlo...
var string = 'This is\n' +
'a multiline\n' +
'string';
Se me ocurrió este método muy manipulado de una cuerda con múltiples líneas. Dado que convertir una función en una cadena también devuelve cualquier comentario dentro de la función, puede usar los comentarios como su cadena usando un comentario multilínea / ** /. Solo tienes que recortar los extremos y tienes tu cuerda.
var myString = function(){/*
This is some
awesome multi-lined
string using a comment
inside a function
returned as a string.
Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)
alert(myString)
toString()
.)
Me sorprende que no haya visto esto, porque funciona en todas partes donde lo he probado y es muy útil, por ejemplo, para plantillas:
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
¿Alguien sabe de un entorno donde hay HTML pero no funciona?
Resolví esto enviando un div, ocultándolo y llamando al id de div por jQuery cuando lo necesitaba.
p.ej
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
Luego, cuando necesito obtener la cadena, solo uso el siguiente jQuery:
$('#UniqueID').html();
Lo que devuelve mi texto en varias líneas. Si llamo
alert($('#UniqueID').html());
Yo obtengo:
display:none
contenido, probablemente debido a la popularidad de los front-end con estilo JavaScript. (Por ejemplo, una página de preguntas frecuentes con funcionalidad de ocultar / mostrar). Sin embargo, debe tener cuidado, porque Google dice que pueden castigarlo si el contenido oculto parece estar diseñado para inflar artificialmente su clasificación SEO.
Hay varias formas de lograr esto
1. Concatenación de barra
var MultiLine= '1\
2\
3\
4\
5\
6\
7\
8\
9';
2. concatenación regular
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
3. Array Unir concatenación
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
Rendimiento sabio, concatenación Slash (primera) es la más rápida.
Consulte este caso de prueba para obtener más detalles sobre el rendimiento
Actualizar:
Con el ES2015 , podemos aprovechar su función de cadenas de plantillas. Con él, solo necesitamos usar ticks de retroceso para crear cadenas de líneas múltiples
Ejemplo:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
Usando etiquetas de script:
<script>...</script>
bloque que contenga su texto multilínea en la head
etiqueta;obtenga su texto multilínea como está ... (cuidado con la codificación de texto: UTF-8, ASCII)
<script>
// pure javascript
var text = document.getElementById("mySoapMessage").innerHTML ;
// using JQuery's document ready for safety
$(document).ready(function() {
var text = $("#mySoapMessage").html();
});
</script>
<script id="mySoapMessage" type="text/plain">
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
<soapenv:Header/>
<soapenv:Body>
<typ:getConvocadosElement>
...
</typ:getConvocadosElement>
</soapenv:Body>
</soapenv:Envelope>
<!-- this comment will be present on your string -->
//uh-oh, javascript comments... SOAP request will fail
</script>
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
. No recuerdo haber tenido otros problemas además de escribir mal los comentarios en JS. Espacios donde no hay problemas.
Me gusta esta sintaxis e indendación:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(pero en realidad no se puede considerar como una cadena multilínea)
Hay esta biblioteca que lo hace hermoso:
https://github.com/sindresorhus/multiline
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
nodejs
uso en el navegador debe ser provechoso.
Function.prototype.String()
.
Votantes : este código se proporciona solo con fines informativos.
Esto ha sido probado en Fx 19 y Chrome 24 en Mac
var new_comment; /*<<<EOF
<li class="photobooth-comment">
<span class="username">
<a href="#">You</a>:
</span>
<span class="comment-text">
$text
</span>
@<span class="comment-time">
2d
</span> ago
</li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag
new_comment=document.currentScript.innerHTML.split("EOF")[1];
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');
<ul></ul>
para resumir, he intentado 2 enfoques enumerados aquí en la programación javascript del usuario (Opera 11.01):
Por lo tanto, recomiendo el enfoque de trabajo para los usuarios de Opera JS. A diferencia de lo que decía el autor:
No funciona en Firefox u Opera; solo en IE, cromo y safari.
Funciona en Opera 11. Al menos en las secuencias de comandos JS del usuario. Lástima que no puedo comentar respuestas individuales o votar la respuesta, lo haría de inmediato. Si es posible, alguien con mayores privilegios, háganlo por mí.
Mi extensión a https://stackoverflow.com/a/15558082/80404 . Espera comentar en una forma /*! any multiline comment */
donde símbolo! se usa para evitar la extracción por minificación (al menos para el compresor YUI)
Function.prototype.extractComment = function() {
var startComment = "/*!";
var endComment = "*/";
var str = this.toString();
var start = str.indexOf(startComment);
var end = str.lastIndexOf(endComment);
return str.slice(start + startComment.length, -(str.length - end));
};
Ejemplo:
var tmpl = function() { /*!
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
*/}.extractComment();
Actualizado para 2015 : ahora es seis años después: la mayoría de las personas usa un cargador de módulos, y los sistemas de módulos principales tienen formas de cargar plantillas. No está en línea, pero el tipo más común de cadena multilínea son las plantillas, y las plantillas generalmente deben mantenerse fuera de JS de todos modos .
Uso del complemento require.js 'text' , con una plantilla multilínea en template.html
var template = require('text!template.html')
Browserify utiliza un módulo 'brfs' para cargar archivos de texto. Esto realmente construirá su plantilla en su HTML incluido.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
Fácil.
Si está dispuesto a usar las nuevas líneas escapadas, se pueden usar muy bien . Parece un documento con un borde de página .
El equivalente en javascript es:
var text = `
This
Is
A
Multiline
String
`;
Aquí está la especificación . Consulte el soporte del navegador al final de esta página . Aquí hay algunos ejemplos también.
Esto funciona en IE, Safari, Chrome y Firefox:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table border="0">
<tr>
<td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
</tr>
</table>'></div>
<script type="text/javascript">
alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>
Puede usar TypeScript (JavaScript SuperSet), admite cadenas multilínea y transpila de nuevo a JavaScript puro sin sobrecarga:
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
Si desea lograr lo mismo con JavaScript simple:
var templates =
{
myString: function(){/*
This is some
awesome multi-lined
string using a comment
inside a function
returned as a string.
Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)
}
alert(templates.myString)
Tenga en cuenta que el iPad / Safari no es compatible 'functionName.toString()'
Si tiene mucho código heredado, también puede usar la variante simple de JavaScript en TypeScript (para fines de limpieza):
interface externTemplates
{
myString:string;
}
declare var templates:externTemplates;
alert(templates.myString)
y puede usar el objeto de cadena multilínea de la variante de JavaScript simple, donde coloca las plantillas en otro archivo (que puede combinar en el paquete).
Puede probar TypeScript en
http://www.typescriptlang.org/Playground
La forma ES6 de hacerlo sería mediante el uso de plantillas literales:
const str = `This
is
a
multiline text`;
console.log(str);
Más referencia aquí
ES6 le permite utilizar una tecla de retroceso para especificar una cadena en varias líneas. Se llama una plantilla literal. Me gusta esto:
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
El uso del backtick funciona en NodeJS, y es compatible con Chrome, Firefox, Edge, Safari y Opera.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
La forma más fácil de crear cadenas multilínea en Javascrips es mediante el uso de backticks (``). Esto le permite crear cadenas multilínea en las que puede insertar variables con${variableName}
.
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);
ES6
//es2015
Verifique la compatibilidad exacta en documentos de Mozilla aquí
Mi versión de combinación basada en matriz para string concat:
var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));
Esto me ha funcionado bien, especialmente porque a menudo inserto valores en el html construido de esta manera. Pero tiene muchas limitaciones. Sangría sería bueno. No tener que lidiar con comillas anidadas sería realmente agradable, y solo su volumen me molesta.
¿El .push () para agregar a la matriz toma mucho tiempo? Ver esta respuesta relacionada:
( ¿Hay alguna razón por la que los desarrolladores de JavaScript no usen Array.push ()? )
Después de ver estas ejecuciones de prueba (opuestas), parece que .push () está bien para las matrices de cadenas que probablemente no crecerán más de 100 elementos; lo evitaré a favor de las adiciones indexadas para matrices más grandes.
Puede usar +=
para concatenar su cadena, parece que nadie respondió eso, lo que será legible y también ordenado ... algo como esto
var hello = 'hello' +
'world' +
'blah';
también se puede escribir como
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
También tenga en cuenta que, al extender la cadena sobre varias líneas usando la barra diagonal inversa al final de cada línea, cualquier carácter adicional (principalmente espacios, pestañas y comentarios agregados por error) después de la barra diagonal inversa causará un error inesperado de caracteres, que tardé una hora en encontrar fuera
var string = "line1\ // comment, space or tabs here raise error
line2";
Por amor a Internet, use la concatenación de cadenas y opte por no usar soluciones ES6 para esto. ES6 NO es compatible en todos los ámbitos, al igual que CSS3 y algunos navegadores tardan en adaptarse al movimiento CSS3. Utilice JavaScript simple, sus usuarios finales se lo agradecerán.
Ejemplo:
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
Debe usar el operador de concatenación '+'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
var str = "This "
+ "\n<br>is "
+ "\n<br>multiline "
+ "\n<br>string.";
document.getElementById("demo").innerHTML = str;
</script>
</body>
</html>
Al usar \n
su código fuente se verá así:
Esta <br> es <br> multilínea <br> cadena.
Al usar <br>
la salida de su navegador se verá así:
Esta es multilínea cuerda.
Creo que esta solución debería funcionar en IE, Chrome, Firefox, Safari, Opera -
Usando jQuery :
<xmp id="unique_id" style="display:none;">
Some plain text
Both type of quotes : " ' " And ' " '
JS Code : alert("Hello World");
HTML Code : <div class="some_class"></div>
</xmp>
<script>
alert($('#unique_id').html());
</script>
Usando Javascript puro:
<xmp id="unique_id" style="display:none;">
Some plain text
Both type of quotes : " ' " And ' " '
JS Code : alert("Hello World");
HTML Code : <div class="some_class"></div>
</xmp>
<script>
alert(document.getElementById('unique_id').innerHTML);
</script>
¡¡Salud!!
<xmp>
es tan obsoleto Puede estar permitido en HTML, pero no debe ser utilizado por ningún autor. Ver stackoverflow.com/questions/8307846/…
<pre>;
escapes no ayudará en mi solución ... Me encontré con un problema similar hoy y tratando de encontrar una solución alternativa ... pero en mi caso, encontré una manera muy fácil de solucionar este problema poniendo la salida en comentarios html en lugar de <xmp> o cualquier otra etiqueta. jajaja Sé que no es una forma estándar de hacer esto, pero trabajaré en este tema más mañana por la mañana. ¡Saludos!
style="display:none"
Chrome intenta cargar las <img>
imágenes mencionadas en el bloque de ejemplo.
Acabo de probar la respuesta anónima y descubrí que hay un pequeño truco aquí, no funciona si hay un espacio después de la barra invertida. \
Entonces, la siguiente solución no funciona:
var x = { test:'<?xml version="1.0"?>\ <-- One space here
<?mso-application progid="Excel.Sheet"?>'
};
Pero cuando se elimina el espacio, funciona:
var x = { test:'<?xml version="1.0"?>\<-- No space here now
<?mso-application progid="Excel.Sheet"?>'
};
alert(x.test);
Espero eso ayude !!