Como você formata uma string em JavaScript?

Em JavaScript, uma string é um grupo de caracteres delimitados por um par de aspas simples ou duplas. Existem muitas maneiras de formatar strings em JavaScript.

Você pode usar métodos ou operadores específicos para combinar strings. Você pode até realizar operações específicas para decidir qual string aparecerá onde e quando.

Aprenda a formatar suas strings JavaScript usando métodos de concatenação e literais de modelo.

Concatenação de strings

O JavaScript permite concatenar strings usando várias abordagens. Uma abordagem útil é a concat() método. Este método usa duas ou mais strings. Ele usa uma única string de chamada e aceita uma ou mais strings como argumentos.

const primeiroNome = "John";
const últimoNome = "Corça";
deixar stringVal;
stringVal = primeiroNome.concat("", sobrenome);
console.log (stringVal);

Aqui, concat une os argumentos de string (um espaço em branco e lastName) à string de chamada (firstName). O código então armazena a nova string resultante em uma variável (stringVal) e imprime o novo valor no console do navegador:

Outra forma de concatenar uma coleção de strings é usando o operador plus. Esse método permite combinar variáveis ​​de string e literais de string para criar novas strings.

const primeiroNome = "John";
const middleName = "Mike";
const últimoNome = "Corça";
deixar stringVal;
stringVal = primeiroNome + "" + nome do meio + "" + sobrenome;
console.log (stringVal);

O código acima imprime a seguinte saída no console:

Uma terceira abordagem para concatenar suas strings JavaScript requer o uso de um sinal de mais e igual. Este método permite adicionar uma nova string ao final de uma já existente.

const primeiroNome = "John";
const últimoNome = "Corça";
deixar stringVal;
stringVal = primeiroNome;
stringVal += "";
stringVal += últimoNome;
console.log (stringVal);

Esse código anexa um espaço em branco e o valor da variável lastName à variável firstName, produzindo a seguinte saída:

Modelo Literais

Os literais de modelo são um recurso ES6 que permite formatar strings JavaScript. Um literal de modelo usa um par de acentos graves (`) para exibir strings. Este método de formatação de string permite que você exiba strings multilinha mais limpas em JavaScript.

deixar html;
html = `<ul>
<li> Nome: John Doe </li>
<li> Idade: 24 </li>
<li> Trabalho: Engenheiro de Software </li>
</ul>`;
documento.body.innerHTML = html;

O código JavaScript acima utiliza HTML para imprimir uma lista de três itens no navegador:

Para obter a mesma saída sem literais de modelo (ou antes dos literais de modelo), você precisaria usar aspas. No entanto, você não seria capaz de estender o código em várias linhas, como faria com os literais de modelo.

deixar html;
html = "<ul><li>Nome: John Doe</li><li>Idade: 24</li><li>Trabalho: Engenheiro de Software</li></ul>";
documento.body.innerHTML = html;

Interpolação de String

Os literais de modelo permitem que você use expressões em suas strings JavaScript por meio de um processo chamado interpolação. Com a interpolação de strings, você pode incorporar expressões ou variáveis ​​em suas strings usando o ${expressão} espaço reservado. É aqui que o valor dos literais de modelo JavaScript se torna verdadeiramente evidente.

let userName = "Jane Doe";
deixar idade = 21;
deixar trabalho = "Desenvolvedor Web";
deixar experiência = 3;
deixar html;
html = `<ul>
<li> Nome: ${userName} </li>
<li> Idade: ${idade} </li>
<li> Cargo: ${job} </li>
<li> Anos de experiência: ${experiência} </li>
<li> Nível do desenvolvedor: ${experiência < 5? "Júnior a Intermediário": "Senior"} </li>
</ul>`;
documento.body.innerHTML = html;

O código acima produz a seguinte saída no console:

Os quatro primeiros argumentos da ${expressão} placeholder são variáveis ​​de string, mas o quinto é uma expressão condicional. A expressão depende do valor de uma das variáveis ​​(experiência), para ditar o que deve ser exibido no navegador.

Elementos de formatação em sua página da Web com JavaScript

Além de sua associação funcional com o desenvolvimento de páginas da Web, o JavaScript trabalha com HTML para influenciar o design e o layout de uma página da Web. Ele pode manipular o texto que aparece em uma página da Web, como é o caso dos literais de modelo.

Ele pode até converter HTML em imagens e exibi-las em uma página da web.