varias - string quebra de linha javascript




Criando strings de múltiplas linhas em JavaScript (20)

Atualização ES6:

Como a primeira resposta menciona, com 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 strings delimitadas por back-tick:

const htmlString = `${user.name} liked your post about strings`;

Isso só se transpela para a concatenação:

user.name + ' liked your post about strings'

Resposta ES5 original:

O guia de estilo JavaScript do Google recomenda usar a concatenação de strings em vez de novas linhas de escape:

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 em tempo de compilação; espaços em branco após a barra resultarão em erros complicados; e embora a maioria dos mecanismos de script suportem isso, isso não faz parte do ECMAScript.

Use concatenação de string 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.';

Eu tenho o seguinte código em Ruby. Eu quero converter esse código em JavaScript. qual é o código equivalente no 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 é OK , mas você pode usar os transpilers para ser mais compatível.

Resposta ES5 original:

O Javascript não possui uma sintaxe aqui-documento. Você pode escapar da nova linha literal, no entanto, que chega perto:

"foo \
bar"

Eu criei este método de uma corda multi-alinhada. Como converter uma função em uma string também retorna quaisquer comentários dentro da função, você pode usar os comentários como sua string usando um comentário multilineado / ** /. Você apenas tem que cortar as pontas e você 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)

Eu gosto desta sintaxe e indentação:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(mas na verdade não pode ser considerado como string de múltiplas linhas)


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 de Slash (primeiro) é a mais rápida.

Consulte este caso de teste para mais detalhes sobre o desempenho

Atualizar:

Com o ES2015 , podemos aproveitar o recurso de sequências de modelos. Com isso, só precisamos usar back-ticks para criar seqüências 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>
  `

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

Minha extensão para https://.com/a/15558082/80404 . Espera comentário em um formulário /*! any multiline comment */ /*! 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();

Minha versão da junção baseada em array para a concatração de 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 funcionou bem para mim, especialmente porque eu frequentemente insiro valores no html construído dessa maneira. Mas tem muitas limitações. A indentação seria legal. Não ter que lidar com aspas aninhadas seria muito bom, e apenas a volumetria disso me incomoda.

O .push () é adicionado ao array, demorando muito tempo? Veja esta resposta relacionada:

( Existe uma razão para os desenvolvedores JavaScript não usarem Array.push ()? )

Depois de olhar para essas execuções de teste (opostas), parece que o .push () é adequado para matrizes de strings que provavelmente não crescerão mais de 100 itens - vou evitá-lo em favor de adições indexadas para matrizes maiores.


O equivalente em javascript é:

var text = `
This
Is
A
Multiline
String
`;

Aqui está a specification . Veja o suporte ao navegador na parte inferior desta página . Aqui estão alguns examples também.


Observe também que, ao estender a string por várias linhas usando barras invertidas no final de cada linha, qualquer caractere extra (principalmente espaços, tabulações e comentários adicionados por engano) após a barra invertida causará erro de caractere inesperado, que demorou uma hora para encontrar Fora

var string = "line1\  // comment, space or tabs here raise error
line2";

Resumindo, eu tentei 2 abordagens listadas aqui na programação do usuário javascript (Opera 11.01):

Então eu recomendo a abordagem de trabalho para usuários JS do usuário Opera. Ao contrário do que o autor estava dizendo:

Não funciona no firefox ou ópera; apenas no IE, cromo e safári.

Ele funciona no Opera 11. Pelo menos nos scripts JS do usuário. Pena que eu não posso comentar sobre respostas individuais ou votar a favor da resposta, eu faria isso imediatamente. Se possível, alguém com maiores privilégios, por favor, faça isso por mim.


Se você estiver disposto a usar as novas linhas, elas podem ser usadas com perfeição . Parece um documento com uma borda de página .


Você pode ter strings de múltiplas linhas em JavaScript puro.

Esse 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 funcionará no futuro, então não confie nele.

Usando a seguinte função:

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 foi testado com sucesso nos seguintes navegadores (não mencionados = não testados):

  • IE 4 - 10
  • Opera 9.50 - 12 (não em 9-)
  • Safari 4 - 6 (não em 3-)
  • Chrome 1 a 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 o seu minifator, 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 .


Você consegue fazer isso...

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

Você pode usar o TypeScript (JavaScript SuperSet), ele suporta seqüências de caracteres multilinhas e transpila de volta para JavaScript puro sem sobrecarga:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

Se você quiser realizar 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)

Note que o iPad / Safari não suporta 'functionName.toString()'

Se você tiver muito código legado, também poderá 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 multiline-string a partir da variante JavaScript simples, onde você coloca os modelos em outro arquivo (que pode ser mesclado no pacote).

Você pode tentar o TypeScript em
TypeScript


o padrão text = <<"HERE" This Is A Multiline String HERE não está disponível em js (lembro-me de usá-la em meus bons e velhos tempos em Perl).

Para manter a supervisão com cadeias multilinhas complexas ou longas, às vezes utilizo 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á mostrado (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 a abrangência de strings em várias linhas usando strings 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 a redução / ofuscação do seu código


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

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


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 o \nseu código-fonte será semelhante -

This 
 <br>is
 <br>multiline
 <br>string.

Ao usar <br>a saída do seu navegador, será semelhante -

This
is
multiline
string.

A maneira mais fácil de fazer strings de múltiplas linhas em Javascrips é com o uso de backticks (``). Isso permite criar strings de múltiplas linhas 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 em documentos do Mozilla aqui







heredoc