Criação de cordas de várias linhas em JavaScript

Question

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

Answer 1

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"

Answer 2

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

Answer 3

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

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

¹ Nota: este será perdido após minifying / ofuscar seu código

Answer 4

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 .

Answer 5

Você pode fazer isso ...

var string = 'This is\n' +
'a multiline\n' + 
'string';

Answer 6

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)

Answer 7

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?

Answer 8

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:

Answer 9

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

Answer 10

A utilização de etiquetas de script:

• adicionar um bloco <script>...</script> contendo o seu texto com várias linhas em tag head;

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

Answer 11

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)

Answer 12

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

Answer 13

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

Esta foi testado em Fx 19 e Chrome 24 no Mac

DEMONSTRA

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

Answer 14

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.

Answer 15

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.

Answer 16

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 .

Answer 17

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>

Answer 18

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

Answer 19

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.

Answer 20

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

Answer 21

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

Answer 22

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)

Verifique a compatibilidade exata em docs Mozilla aqui

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

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.

Answer 28

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

Answer 29

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

Answer 30

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