Eu tenho o seguinte código em Ruby. Quero converter esse código em JavaScript. qual é o código equivalente em JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Eu tenho o seguinte código em Ruby. Quero converter esse código em JavaScript. qual é o código equivalente em JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Respostas:
O ECMAScript 6 (ES6) introduz um novo tipo de literal, ou seja, literais de modelo . Eles têm muitos recursos, interpolação variável entre outros, mas o mais importante para essa questão, eles podem ser multilinhas.
Um literal de modelo é delimitado por backticks :
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Nota: não estou defendendo o uso de HTML em strings)
O suporte ao navegador é bom , mas você pode usar transpilers para ser mais compatível.
Javascript não tem uma sintaxe aqui-documento. Você pode escapar da nova linha literal, no entanto, que se aproxima:
"foo \
bar"
Como a primeira resposta menciona, com o ES6 / Babel, agora você pode criar seqüências de várias linhas simplesmente usando backticks:
const htmlString = `Say hello to
multi-line
strings!`;
A interpolação de variáveis é um novo recurso popular que vem com seqüências delimitadas por back-tick:
const htmlString = `${user.name} liked your post about strings`;
Isso apenas transpila para concatenação:
user.name + ' liked your post about strings'
O guia de estilo JavaScript do Google recomenda o uso de concatenação de string em vez de escapar de novas linhas:
Não faça isso:
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.';
O espaço em branco no início de cada linha não pode ser removido com segurança no tempo de compilação; espaço em branco após a barra resultará em erros complicados; e embora a maioria dos mecanismos de script suporte isso, ele não faz parte do ECMAScript.
Use concatenação de string:
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.';
\
vez de `\`, é difícil perceber] e (3) enquanto a maioria dos mecanismos de script suporta isso, não faz parte do ECMAScript [ou seja, por que use recursos fora do padrão?] Lembre-se de que é um guia de estilo, que trata de facilitar a leitura do código + manter + depurar: não apenas "funciona" corretamente.
o padrão text = <<"HERE" This Is A Multiline String HERE
não está disponível em js (lembro-me de usá-lo muito nos meus bons e velhos dias Perl).
Para manter a supervisão de cadeias multilinhas complexas ou longas, às vezes uso um padrão de matriz:
var myString =
['<div id="someId">',
'some content<br />',
'<a href="#someRef">someRefTxt</a>',
'</div>'
].join('\n');
ou o padrão anônimo já exibido (escape newline), que pode ser um bloco feio no seu código:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Aqui está outro truque estranho, mas funcional 1 :
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
edição externa: jsfiddle
O ES20xx suporta seqüências de expansão em várias linhas usando cadeias de modelo :
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: isso será perdido após minificar / ofuscar seu código
Você pode ter cadeias de linhas múltiplas em JavaScript puro.
Este método é baseado na serialização de funções, que é definida como dependente da implementação . Ele funciona na maioria dos navegadores (veja abaixo), mas não há garantia de que ainda funcione no futuro, portanto, não confie nele.
Usando a seguinte função:
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
Você pode ter documentos aqui como este:
var tennysonQuote = hereDoc(function() {/*!
Theirs not to make reply,
Theirs not to reason why,
Theirs but to do and die
*/});
O método foi testado com sucesso nos seguintes navegadores (não mencionados = não testados):
Tenha cuidado com seu minifier, no entanto. Tende a remover comentários. Para o compressor YUI , um comentário começando com /*!
(como o que eu usei) será preservado.
Eu acho que uma solução real seria usar o CoffeeScript .
ES6 UPDATE: Você pode usar o backtick em vez de criar uma função com um comentário e executar toString no comentário. O regex precisaria ser atualizado para apenas remover espaços. Você também pode ter um método de protótipo de string para fazer isso:
let foo = `
bar loves cake
baz loves beer
beer loves people
`.removeIndentation()
Isso seria legal. Alguém deve escrever este método de string .removeIndentation ...;)
Você consegue fazer isso...
var string = 'This is\n' +
'a multiline\n' +
'string';
Eu vim com esse método muito jimmy de uma corda de várias linhas. Como a conversão de uma função em uma string também retorna quaisquer comentários dentro da função, você pode usá-los como sua string usando um comentário multilinhado / ** /. Você apenas tem que cortar as pontas e tem sua corda.
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()
é.
Estou surpreso por não ter visto isso, porque funciona em qualquer lugar que eu testei e é muito útil para, por exemplo, modelos:
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
Alguém conhece um ambiente em que haja HTML, mas ele não funciona?
Resolvi isso produzindo um div, ocultando-o e chamando o div id pelo jQuery quando necessário.
por exemplo
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
Então, quando preciso obter a string, apenas uso o seguinte jQuery:
$('#UniqueID').html();
O que retorna meu texto em várias linhas. Se eu ligar
alert($('#UniqueID').html());
Eu recebo:
display:none
conteúdo, provavelmente devido à popularidade dos front-ends no estilo JavaScript. (Por exemplo, uma página de Perguntas frequentes com a funcionalidade ocultar / mostrar.) Porém, você precisa ter cuidado, porque o Google diz que eles podem puni-lo se o conteúdo oculto parece ter sido projetado para aumentar artificialmente seus rankings de SEO.
Existem várias maneiras de conseguir isso
1. Concatenação de barra
var MultiLine= '1\
2\
3\
4\
5\
6\
7\
8\
9';
2. concatenação regular
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
3. Concatenação de junção de matriz
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
Em termos de desempenho, a concatenação do Slash (primeira) é a mais rápida.
Consulte este caso de teste para obter mais detalhes sobre o desempenho
Atualizar:
Com o ES2015 , podemos tirar proveito do recurso de strings de modelo. Com isso, precisamos usar back-ticks para criar strings de várias linhas
Exemplo:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
Usando tags de script:
<script>...</script>
bloco contendo seu texto de múltiplas linhas na head
tag;obtenha seu texto multilinha como está ... (cuidado com a codificação 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");
. Não me lembro de ter outros problemas além de digitar comentários incorretamente no JS. Espaços onde não há problemas.
Eu gosto desta sintaxe e indendação:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(mas na verdade não pode ser considerado como sequência de múltiplas linhas)
Existe essa biblioteca que a torna bonita:
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 no navegador deve ser cuidadoso.
Function.prototype.String()
.
Downvoters : Este código é fornecido apenas para informação.
Isso foi testado no Fx 19 e no Chrome 24 no 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, tentei duas abordagens listadas aqui na programação javascript do usuário (Opera 11.01):
Portanto, recomendo a abordagem de trabalho para usuários JS do Opera. Ao contrário do que o autor estava dizendo:
Não funciona no Firefox ou na ópera; somente no IE, chrome e safari.
Funciona no Opera 11. Pelo menos nos scripts JS do usuário. Pena que não posso comentar sobre respostas individuais ou aprovar a resposta, eu faria isso imediatamente. Se possível, alguém com maiores privilégios, faça isso por mim.
Minha extensão para https://stackoverflow.com/a/15558082/80404 . Espera comentário em uma forma /*! any multiline comment */
onde símbolo! é usado para impedir a remoção por minificação (pelo menos para o compressor 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));
};
Exemplo:
var tmpl = function() { /*!
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
*/}.extractComment();
Atualizado para 2015 : agora são seis anos: a maioria das pessoas usa um carregador de módulos, e os principais sistemas de módulos têm maneiras de carregar modelos. Não está embutido, mas o tipo mais comum de sequência multilinha são os modelos, e os modelos geralmente devem ser mantidos fora do JS de qualquer maneira .
Usando o plug-in require.js 'text' , com um modelo de múltiplas linhas em template.html
var template = require('text!template.html')
O Browserify usa um módulo 'brfs' para carregar arquivos de texto. Na verdade, isso criará seu modelo em seu HTML incluído.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
Fácil.
Se você estiver disposto a usar as novas linhas de escape, elas podem ser usadas com agrado . Parece um documento com uma borda de página .
O equivalente em javascript é:
var text = `
This
Is
A
Multiline
String
`;
Aqui está a especificação . Veja o suporte ao navegador na parte inferior desta página . Aqui estão alguns exemplos também.
Isso funciona no IE, Safari, Chrome e 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>
Você pode usar o TypeScript (JavaScript SuperSet), ele suporta seqüências de várias linhas e transpila de volta para o JavaScript puro sem sobrecarga:
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
Se você deseja fazer o mesmo com JavaScript simples:
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)
Observe que o iPad / Safari não suporta 'functionName.toString()'
Se você possui muito código herdado, também pode usar a variante JavaScript simples no TypeScript (para fins de limpeza):
interface externTemplates
{
myString:string;
}
declare var templates:externTemplates;
alert(templates.myString)
e você pode usar o objeto de cadeia de linhas múltiplas da variante JavaScript simples, onde coloca os modelos em outro arquivo (que pode ser mesclado no pacote configurável).
Você pode experimentar o TypeScript em
http://www.typescriptlang.org/Playground
A maneira ES6 de fazer isso seria usando literais de modelo:
const str = `This
is
a
multiline text`;
console.log(str);
Mais referência aqui
O ES6 permite que você use um backtick para especificar uma sequência em várias linhas. É chamado de Modelo Literal. Como isso:
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
O uso do backtick funciona no NodeJS e é suportado pelo Chrome, Firefox, Edge, Safari e Opera.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
A maneira mais fácil de criar strings de várias linhas em Javascrips é usando backticks (``). Isso permite criar cadeias de linhas múltiplas nas quais você pode inserir variáveis ${variableName}
.
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);
ES6
//es2015
Verifique a compatibilidade exata nos documentos do Mozilla aqui
Minha versão da junção baseada em array 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'));
Isso funcionou bem para mim, especialmente porque geralmente insiro valores no html construído dessa maneira. Mas tem muitas limitações. Recuo seria bom. Não ter que lidar com aspas aninhadas seria muito bom, e apenas a volumosidade disso me incomoda.
O .push () a ser adicionado à matriz está demorando muito tempo? Veja esta resposta relacionada:
( Existe uma razão pela qual os desenvolvedores de JavaScript não usam Array.push ()? )
Depois de analisar essas execuções de teste (opostas), parece que .push () é bom para matrizes de strings que provavelmente não crescerão mais de 100 itens - evitarei isso em favor de adições indexadas para matrizes maiores.
Você pode usar +=
para concatenar sua string, parece que ninguém respondeu a isso, o que será legível e também elegante ... algo como isto
var hello = 'hello' +
'world' +
'blah';
também pode ser escrito como
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
Observe também que, ao estender a seqüência de caracteres em várias linhas usando a barra invertida no final de cada linha, qualquer caractere extra (principalmente espaços, guias e comentários adicionados por engano) após a barra invertida causará um erro inesperado de caractere, que levei uma hora para encontrar Fora
var string = "line1\ // comment, space or tabs here raise error
line2";
Por amor à Internet, use a concatenação de strings e opte por não usar as soluções ES6 para isso. O ES6 NÃO é suportado em todos os aspectos, assim como o CSS3 e alguns navegadores demoram a se adaptar ao movimento do CSS3. Use JavaScript simples, seus usuários finais agradecerão.
Exemplo:
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
Você precisa usar o operador de concatenação '+'.
<!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>
Ao usar \n
seu código-fonte, será semelhante a -
este O que é Multilinha <br> Cadeia de caracteres.
Ao usar <br>
a saída do navegador, será semelhante a:
este é multilinha corda.
Acho que essa solução alternativa deve funcionar no 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>
Felicidades!!
<xmp>
está tão obsoleto. Pode ser permitido em HTML, mas não deve ser usado por nenhum autor. Veja stackoverflow.com/questions/8307846/…
<pre>;
escapes não ajudará na minha solução .. Me deparei com um problema semelhante hoje e tentando descobrir uma solução alternativa .. mas no meu caso, encontrei uma maneira muito n00bish de corrigir esse problema colocando a saída em comentários html em vez de <xmp> ou qualquer outra tag. ri muito. Sei que não é uma maneira padrão de fazer isso, mas vou trabalhar nessa questão mais amanhã de manhã .. Saúde !!
style="display:none"
Chrome, tenta carregar as <img>
imagens mencionadas no bloco de exemplo.
Tentei a resposta anônima e descobri que há um pequeno truque aqui, não funciona se houver um espaço após a barra invertida. \
Portanto, a solução a seguir não funciona -
var x = { test:'<?xml version="1.0"?>\ <-- One space here
<?mso-application progid="Excel.Sheet"?>'
};
Mas quando o espaço é removido, ele funciona -
var x = { test:'<?xml version="1.0"?>\<-- No space here now
<?mso-application progid="Excel.Sheet"?>'
};
alert(x.test);
Espero que ajude !!