Como utilizar quebra de linha em JSON

Neste artigo você vai aprender a como adicionar quebra de linha em JSON, com uma simples caractere em seu objeto JSON

Fala programador(a), beleza? Bora aprender mais sobre JSON!

Como precisamos colocar uma nova linha em um texto precisamos de um caractere especial que tenha este efeito

O de quebrar linhas é o \n, porém apenas ele não será suficiente

Ao adicionar o \n ao seu JSON, você terá uma quebra de linha no dado JSON e não na saída dos dados, que é quando queremos utilizar esta quebra

Para resolver isso vamos adicionar uma outra barra, deste jeito: \ \n

Assim faremos o escape da do caractere, e o dado é salvo no JSON como \n, e quando utilizamos o dado teremos uma quebra de linha

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Veja um exemplo prático:

const myData = '{"text" : "Alguma coisa\\n Agora quebrou linha \\n"}';

Aqui temos duas quebras de linhas adicionadas na propriedade text do nosso objeto JSON

E você pode colocar quantas quiser, só sequir a sintaxe exibida no trecho de código acima

Quer aprender tudo sobre JSON? Se liga neste vídeo:

Conclusão

No artigo de hoje você viu como quebra de linha em JSON

Utilizamos uma contra barra para dar o escape no caractere especial e depois o caractere especial \n

Que resulta na quebra de linha quando utilizamos o dado

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os curso

Se liga num detalhe que confunde muita gente

Quando você coloca só o \n direto no JSON, ele acaba sendo interpretado ali na hora da string, e a quebra fica salva no dado, não na saída que você quer usar depois

É por isso que precisamos da barra extra pra dar o escape

Assim o JSON guarda o \n como texto, e a quebra só acontece na hora que você usa o dado, que é o momento certo

Beleza, salvou o \n no JSON, mas e agora?

Pra enxergar a quebra acontecendo, você precisa converter o texto de volta pra objeto e depois usar o valor

No JavaScript isso é feito com o JSON.parse, que transforma a string JSON num objeto que você consegue manipular

Aí quando você pega a propriedade text e joga num console.log, a quebra aparece direitinho

Bora ver:

const obj = JSON.parse(myData); console.log(obj.text);

Agora sim tu vê o texto quebrado em duas linhas, do jeito que a gente queria

Tome cuidado com uma pegadinha clássica

Se você jogar esse texto com \n direto numa página HTML, a quebra some, o navegador simplesmente ignora

Isso não é bug do seu JSON, é comportamento normal do HTML, que não respeita quebra de linha do texto puro

Pra resolver, você aplica no elemento um estilo de white-space que preserva as quebras, tipo white-space: pre-line

Aí o \n volta a virar quebra visível na tela

Perguntas frequentes sobre quebra de linha em JSON

Qual caractere faz a quebra de linha em JSON? É o \n, mas dentro de uma string JSON você precisa escapar com a barra, ficando \\n, pra que ele seja salvo corretamente no dado

Por que meu \n aparece como texto e não quebra a linha? Porque a quebra só acontece quando você usa o dado depois de parsear, com JSON.parse por exemplo. Salvo no JSON ele fica guardado como caractere de escape mesmo

Dá pra colocar várias quebras de linha? Dá sim, é só repetir o \\n quantas vezes quiser dentro da string, seguindo a mesma sintaxe do exemplo

A quebra funciona igual em qualquer linguagem? O padrão do JSON é o mesmo, o \n vale em qualquer lugar que leia JSON. O que muda é como cada linguagem lê e exibe o dado depois