Formato de string JavaScript: métodos com EXEMPLOS

O que é formato de string JavaScript?

O formato JavaScript String refere-se às abordagens que podem ser usadas para manipular e formatar strings em um formato definido. É um recurso crucial de qualquer linguagem de programação que permite ter controle sobre o texto que aparece em sua aplicação.

No seu código JavaScript, a formatação de string pode transformar complex dados de forma simples. Também melhora a legibilidade da saída e torna o código mais fácil de manter. Além disso, strings JavaScript formatadas corretamente também podem desempenhar um papel na melhoria da experiência do usuário no aplicativo.

Como formatar strings em JavaScript?

Para formatar uma string em JavaScript, siga as etapas fornecidas:

Passo 1) Primeiro, é necessário determinar os dados que você deseja incluir na string.

Passo 2) Em seguida, selecione um método para formatar string em JS.

Passo 3) Escreva o código para sua implementação de acordo.

Passo 4) Teste o código para ter certeza de que ele gera a saída esperada.

Passo 5) Atualize ou modifique o código para atender às necessidades ou requisitos adicionais de formatação.

Passo 6) Refatore o código para manutenção e legibilidade.

Diferentes métodos de formatação de strings em JavaScript

Existem várias maneiras de formatar strings em JavaScript, incluindo concatenação operators, literais de modelo, expressões regulares e muito mais.

Na próxima seção, você explorará o seguintewing abordagens:

  • {} Brackets com crases
  • "+" Operator
  • Formatação de string de função personalizada
  • Concatenação operator
  • Literais de modelo
  • Expressão regular
  • Função personalizada
  • Ternário operator

Método 1: usando {} Brackets com crases para formatar string em JavaScript

Neste método, você pode usar modelo literais adicionando crases (`) para incluir uma string. Em seguida, insira variáveis ​​dos argumentos da string em brackets {} precedido por um cifrão “$”. Esses modelos permitem incorporar expressões em uma string literal.

Esta operaA ação ajuda a concatenar variáveis ​​chamadas espaços reservados e outros valores definidos. Consequentemente, a string formatada final é obtida interpolando os valores dos espaços reservados.

Por exemplo, criamos duas variáveis, “nome"E"id”E, em seguida, coloque-os entre crases para gerar a saída formatada. Observe que o “$ {}”A sintaxe é usada para incorporar as expressões à string.

Código:

const name = "Jenny";
const id = 1;
console.log (`Welcome ${name}, your ID is ${id}`);

Pode-se observar que os valores de “nome” e “id” do placeholder foram exibidosyed, o que significa que a interpolação de string foi executada com sucesso.

Saída:

Welcome Jenny, your ID is 1

Método 2: usando + Operator para formatar string em JavaScript

A segunda abordagem é usar o Concatenação operator "+”para formatação básica de strings em JavaScript. Dessa forma, envolve concatenar variáveis ​​e strings individuais para gerar a saída desejada.

Por exemplo, agora usamos o “+” operator para concatenar os mesmos valores de variáveis, e o método “console.log()” retornará uma string formatada no console.

Código:

const name = "Jenny";
const id = 1;
console.log("Welcome " + name + ", your ID is " + id);

Saída:

Welcome Jenny, your ID is 1

Método 3: formatação de string de função personalizada em JavaScript

Em sua Programa JavaScript, você também pode usar a abordagem de formatação de string de função personalizada. Nesta técnica, a função aceita as variáveis ​​desejadas e retorna a string formatada. Esta função de formato também oferece muita flexibilidade. Você também pode usá-lo para atender pedidos personalizados ou complex requisitos de formatação.

Aqui, criamos uma função de formato personalizado chamada “mensagem de boas-vindas()”que aceita duas variáveis“nome"E"id” como argumentos e gera strings formatadas utilizando os literais de string de modelo.

Depois disso, definimos as variáveis ​​desejadas e as passamos no formato de chamada de função de formação personalizada.

Código:

function welcomeMsg(name, id) {
  return `Welcome ${name}, your ID is ${id}`;
}
const name = "Jenny";
const id = 1;
const msg = welcomeMsg(name, id);
console.log(msg);

Saída:

Welcome Jenny, your ID is 1

Método 4: usando concatenação para string de formato em JavaScript

Concatenação é um método simples utilizado para formatar strings em JavaScript. Esta abordagem envolve combinar variáveis ​​de string ou múltiplas strings usando a concatenação operator “+”. Você também pode usar essa técnica para tarefas simples de concatenação de strings.

No exemplo fornecido, as variáveis ​​“primeiro nome"E"Último nome”Será concatenado com a ajuda do“+” operator para formar o “nome completo”sequência da seguinte maneira.

Código:

var firstName = "Alex";
var lastName = "Edward";
var fullName = firstName + " " + lastName;
console.log(fullName);

Saída:

Alex Edward

Método 5: usando literais de modelo para string de formato em JavaScript

Strings de modelo que também são conhecidos como Literais de modelo oferecem uma maneira mais expressiva e avançada de formatar strings em JavaScript. Eles permitem a incorporação direta de expressões e variáveis dentro da string usando o espaço reservado “$ {expression}".

Além disso, o modelo literal também fornece suporte para strings multilinhas.

Código:

var name = "Alex";
var age = 30;
var msg = `Hi, ${name}! You are ${age} years old.`;
console.log(msg);

No exemplo acima, interpolamos diretamente a variável “nome"E"idade”dentro da string utilizando os espaços reservados“$ {}”dentro dos crases (`) dos literais do modelo.

