Strings Multilinha em JavaScript: 3 maneiras que simplificarão sua vida

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Como atribuir uma string multilinha a uma variável em JavaScript: análise para iniciantes

\n\n

Você já escreveu um texto longo no código e pensou: "Não é possível simplesmente pressionar Enter e continuar na próxima linha?" Se você é iniciante em JavaScript, provavelmente já passou por isso. Você tenta salvar um texto multilinha em uma variável e recebe um erro de sintaxe. Familiar?

\n\n

A pergunta "How can I assign a multiline string literal to a variable?" é uma das mais populares no Stack Overflow. Milhares de desenvolvedores procuram a resposta. E não é surpresa: trabalhar com strings multilinha é o básico que todo mundo que programa em JavaScript precisa dominar.

\n\n

Neste artigo, não vamos apenas dar uma resposta seca. Vamos analisar três maneiras funcionais, mostrar exemplos da vida real e sugerir qual método escolher para que seu código seja limpo, legível e não cause dores de cabeça.

\n\n

Por que o JavaScript não gosta de quebras de linha entre aspas?

\n\n

Vamos direto ao problema principal. Se você tentar escrever assim:

\n\n

let message = "Olá!\nComo vai?\nTudo bem?";\nconsole.log(message);

\n\n

… você receberá um erro SyntaxError: unterminated string literal. Por quê? Porque em strings comuns (entre aspas duplas ou simples), o JavaScript considera que a string termina na mesma linha em que começou. A quebra de linha fisicamente interrompe a string.

\n\n

Mas não se preocupe. Temos pelo menos três maneiras de contornar essa limitação. E a primeira delas é a mais moderna e conveniente.

\n\n

Maneira 1: Template Literals — seu novo melhor amigo

\n\n

A partir do ES6 (ECMAScript 2015), o JavaScript introduziu os template literals. São strings delimitadas por acentos graves (` `). E eles resolvem o problema de multilinha de uma vez por todas.

\n\n

Veja como é simples:

\n\n

let multilineString = `Esta é a primeira linha.\nEsta é a segunda linha.\nE esta é a terceira linha.`;\n\nconsole.log(multilineString);\n// Saída:\n// Esta é a primeira linha.\n// Esta é a segunda linha.\n// E esta é a terceira linha.

\n\n

Funciona perfeitamente. Você simplesmente escreve o texto com quebras de linha, e o JavaScript as mantém como estão. Sem caracteres extras, sem mágica.

\n\n

Por que esta é a melhor opção para iniciantes?

Legibilidade: O código se parece com o que você imaginou.
Suporte a interpolação: Você pode inserir variáveis diretamente na string usando ${...}.
Padrão: Todos os navegadores modernos e Node.js suportam template literals.

\n\n

Exemplo com interpolação:

\n\n

let name = "Ana";\nlet greeting = `Olá, ${name}!\nBem-vindo ao PythonLib.\nHoje é um ótimo dia para aprender código.`;\n\nconsole.log(greeting);\n// Saída:\n// Olá, Ana!\n// Bem-vindo ao PythonLib.\n// Hoje é um ótimo dia para aprender código.

\n\n

Esta maneira é tão conveniente que, no desenvolvimento moderno, é usada em 90% dos casos. Se você está começando, lembre-se desta.

\n\n

Maneira 2: Concatenação de strings (método antigo, mas confiável)

\n\n

Antes dos template literals, os desenvolvedores usavam concatenação — juntar strings com o operador +. Este método ainda é relevante, especialmente se você trabalha com código muito antigo ou não pode usar ES6 por algum motivo.

\n\n

Como fica:

\n\n

let multilineString = "Esta é a primeira linha.\\n" +\n                     "Esta é a segunda linha.\\n" +\n                     "E esta é a terceira linha.";\n\nconsole.log(multilineString);\n// Saída:\n// Esta é a primeira linha.\n// Esta é a segunda linha.\n// E esta é a terceira linha.

\n\n

Observe o \\n — é uma sequência de escape