notas - Creando cadenas multilínea en JavaScript
notas javascript (30)
Actualización de ES6:
Como lo menciona la primera respuesta, con ES6 / Babel, ahora puede crear cadenas multilínea simplemente usando backticks:
const htmlString = `Say hello to
multi-line
strings!`;
Las variables de interpolación son una característica nueva y popular que viene con cadenas delimitadas por contracción:
const htmlString = `${user.name} liked your post about strings`;
Esto acaba de transpilar a la concatenación:
user.name + '' liked your post about strings''
Respuesta original de ES5:
La guía de estilo de JavaScript de Google recomienda usar concatenación de cadenas en lugar de escapar de 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 principio de cada línea no se puede eliminar de forma segura en el momento de la compilación; el espacio en blanco después de la barra dará como resultado errores difíciles; y aunque la mayoría de los motores de secuencias de comandos 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.'';
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
Actualizar:
ECMAScript 6 (ES6) introduce un nuevo tipo de literal, a saber, literales de plantilla . Tienen muchas características, interpolación variable entre otras, pero lo más importante para esta pregunta es que pueden ser multilínea.
Una plantilla literal está delimitada por backticks :
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 puedes usar transpilers para ser más compatible.
Respuesta original de ES5:
Javascript no tiene una sintaxis de documento aquí. Puede escapar de la nueva línea literal, sin embargo, que se acerca:
"foo /
bar"
ES6 le permite usar un backtick para especificar una cadena en varias líneas. Se llama 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 de 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
El equivalente en javascript es:
var text = `
This
Is
A
Multiline
String
`;
Aquí está la specification . Ver soporte de navegador en la parte inferior de esta página . Aquí hay algunos examples también.
En resumen, he intentado 2 enfoques enumerados aquí en la programación de javascript de usuario (Opera 11.01):
- éste no funcionó: Creación de cadenas multilínea en JavaScript
- esto funcionó bastante bien, también he descubierto cómo hacer que se vea bien en la vista de origen de Notepad ++: Creación de cadenas multilínea en JavaScript
Así que recomiendo el enfoque de trabajo para los usuarios de Opera JS. A diferencia de lo que el autor estaba diciendo:
No funciona en firefox u opera; Solo en IE, Chrome y Safari.
Funciona en Opera 11. Al menos en los scripts de usuario JS. Lástima que no puedo comentar sobre respuestas individuales o votar la respuesta, lo haría de inmediato. Si es posible, alguien con privilegios más altos, hazlo por mí.
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>
Hay esta biblioteca que la hace hermosa:
https://github.com/sindresorhus/multiline
antes de
var str = '''' +
''<!doctype html>'' +
''<html>'' +
'' <body>'' +
'' <h1>❤ unicorns</h1>'' +
'' </body>'' +
''</html>'' +
'''';
Después
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
Hay múltiples formas de lograrlo.
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 Join concatenation
var MultiLine = [
''1'',
''2'',
''3'',
''4'',
''5''
].join('''');
En cuanto al rendimiento, la concatenación de barra (la 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 tics de retroceso para crear cadenas de varias líneas
Ejemplo:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
La forma más sencilla de crear cadenas multilínea en Javascrips es mediante el uso de backticks (``). Esto le permite crear cadenas de varias líneas en las que puede insertar variables con ${variableName} .
Ejemplo:
let name = ''Willem'';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);
compatibilidad:
- Se introdujo en
ES6//es2015 - Ahora cuenta con el soporte nativo de todos los principales proveedores de navegadores (excepto Internet Explorer)
Compruebe la compatibilidad exacta en los documentos de Mozilla aquí
Me gusta esta sintaxis y la indendación:
string = ''my long string.../n''
+ ''continue here/n''
+ ''and here.'';
(pero en realidad no puede ser considerado como una cadena multilínea)
Me sorprende que no haya visto esto, porque funciona en todos los lugares en que lo he probado y es muy útil para, por ejemplo, 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?
Mi extensión a https://.com/a/15558082/80404 . Se espera comentar en una forma /*! any multiline comment */ /*! any multiline comment */ donde símbolo! se utiliza para evitar la eliminació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();
Mi versión de unión basada en matriz para concat de cadena:
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. La sangría sería agradable. No tener que lidiar con las comillas anidadas sería realmente agradable, y solo me preocupa el bulkyness.
¿El .push () para agregar a la matriz lleva mucho tiempo? Vea esta respuesta relacionada:
( ¿Hay alguna razón por la que los desarrolladores de JavaScript no utilicen Array.push ()? )
Después de ver estas ejecuciones de prueba (opuestas), parece que .push () está bien para los arreglos de cadenas que probablemente no crecerán en más de 100 elementos. Lo evitaré en favor de los agregados indexados para arreglos más grandes.
Por favor, por el amor a Internet, use la concatenación de cadenas y opte por no usar las soluciones ES6 para esto. ES6 NO es compatible en todos los ámbitos, al igual que CSS3 y ciertos navegadores son lentos para adaptarse al movimiento CSS3. Usa el JavaScript simple, tus usuarios finales te lo agradecerán.
Ejemplo:
var str = "This world is neither flat nor round. "+ "Once was lost will be found";
Puede tener cadenas multilínea 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 aún funcione en el futuro, así que no confíe en él.
Usando la siguiente función:
function hereDoc(f) {
return f.toString().
replace(/^[^//]+///*!?/, '''').
replace(//*//[^//]+$/, '''');
}
Puedes 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 mencionados = no probado):
- IE 4 - 10
- Opera 9.50 - 12 (no en 9-)
- Safari 4 - 6 (no en 3)
- Cromo 1 - 45
- Firefox 17 - 21 ( no en 16- )
- Rekonq 0.7.0 - 0.8.0
- No soportado en Konqueror 4.7.4
Pero ten cuidado con tu minificador. Tiende a eliminar comentarios. Para el compresor YUI , un comentario que comienza con /*! (Al igual que la que usé) se conservará.
Creo que una solución real sería utilizar CoffeeScript .
Puede usar TypeScript (JavaScript SuperSet), es compatible con cadenas multilínea y los transpiles se vuelven a JavaScript puro sin sobrecarga:
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
Si quieres lograr lo mismo con JavaScript plano:
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 admite ''functionName.toString()''
Si tiene un montón de código heredado, también puede usar la variante de JavaScript simple 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).
Puedes probar TypeScript en
TypeScript
Puedes hacerlo...
var string = ''This is/n'' +
''a multiline/n'' +
''string'';
Puedes usar += para concatenar tu cadena, parece que nadie contestó eso, que será legible, y también limpio ... algo como esto
var hello = ''hello'' +
''world'' +
''blah'';
también se puede escribir como
var hello = ''hello'';
hello += '' world'';
hello += '' blah'';
console.log(hello);
Resolví esto generando un div, haciéndolo oculto, y llamando al div id 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 múltiples líneas. Si llamo
alert($(''#UniqueID'').html());
Yo obtengo:
Se me ocurrió este método muy simulado de una cuerda con múltiples líneas. Como la conversión de 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 de varias líneas / ** /. Solo tienes que recortar los extremos y tienes tu cadena.
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)
Si estás dispuesto a usar las nuevas líneas escapadas, se pueden usar muy bien . Parece un documento con un borde de página .
También tenga en cuenta que, al extender la cadena sobre varias líneas utilizando la barra diagonal inversa al final de cada línea, cualquier carácter adicional (en su mayoría espacios, pestañas y comentarios agregados por error) después de la barra diagonal inversa causará un error de carácter inesperado, que tardé una hora en encontrar afuera
var string = "line1/ // comment, space or tabs here raise error
line2";
Tienes que 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 utilizar /nsu código fuente se verá como
This <br>is <br>multiline <br>string.
Al utilizar <br>la salida de su navegador se verá así:
This is multiline string.
Usando etiquetas de script:
- agregue un bloque
<script>...</script>que contenga su texto multilínea en la etiqueta dehead; obtenga su texto multilínea tal como está ... (tenga 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>
el text = <<"HERE" This Is A Multiline String HERE del patrón text = <<"HERE" This Is A Multiline String HERE no está disponible en js (recuerdo haberlo usado mucho en mis viejos y 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 (nueva línea de escape), que puede ser un bloque 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 de trabajo 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 en 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
Actualizado para 2015 : ya han pasado seis años: la mayoría de la gente usa un cargador de módulos, y cada uno de los sistemas de módulos principales tiene formas de cargar plantillas. No está en línea, pero el tipo más común de cadena multilínea son las plantillas y, por lo general , las plantillas deben mantenerse fuera de JS .
require.js: ''require text''.
Usando el plugin require.js ''text'' , con una plantilla multilínea en template.html
var template = require(''text!template.html'')
NPM / browserify: el módulo ''brfs''
Browserify usa un módulo ''brfs'' para cargar archivos de texto. Esto realmente construirá su plantilla en su HTML empaquetado.
var fs = require("fs");
var template = fs.readFileSync(template.html'', ''utf8'');
Fácil.
Downvoters : 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>
</li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag
new_comment=document.currentScript.innerHTML.split("EOF")[1];
alert(new_comment.replace(''$text'',''Here goes some text''));
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>
¡¡Aclamaciones!!
Si está ejecutando solo en el nodo, puede usar el módulo fs para leer la cadena de varias líneas de un archivo:
var diagram;
var fs = require(''fs'');
fs.readFile( __dirname + ''/diagram.txt'', function (err, data) {
if (err) {
throw err;
}
diagram = data.toString();
});
Solo probé 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. /
Por lo tanto, 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 !!