Saída:

Hi, Alex! You are 30 years old.

Método 6: usando expressões regulares para formatar strings em JavaScript

No código JavaScript, Expressões regulares são a ferramenta robusta usada para manipulação de strings e correspondência de padrões. Além disso, eles também são utilizados para encontrar um determinado padrão e substituí-los por valores definidos. Esse operapode ser feita com a ajuda do “substituir ()”.

Confira o programa abaixo, o método replace() é usado com duas expressões regulares que irão substituir os placeholders “[nome]"E"[Eu iria]” com o respectivo valor.

Código:

let name = "Jenny";
let id = 1;
let message = "Welcome [name], your ID is [id]".replace(/\[name\]/g, name).replace(/\[id\]/g, id);
console.log(message);

Isso resulta em um novo objeto string que será armazenado no “mensagem”variável registrada no console como saída.

Saída:

Welcome Jenny. Your ID is 1

Método 7: usando uma função personalizada para Format String em JavaScript

Você também pode criar um formato de string mais reutilizável e personalizado em JavaScript. Para isso, defina um novo função personalizada que aceita uma string e outros parâmetros. Você pode chamá-lo para substituir espaços reservados ou aplicar regras de formatação personalizadas. Esta técnica também suporta formatação personalizada em complex cenários de formatação.

Aqui, criamos um novo formato de função personalizado chamado “formatoString”que aceita um“corda"E"params"(ordem de parâmetros) como argumentos.

Dentro do corpo da função, invocamos o “substituir ()”método com uma expressão regular para substituir espaços reservados“0 {}, 1 {}”Com seus respectivos valores da matriz de parâmetros.

Código:

function formatString(string, params) {
  return string.replace(/{(\d+)}/g, (match, index) => {
    return typeof params[index] !== 'undefined' ? params[index] : match;
  });
}
var name = "Alex";
var age = 30;
var formattedMsg = formatString("Hi, {0}! You are {1} years old.", [name, age]);
console.log(formattedMsg); 

Saída:

Hi, Alex! You are 30 years old.

Método 8: usando ternário Operator para formatar string em JavaScript

JavaScript Ternário operator é uma forma abreviada de escrever expressões condicionais em strings. No entanto, também pode ser usado para formatação de string selecionando condicionalmente um dos dois valores de acordo com a expressão booleana especificada e retornando a string.

Sintaxe:

condition ? expressionIfTrue : expressionIfFalse

Dê uma olhada neste código de exemplo de uso de um ternário operator para formatar em um objeto string.

Código:

let name = "Jenny";
let isAdmin = true;
let msg = `Welcome ${name}${isAdmin ? ", you are an admin" : ""}`;
console.log(msg);

Saída:

Welcome Jenny, you are an admin

Aqui, definimos duas variáveis ​​“nome"E"é administrador”com os valores“Jenny"E"verdadeiro”, respectivamente.

Depois disso, utilizamos o ternário operator para adicionar condicionalmente a string “, você é um administrador” à string da mensagem se o valor do parâmetro opcional “isAdmin” for verdadeiro, conforme declarado acima.

Comparação de métodos de formato de string JavaScript

Aqui, listamos as vantagens e desvantagens dos métodos de formato de string JavaScript discutidos acima:

Forma Vantagens Desvantagens
Brackets {} com crases (`) • Fácil de usar.
• Conciso e readable código.
Pode não ser apropriado para mais empresasplex requisitos de formatação.
"+" operator Fácil de entender. Pode ser ineficiente para mais empresasplex requisitos de formatação.
Função personalizada para formatação de String Oferece muita flexibilidade. Precisa de mais esforço de codificação.
Concatenação Operator Simples e amplamente suportado. Incômodo para complex formatação de string.
Literais de modelo • Suporta strings multilinhas.
. Readable e sintaxe intuitiva.
Controle limitado sobre as opções de formatação.
Expressões regulares Fornece muita flexibilidade. Implementação e manutenção diferentes em comparação com outros métodos.
Função personalizada Oferece muita flexibilidade. Precisa de codificação adicional para criar e manter uma função personalizada.
Ternário operator Maneira concisa de lidar com valores nulos ou indefinidos. Pode não ser adequado para mais comunicaçõesplex requisitos de formatação.

Observe que a seleção do método depende muito do caso de uso específico e dos requisitos relevantes do seu código JavaScript.

Conclusão

In JavaScript, você pode usar literais de modelo, o ternário operator, “+" operator, expressões regulares e a função personalizada para formatar strings. Esses métodos de formato de string permitem que os desenvolvedores manipulem e apresentem dados textuais de maneira eficiente.

Portanto, selecione o método correto com base na legibilidade, desempenho e compatibilidade do navegador. Ele permite que os desenvolvedores melhorem as experiências do usuário e alcancem os padrões de formatação desejados.