Criando cadeias de linhas múltiplas em JavaScript


2612

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


Verifique isso de diferentes maneiras para conseguir o mesmo. Eu adicionei o desempenho de cada método também stackoverflow.com/a/23867090/848841
Vignesh Subramanian

Respostas:


3319

Atualizar:

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.


Resposta original do ES5:

Javascript não tem uma sintaxe aqui-documento. Você pode escapar da nova linha literal, no entanto, que se aproxima:

"foo \
bar"

231
Esteja avisado: alguns navegadores inserirão novas linhas na continuação, outros não.
Staticsan

35
O Visual Studio 2010 parece estar confuso com essa sintaxe também.
Jcollum

47
@Nate É especificado na seção 7.8.4 da ECMA-262 5ª edição e é chamado LineContinuation : "Um caractere terminador de linha não pode aparecer em uma string literal, exceto como parte de um LineContinuation para produzir a seqüência de caracteres vazia. O caractere terminador de linha para fazer parte do valor String de um literal de string é usar uma sequência de escape como \ n ou \ u000A. "
alguns

16
Não vejo por que você faria isso quando os navegadores o tratam de maneira inconsistente. "line1 \ n" + "line2" em várias linhas é legível o suficiente e você garante um comportamento consistente.
SamStephens

11
"O suporte ao navegador é OK" ... não é suportado pelo IE11 - não OK
Tom Andraszek

1318

Atualização do ES6:

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'

Resposta original do ES5:

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.';

19
Não entendo a recomendação do Google. Todos os navegadores, exceto os extremamente antigos, suportam a barra invertida seguida pela abordagem de nova linha e continuarão a fazê-lo no futuro para compatibilidade com versões anteriores. O único momento em que você precisaria evitá-lo seria se precisasse ter certeza de que uma e apenas uma nova linha (ou nenhuma nova linha) foi adicionada no final de cada linha (veja também meu comentário sobre a resposta aceita).
26513 Matt Browne

6
Observe que as seqüências de modelos não são suportadas no IE11, Firefox 31, Chrome 35 ou Safari 7. Consulte kangax.github.io/compat-table/es6
EricP

29
@MattBrowne A recomendação do Google já está documentada por eles, em ordem de importância por razões: (1) O espaço em branco no início de cada linha [no exemplo, você não deseja esse espaço em branco na sua string, mas fica mais bonito no código ] (2) o espaço em branco após a barra resultará em erros complicados [se você terminar uma linha com, em \ 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.
precisa

1
É incrível que, depois de todos esses anos, a concatenação de strings ainda seja a melhor / mais segura / mais compatível maneira de fazer isso. literais de modelo (resposta acima) não funcionam no IE e as linhas de escape são apenas uma bagunça da qual você logo se arrependerá
Tiago Duarte

1
Descobrimos da maneira mais difícil que as versões mais antigas do Android não suportam os backticks, por isso, se você tiver um aplicativo Android usando a WebVer seus backticks, o aplicativo não será executado!
Michael Fever

684

o padrão text = <<"HERE" This Is A Multiline String HEREnã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


34
Por favor, não use o padrão de matriz. Na maioria dos casos, será mais lento que a concatenação de strings simples.
21811 BMiner

73
O padrão da matriz é mais legível e a perda de desempenho para um aplicativo geralmente é insignificante. Como mostra o teste de desempenho, até o IE7 pode executar dezenas de milhares de operações por segundo.
Benjamin Atkin

19
+1 para uma alternativa elegante que não só funciona da mesma maneira em todos os navegadores, mas também é à prova de futuro.
Pavel

26
@KooiInc Seus testes começam com a matriz já criada, que distorce os resultados. Se você adicionar a inicialização da matriz, a concatenação direta será mais rápida. Jsperf.com/string-concat-without-sringbuilder/7 Consulte stackoverflow.com/questions/51185/… Como um truque para as novas linhas, pode ser bom, mas é definitivamente fazendo mais trabalho do que deveria
Juan Mendes

9
@BMiner: 1) "A otimização prematura é a raiz de todo mal" - Donald Knuth e 2) 'legibilidade' está nos olhos de quem vê
Paul Bennett

348

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):

  • IE 4-10
  • Opera 9.50-12 (não no 9-)
  • Safari 4-6 (não em 3-)
  • Chrome 1-45
  • Firefox 17 - 21 ( não em 16- )
  • Rekonq 0.7.0 - 0.8.0
  • Não suportado no Konqueror 4.7.4

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 ...;)


232
O que!? criando e descompilando uma função para hackear um comentário multilinha para ser uma cadeia multilinha? Agora isso é feio.
fforw

4
jsfiddle.net/fqpwf funciona no Chrome 13 e IE8 / 9, mas não no FF6. Eu odeio dizer isso, mas eu gosto, e se pudesse ser um recurso intencional de cada navegador (para que não desapareça), eu o usaria.
Jason Kleban

2
@ uosɐſ: para ser intencional, teria que estar na especificação; ou tão amplamente utilizado, que os fabricantes de navegadores não desejam remover esse recurso "acidental". Obrigado pelas experiências, no entanto ... Experimente alguns cafés.
Jordão

