Escreva uma string multilinha em JavaScript

Harshit Jindal 12 outubro 2023
  1. Concatenar Múltiplas Linhas em JavaScript
  2. Use o caractere \ barra invertida para escapar das novas linhas literais
  3. Use literais de modelo para criar string mutliline em JavaScript
Escreva uma string multilinha em JavaScript

Este tutorial ensina como escrever uma string multilinha em JavaScript. Na era pré ES6, não havia suporte direto para strings de várias linhas em JavaScript. Existem várias maneiras de conseguir isso, formas pré ES6 que não eram tão boas, e a forma ES6, a forma de açúcar sintático. Abordaremos todos esses métodos um por um.

Concatenar Múltiplas Linhas em JavaScript

Podemos quebrar a string em várias substrings e, em seguida, usar o sinal + para concatená-las para obter a única string completa. Desta forma, conseguimos dividir as strings em várias linhas e colocá-las juntas em uma string ao mesmo tempo.

const str = 'This is DelftStack' +
    ' We make cool How to Tutorials' +
    ' &' +
    ' Make the life of other developers easier.';

Resultado:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

Era a maneira mais simples e promissora de escrever strings de várias linhas antes que os literais de modelo fossem introduzidos, mas este método não pode produzir a string formada como strings de várias linhas e isso deve ser conseguido anexando um \n no final de cada linha.

Use o caractere \ barra invertida para escapar das novas linhas literais

Podemos adicionar uma barra invertida no final de cada linha para fazer uma string de várias linhas entre aspas duplas / simples, pois esse caractere nos ajuda a escapar do caractere de nova linha.

const str = 'This is DelftStack \
We make cool How to Tutorials \
& \
Make the life of other developers easier.';

Resultado:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

Então, escrevemos a string quebrada em várias linhas, mas juntamos a string unida, o que nos ajuda a atingir nossos objetivos, a exibição correta de saída e a legibilidade do código. Mas nem sempre é desejável que desejemos strings que, na verdade, sejam divididas em várias linhas, mesmo quando exibidas. Isso é obtido usando literais de modelo no ES6.

Use literais de modelo para criar string mutliline em JavaScript

O literal de modelo é a nova forma introduzida pelo ES6 que nos ajuda a escrever strings de várias linhas com a ajuda de crases (este caractere ` é chamado crase). É de longe a melhor solução, pois não apenas nos permite escrever strings de várias linhas, mas também as imprime exatamente da mesma maneira que não era possível com nenhum dos métodos anteriores.

var str = `This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
`

Resultado:

This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Artigo relacionado - JavaScript String