Como você formata uma string em JavaScript?

Como você formata uma string em JavaScript?

Em JavaScript, uma string é um grupo de caracteres entre um par de aspas simples ou duplas. Há muitas maneiras de formatar strings em JavaScript.





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





MAKEUSEO VÍDEO DO DIA

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





Concatenação de String

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 recebe uma ou mais strings como argumentos.

const firstName = "John"; 
const lastName = "Doe";

let stringVal;

stringVal = firstName.concat(" ", lastName);
console.log(stringVal);

Aqui, concat une os argumentos da 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 :



melhores configurações do roteador para internet rápida
  Usando o método concat

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

const firstName = "John"; 
const middleName = "Mike";
const lastName = "Doe";

let stringVal;

stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);

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





  Concatenação de string de operador plus

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 existente.

const firstName = "John"; 
const lastName = "Doe";

let stringVal;

stringVal = firstName;
stringVal += " ";
stringVal += lastName;

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:





qual programa do Windows é freqüentemente usado para se conectar a um servidor Linux via ssh?
  Operadores de mais e igual em string

Literais Modelo

Os literais de modelo são um recurso do ES6 que permite formatar strings JavaScript. Um literal de modelo usa um par de acentos graves (`) para exibir strings. Esse método de formatação de strings permite exibir strings de várias linhas mais limpas em JavaScript.

let html; 

html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;

document.body.innerHTML = html;

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

  Saída de literais de modelo

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

let html; 

html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";

document.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} marcador de posição. É aqui que o valor dos literais de modelo JavaScript se torna verdadeiramente evidente.

A8B5BFBBCEA74BBE80E5430BA22D7067A01E6A

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

  Saída de interpolação de string

Os quatro primeiros argumentos do ${expressão} placeholder são variáveis ​​de string, mas a quinta é 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 de literais de modelo.

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