Criando cadeias de linhas múltiplas em JavaScript

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

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"

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

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

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

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

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

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)

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:

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:

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

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>
*/});

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>

para resumir, tentei duas abordagens listadas aqui na programação javascript do usuário (Opera 11.01):

• este não funcionou: Criando cadeias de linhas múltiplas em JavaScript
• isso funcionou muito bem, eu também descobri como fazer com que pareça bom na exibição de fonte do Notepad ++: Criando seqüências multilinhas em JavaScript

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 .

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.

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

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

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

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

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