Criação de cordas de várias linhas em JavaScript
-
03-07-2019 - |
Pergunta
Eu tenho o seguinte código em Ruby. Eu quero converter este código em JavaScript. qual é o código equivalente em JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Solução
Update:
ECMAScript 6 (ES6) introduz um novo tipo de literal, nomeadamente template literais . Eles têm muitos recursos, interpolação variável entre outros, mas o mais importante para esta questão, eles podem ser de várias linhas.
Um modelo literal é delimitada por backticks :
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Nota: Eu não estou defendendo a usar HTML em cordas)
apoio Browser é OK , mas você pode usar transpilers para ser mais compatível.
resposta ES5 Original:
Javascript não tem uma sintaxe aqui-documento. Você pode escapar da nova linha literal, no entanto, que se aproxima:
"foo \
bar"
Outras dicas
ES6 Update:
Como a primeira resposta menciona, com ES6 / Babel, agora você pode criar cordas com ramal simplesmente usando backticks:
const htmlString = `Say hello to
multi-line
strings!`;
Interpolando variáveis ??é um novo recurso popular que vem com crase strings delimitadas:
const htmlString = `${user.name} liked your post about strings`;
Isso só transpiles para baixo a concatenação:
user.name + ' liked your post about strings'
resposta ES5 Original:
guia de estilo JavaScript do Google recomenda usar concatenação vez de escapar 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 retirado com segurança em tempo de compilação; espaços em branco após a barra irá resultar em erros complicados; e enquanto a maioria dos motores de script suportar isto, não faz parte do ECMAScript.
Use concatenação em vez disso:
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 text = <<"HERE" This Is A Multiline String HERE
padrão não está disponível em js (Lembro-me de usá-lo muito em meus bons velhos tempos Perl).
Para manter a supervisão com cordas complexas ou longo de várias linhas Eu à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á mostrou (nova linha de escape), que pode ser um bloco feio em seu código:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Aqui está outro 'truque' estranho, mas trabalhando 1 :
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
editar externo: jsFiddle
ES20xx suporta Spanning cordas em várias linhas usando template cordas :
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: este será perdido após minifying / ofuscar seu código
Você pode tem cordas de várias linhas em puro JavaScript.
Este método baseia-se na serialização de funções, que é definido para ser dependente da implementação . Ele faz o trabalho na maioria dos navegadores (veja abaixo), mas não há nenhuma garantia de que ele irá ainda trabalho no futuro, por isso não contar com ele.
Usando a função a seguir:
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
Você pode ter aqui-documentos 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 tem sucesso foi testado nos seguintes navegadores (não mencionado = não testado):
- IE 4 - 10
- Opera 9.50 - 12 (não em 9 -)
- Safari 4 - 6 (não em 3 -)
- Chrome 1-45
- Firefox 17-21 ( em 16 )
- Rekonq 0.7.0 - 0.8.0
- Não suportado no Konqueror 4.7.4
Tenha cuidado com o seu minifier, no entanto. Ele tende a remover comentários. Para o YUI compressor , um comentário começando com /*!
(como a que eu usei) será preservada.
Eu acho que um real solução seria usar CoffeeScript .
Você pode fazer isso ...
var string = 'This is\n' +
'a multiline\n' +
'string';
Eu vim com isso muito jimmy método de uma string de vários alinhada fraudada. Desde a conversão de uma função em uma string também retorna quaisquer comentários dentro da função que você pode usar os comentários como sua seqüência usando um comentário multilined / ** /. Você apenas tem que aparar as pontas e você tem a sua string.
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)
Eu estou surpreso que eu não ver isso, porque ele funciona em todos os lugares 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 sabe de um ambiente onde há HTML, mas ele não funciona?
Eu resolvi isso emitindo um div, tornando-se escondido, e chamando o id div por jQuery quando eu precisava.
por exemplo.
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
Então, quando eu preciso para obter a corda, eu só uso o seguinte jQuery:
$('#UniqueID').html();
Que retorna meu texto em várias linhas. Se eu chamar
alert($('#UniqueID').html());
eu recebo:
Existem várias maneiras de conseguir isso
1. Corte concatenação
var MultiLine= '1\
2\
3\
4\
5\
6\
7\
8\
9';
2. concatenação normal
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
3. Matriz Junte concatenação
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
Em termos de desempenho, Slash concatenação (primeiro) é o mais rápido.
Consulte este caso de teste para obter mais detalhes sobre o desempenho
Update:
Com o ES2015 , podemos tirar proveito do recurso de seu Template cordas. Com isso, só precisa usar back-carrapatos para a criação de cordas com ramal
Exemplo:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
A utilização de etiquetas de script:
- adicionar um bloco
<script>...</script>
contendo o seu texto com várias linhas em taghead
; -
obter o seu texto com várias linhas como é ... (atente para 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>
Eu como esta sintaxe e recuo:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(mas na verdade não pode ser considerado como uma cadeia de linhas múltiplas)
Há uma biblioteca que faz bonito:
https://github.com/sindresorhus/multiline
Antes
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
Após
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
Downvoters : Este código é fornecido apenas para informação.
Esta foi testado em Fx 19 e 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>
</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'));
para resumir, eu tentei 2 abordagens aqui na programação do usuário javascript (Opera 11.01):
- este fez não trabalho: Criar strings de várias linhas em JavaScript
- isso funcionou bastante bem, eu também descobri como para torná-lo uma boa aparência no Notepad ++ exibição da fonte: Criação de cordas de várias linhas em JavaScript
Então, eu recomendo a abordagem de trabalho para usuários Opera usuários JS. Ao contrário do que o autor estava dizendo:
Não funciona no Firefox ou Opera; apenas no IE, Chrome e Safari.
Ela não funciona no Opera 11. Pelo menos em scripts JS usuário. Pena que eu não posso comentar sobre as respostas individuais ou upvote a resposta, eu o faria imediatamente. Se possível, alguém com privilégios elevados agradar fazê-lo para mim.
Atualizado para 2015 : é seis anos mais tarde agora: a maioria das pessoas usar um carregador de módulo, e os principais sistemas de módulos, cada um tem formas de modelos de carregamento. Não é em linha, mas o tipo mais comum de corda de várias linhas são modelos, e modelos geralmente deve ser mantido fora do JS qualquer maneira .
require.js: 'exigem texto'
. 'Texto'Usando require.js plug-in , com um modelo de múltiplas linhas em template.html
var template = require('text!template.html')
NPM / browserify: o 'BRFS' módulo
usa um 'BRFS' módulo para arquivos de texto de carga. Isso vai realmente construir o seu modelo em seu HTML fornecido.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
Easy.
Se você está disposto a usar as novas linhas escaparam, eles podem ser usados ?? muito bem . Parece que um documento com uma borda de página .
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>
O meu extensão para https://stackoverflow.com/a/15558082/80404 .
Ele espera comentário em um /*! any multiline comment */
formulário onde símbolo! é utilizado para evitar 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();
O equivalente em javascript é:
var text = `
This
Is
A
Multiline
String
`;
Aqui está o especificação . Veja suporte ao navegador na parte inferior desta página . Aqui estão alguns exemplos também.
Você pode usar typescript (JavaScript SuperSet), ele suporta cordas de várias linhas, e transpiles recuar a pura JavaScript sem sobrecarga:
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
Se você gostaria de realizar a mesma 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)
Note que o iPad / Safari não suporta 'functionName.toString()'
Se você tem um monte de código legado, você também pode usar a variante JavaScript simples à máquina (para fins de limpeza):
interface externTemplates
{
myString:string;
}
declare var templates:externTemplates;
alert(templates.myString)
e você pode usar o objeto de várias linhas-string da variante JavaScript simples, onde você coloca os modelos em outro arquivo (que você pode mesclar no pacote).
Você pode tentar typescript em
http://www.typescriptlang.org/Playground
ES6 permite que você use uma crase para especificar uma string em várias linhas. É chamado de um Literal Modelo. Como esta:
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
Usando as obras backtick em NodeJS, e é suportado pelo Chrome, Firefox, Edge, Safari e Opera.
https://developer.mozilla.org/en -US / docs / web / JavaScript / Referência / Template_literals
A maneira mais fácil de fazer várias linhas cordas em Javascrips é com o uso de acentos graves ( ``). Isso permite que você crie cadeias de várias linhas em que você pode inserir variáveis ??com ${variableName}
.
Exemplo:
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);
compatibilidade:
- Foi introduz no
ES6
//es2015
- Agora é suportado nativamente por todos os principais fabricantes de navegadores (exceto o Internet Explorer)
Minha versão de matriz baseada em juntar-se para concat string:
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 tem funcionado bem para mim, especialmente porque muitas vezes eu inserir valores para o html construídos dessa maneira. Mas tem muitas limitações. Recuo seria bom. Não ter que lidar com aspas aninhadas seria muito bom, e apenas o bulkyness de me incomoda.
É o .push () para adicionar à matriz tomando um monte de tempo? Veja esta resposta relacionada:
( Existe uma razão desenvolvedores de JavaScript don' t uso Array.push ()? )
Depois de olhar para estas corridas (opostos) de teste, parece que .push () é bom para matrizes de cadeia que provavelmente não vai crescer mais de 100 itens - Eu vou evitá-lo em favor de indexado acrescenta para matrizes maiores
Você pode usar +=
para concatenar a sua corda, parece que ninguém respondeu que, que será legível, e também puro ... algo como isto
var hello = 'hello' +
'world' +
'blah';
pode ser também escrito como
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
Também fazer notar que, ao estender corda sobre várias linhas utilizando barra invertida para a frente no final de cada linha, os caracteres extras (principalmente espaços, tabulações e comentários adicionados por engano) após barra invertida para a frente fará com que erro caráter inesperado, que eu levei um hora para descobrir
var string = "line1\ // comment, space or tabs here raise error
line2";
Por favor, pelo amor do uso da internet concatenação e opt não usar soluções ES6 para isso. ES6 NÃO é suportada em todo o tabuleiro, bem como CSS3 e alguns navegadores sendo lento para se adaptar ao movimento CSS3. Use simples ol' JavaScript, seus usuários finais vai agradecer.
Exemplo:
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
Você tem que 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 -
This <br>is <br>multiline <br>string.
Ao usar <br>
saída de seu navegador será semelhante -
This is multiline string.
A forma ES6 de fazê-lo seria usando literais de modelo:
const str = `This
is
a
multiline text`;
console.log(str);
Mais de referência aqui
Eu acho que essa solução 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 Pure Javascript:
<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 !!
Apenas tentou a resposta Anonymous e encontrou há um pequeno truque aqui, ele não funciona se houver um espaço depois de barra invertida \
Portanto, a seguinte solução 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 !!