1
a.toString (). substring (15, a.toString (). length-4) também funciona e não precisa varrer toda a cadeia de caracteres (embora provavelmente funcione e a contagem faça outra varredura de qualquer maneira. .)
Lodewijk

2
Extremamente útil. Estou usando-o para testes de unidade (Jasmine), mas evitando-o para código de produção.
Jason


139

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)

37
Isso é absolutamente aterrorizante. Eu amo isso (embora você pode precisar de fazer um jogo de regex porque eu não sei como precisa o espaço em branco para o toString()é.
Kevin Cox

Esta solução parece não funcionar no firefox, talvez seja um recurso de segurança para o navegador? EDIT: Não importa, ele só não funciona para Firefox versão 16.
Bill Software Engineer

45
Também cuidado com minifiers que os comentários de strip ...: D
jondavidjohn

3
É por isso que não podemos ter coisas boas.
Danilo M. Oliveira

4
Você pode fazer coisas estranhas na área de javascript. Embora com toda a honestidade, você nunca deve usar isso.
Lucas

88

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?


23
Em qualquer lugar que você não queira colocar suas strings em elementos de script separados e distantes.
Lodewijk

9
Uma objeção válida! Não é perfeito. Mas para os modelos, essa separação não é apenas aceitável, mas talvez até incentivada.
Peter V. Mørch 03/02/12

1
Eu prefiro dividir tudo com mais de 80/120 caracteres em várias linhas, receio que seja mais do que apenas modelos. Agora eu prefiro a sintaxe 'line1' + 'line2'. Também é o mais rápido (embora isso possa rivalizar com textos muito grandes). É um truque legal.
Lodewijk

27
na verdade, esse HTML não é Javascript: - /
CpILL

5
no entanto, a tarefa de obter uma seqüência de várias linhas em javascript pode ser feito dessa maneira
Davi Fiamenghi

52

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:

insira a descrição da imagem aqui


2
Obrigado por isso! É a única resposta que encontrei que resolve meu problema, que envolve seqüências desconhecidas que podem conter qualquer combinação de aspas simples e duplas sendo inseridas diretamente no código, sem a possibilidade de pré-codificação. (é proveniente de uma linguagem de modelo que cria o JS - ainda de uma fonte confiável e não de um envio de formulário, por isso não é totalmente demente).
octern

Este foi o único método que realmente funcionou para mim para criar uma variável de string javascript de várias linhas a partir de uma String Java.
Iniciantes_13 /

4
E se a string for HTML?
Dan Dascalescu

4
$ ('# UniqueID'). Content ()
mplungjan

1
@Pacerier Tudo o que eu li, do Google e de outros sites, diz que hoje em dia o Google indexa display:noneconteú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.
Gavin

31

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>
  `

11
Acho que você acabou de regurgitar o que já está na página há cinco anos, mas de uma maneira mais limpa.
RandomInsano

a concatenação de barra também não incluirá o espaço em branco no início das linhas?
precisa saber é o seguinte

29

Usando tags de script:

  • adicione um <script>...</script>bloco contendo seu texto de múltiplas linhas na headtag;
  • 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>

Eu acho que essa estratégia é limpa e muito subutilizada. O jsrender usa isso.
Xdhmoore

Estou usando isso com innerText iso innerHTML, mas como garantir que os espaços em branco sejam preservados?
David Nouls

Também consultas ajax, caso você as esteja usando. Você pode tentar alterar seus cabeçalhos 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.
Jspfreire 28/10/2015

24

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)


3
Eu uso isso, exceto por colocar o '+' no final da linha anterior, para deixar claro que a instrução continua na próxima linha. Seu caminho alinha os travessões de maneira mais uniforme.
Sean

@Sean Eu também uso isso, e ainda prefiro colocar o '+' no início de cada nova linha adicionada e a final ';' em uma nova linha, porque eu achei mais 'correto'.
AgelessEssence

7
colocar o + no início permite comentar essa linha sem ter que editar outras linhas quando for a primeira / última linha da sequência.
moliad

3
Também prefiro o + na frente, pois visualmente não preciso digitalizar para o final da linha para saber que o próximo é uma continuação.
Daniel Sokolowski

18

Existe essa biblioteca que a torna bonita:

https://github.com/sindresorhus/multiline

Antes

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

Depois de

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

1
Esse suporte ao nodejsuso no navegador deve ser cuidadoso.
Huei Tan 5/05

3
O @HueiTan Docs afirma que também funciona no navegador. O que faz sentido - é justo Function.prototype.String().
Mikemaccana

sim, mas ele disse: "Embora funcione bem no navegador, ele se destina principalmente ao uso no Node.js. Use por seu próprio risco. Enquanto funciona bem no navegador, ele se destina principalmente ao uso no Node.js. por sua conta e risco. " (Just XD becareful)
Huei Tan

@HueiTanYep Eu li essa parte. Mas Function.prototype.toString () é bastante estável e bem conhecido.
mikemaccana

1
A melhor resposta para mim, porque ela atinge pelo menos uma multilinha sem todo o lixo do meio (é possível lidar com o lixo do começo e do fim).
Damien Golding

14

Downvoters : Este código é fornecido apenas para informação.

Isso foi testado no Fx 19 e no Chrome 24 no Mac

DEMO

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>


13
Isso é horrível. +1. E você pode usar document.currentScript vez de GetElement ...
Orwellophile

1
Indefinido "você" em cromo para OSX
mplungjan

1
jsfiddle-fixed - Eu devo ter "você" definido globalmente no meu console. Funciona agora (chrome / osx). O bom de adicionar o comentário a um var é que você não está em um contexto de função, jsfiddle-function-heredoc, embora a função seja legal para métodos de classe. pode ser melhor passar um objeto de substituição {this: that} de qualquer maneira. diversão para empurrar algo louco para o limite de qualquer maneira :)
Orwellophile

1
Esqueça os odiadores. Essa é a única barra de resposta correta ES6. Todas as outras respostas requerem concatenação, computação de algum tipo ou escape. Isso é realmente muito legal e eu vou usá-lo como uma maneira de adicionar documentação a um jogo no qual estou trabalhando como hobby. Contanto que esse truque não seja usado para qualquer coisa que possa invocar um bug (eu posso ver como alguém diria "Ponto e vírgula, derp. Vamos colocar o comentário na próxima linha" e depois quebra seu código). isso realmente é um grande negócio no meu jogo de hobby? Não, e posso usar o truque legal para algo útil. Ótima resposta.
Thomas Dignan

2
Eu nunca fui corajoso o suficiente para usar essa técnica no código de produção, mas onde eu a uso muito é em testes de unidade, onde geralmente é mais fácil despejar o valor de alguma estrutura como uma string (bastante longa) e compará-la com o que 'deveria' ser.
Ben McIntyre

10

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.


Este é o meu primeiro comentário real. Eu ganhei o privilégio de votar há 2 dias, então votei imediatamente na resposta que mencionei acima. Agradeço a todos que votaram na minha débil tentativa de ajudar.
Tyler

Obrigado a todos que votaram de fato nesta resposta: Agora tenho privilégios suficientes para postar comentários normais! Então, obrigado novamente.
Tyler

10

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();

9

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 .

require.js: 'requer texto'.

Usando o plug-in require.js 'text' , com um modelo de múltiplas linhas em template.html

var template = require('text!template.html')

NPM / browserify: o módulo 'brfs'

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.


9

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 .

insira a descrição da imagem aqui


2
Isso não adicionaria espaços em branco estranhos?
tomByrer

1
@tomByrer Sim, boa observação. É bom apenas para strings que você não se importa com espaços em branco, por exemplo, HTML.
seo


8

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>

6
Apenas pense sobre isso. Você acha que é válido? Você não acha que isso pode causar problemas de exibição?
Sk8erPeter

5
Por que os votos negativos? Esta é uma resposta criativa, se não muito prática!
31412 dotarkhen

2
não, não é. É melhor usar modelos: $ .tmpl () ( api.jquery.com/tmpl ) ou EJS ( embeddedjs.com/getting_started.html ), etc. Um motivo para votos negativos é que ele está muito longe de um código válido e usa isso pode causar grandes problemas de exibição.
Sk8erPeter

Espero que ninguém nunca usa esta resposta, na prática, mas é uma idéia pura
DCShannon

7

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


Alguma documentação sobre a limitação do iPad / Safari? O MDN parece achar que está tudo bem - developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Campbeln 5/17

@ Campbeln: O CoWorker me disse isso (ele usou o código). Ainda não testei. Também pode depender da versão do iPad / Safari - provavelmente depende.
Stefan Steiger

6

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


Essa resposta não é apenas pequena, incompleta e incorreta, mas também não adiciona absolutamente nada às respostas anteriores. Sinalizando e pulando para ser excluído.
Victor Schröder


4

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}.

Exemplo:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

compatibilidade:

  • Foi introduzido em ES6//es2015
  • Agora é suportado nativamente por todos os principais fornecedores de navegadores (exceto o Internet Explorer)

Verifique a compatibilidade exata nos documentos do Mozilla aqui


Agora isso é compatível com todos os navegadores recentes? Ou existem alguns navegadores que ainda não suportam essa sintaxe?
Cmpreshn # 28/18

Desculpe pelo meu comentário extrema tarde, editado a resposta adicionado informações de compatibilidade;)
Willem van der Veen

3

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.


3

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);

3

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";

3

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";


3
Embora concorde com o ponto, eu não chamaria javascript "boa" ol
user151496

2

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 \nseu 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.

1

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/…
Bergi

@ Bergi, você está certo .. e usar <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 !!
Aditya Hajare

Infelizmente, mesmo com o style="display:none"Chrome, tenta carregar as <img>imagens mencionadas no bloco de exemplo.
Jesse Glick

0

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 !!


7
bem, obviamente, se você tiver um espaço após uma barra invertida, a barra invertida escapará do espaço. É suposto escapar da quebra de linha, não do espaço.
Sejanus
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.