JavaFormato de sequência de script: métodos com EXEMPLOS

Por: James Hartmann James Hartmann
Hours Atualização do

O que é o JavaFormato de sequência de script?

JavaO formato Script String se refere à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 que você tenha controle sobre o texto que aparece em seu aplicativo.

Em sua JavaCódigo de script, formatação de string pode transformar dados complexos de forma simples. Também melhora a legibilidade da saída e torna o código mais sustentável. Além disso, formatado corretamente JavaAs sequências de script também podem desempenhar um papel na melhoria da experiência do usuário no aplicativo.

Como formatar strings em JavaRoteiro?

Para formatar uma string em JavaScript, siga os passos fornecidos:

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 operadores de concatenação, literais de modelo, expressões regulares e muito mais.

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

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

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 entre colchetes {} precedidos de um cifrão “$”. Esses modelos permitem incorporar expressões em uma string literal.

Esta operaçã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 exibidos, o que significa que a interpolação da string foi realizada com sucesso.

Saída:

Welcome Jenny, your ID is 1

ARTIGOS RELACIONADOS

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

A segunda abordagem é usar o Operador de concatenação "+”para formatação básica de strings em JavaScript. Essa maneira envolve concatenar as variáveis ​​individuais e strings para gerar a saída desejada.

Por exemplo, agora usamos o operador “+” 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 JavaPrograma de script, 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 a requisitos de formatação personalizados ou complexos.

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. Essa abordagem envolve combinar variáveis ​​de string ou múltiplas strings juntas usando o operador de concatenação “+”. 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 operador “+” 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 JavaScript

In JavaCódigo de script, 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. Esta operação pode 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 fazer 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. Essa técnica também oferece suporte à formatação personalizada em cenários de formatação complexos.

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 Operador ternário é 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 exemplo de código de uso de um operador ternário 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 operador ternário 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 JavaMétodos de formato de sequência de caracteres de script

Aqui, listamos as vantagens e desvantagens dos itens discutidos acima JavaMétodos de formato de string de script:

Forma Diferenciais Desvantagens
Brackets {} com crases (`) • Fácil de usar.
• Código conciso e legível. 		Pode não ser apropriado para requisitos de formatação mais complexos.
Operador “+” Fácil de entender. Pode ser ineficiente para requisitos de formatação mais complexos.
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 formatação complexa de strings.
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.
Operador ternário Maneira concisa de lidar com valores nulos ou indefinidos. Pode não ser adequado para requisitos de formatação mais complexos.

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

Conclusão

In JavaScript, você pode usar literais de modelo, o operador ternário, “+”Operador, 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.