Quando começamos a estudar JavaScript, normalmente aprendemos alguns métodos para manipular strings, como trim(), indexOf() e lastIndexOf(). O problema é que muitas vezes esses métodos são apresentados de forma isolada, sem mostrar onde realmente são utilizados no desenvolvimento de sistemas.

Neste artigo vamos construir uma aplicação prática capaz de gerar automaticamente o usuário e o e-mail corporativo de um funcionário a partir do seu nome completo.

Durante o desenvolvimento você aprenderá como utilizar:

• trim()
• includes()
• indexOf()
• lastIndexOf()
• slice()
• template literals
• toLowerCase()

Tudo isso utilizando apenas recursos nativos do JavaScript, sem bibliotecas externas e sem Expressões Regulares (Regex).

---

O projeto

Imagine que uma empresa precisa cadastrar centenas de funcionários.

Sempre que um novo colaborador é contratado, o sistema precisa:

• remover espaços desnecessários;
• identificar o primeiro nome;
• localizar o último sobrenome;
• gerar automaticamente o usuário de acesso;
• criar um e-mail corporativo.

É exatamente isso que iremos desenvolver.

(imagem do projeto funcionando)

---

Tecnologias utilizadas

• HTML5
• CSS3
• JavaScript
• DOM
• Eventos
• Manipulação de Strings

---

Estrutura do projeto

O sistema possui um formulário simples onde o usuário informa o nome completo.

Após clicar em Gerar Dados, o JavaScript realiza todo o tratamento automaticamente.

Exemplo:

Nome informado

Marcos Antonio Caldas

Resultado

Nome tratado:
Marcos Antonio Caldas

Primeiro nome:
Marcos

Último sobrenome:
Caldas

Usuário:
marcos.caldas

E-mail:
marcos.caldas@empresa.com.br

---

Removendo espaços com trim()

Antes de qualquer processamento é importante remover espaços em branco no início e no final da string.

const nomeCompleto = inputNome.value.trim();

Imagine que o usuário digite:

      Marcos Antonio Caldas

O método trim() remove automaticamente os espaços excedentes, evitando problemas nas próximas etapas.

---

Verificando se existe nome e sobrenome com includes()

Antes de gerar o usuário precisamos verificar se o usuário digitou pelo menos duas palavras.

if(!nomeCompleto.includes(" ")){

    mensagem.innerText = "Digite nome e sobrenome.";

    return;

}

Se existir um espaço, sabemos que há pelo menos nome e sobrenome.

Caso contrário o sistema interrompe a execução.

---

Encontrando o primeiro espaço com indexOf()

Agora precisamos descobrir onde termina o primeiro nome.

const primeiroEspaco = nomeCompleto.indexOf(" ");

Exemplo:

Marcos Antonio Caldas

O primeiro espaço é localizado entre:

Marcos |Antonio Caldas

Essa posição será utilizada para separar o primeiro nome.

---

Encontrando o último sobrenome com lastIndexOf()

Também precisamos localizar o último espaço.

const ultimoEspaco = nomeCompleto.lastIndexOf(" ");

Agora teremos:

Marcos Antonio |Caldas

Assim conseguimos identificar corretamente o último sobrenome, mesmo quando existem nomes compostos.

---

Separando as informações com slice()

Depois de encontrar as posições dos espaços, utilizamos slice() para recortar os trechos da string.

Primeiro nome:

const nome = nomeCompleto.slice(0, primeiroEspaco);

Último sobrenome:

const sobrenome = nomeCompleto.slice(ultimoEspaco + 1);

Diferente do antigo substr(), o método slice() é atualmente uma das abordagens mais recomendadas para esse tipo de operação.

---

Criando o usuário automaticamente

Agora podemos montar o usuário utilizando Template Literals.

const usuario = `${nome}.${sobrenome}`.toLowerCase();

Resultado:

marcos.caldas

O método toLowerCase() garante que todas as letras fiquem em minúsculo.

---

Gerando o e-mail corporativo

Depois basta adicionar o domínio da empresa.

const email = `${usuario}@empresa.com.br`;

Resultado:

marcos.caldas@empresa.com.br

Esse tipo de automação é muito comum em sistemas internos de empresas.

---

Código-fonte completo

(Inserir aqui os arquivos HTML, CSS e JavaScript completos do projeto.)

---

O que você aprendeu

Neste projeto utilizamos diversos recursos importantes do JavaScript.

✔ trim()

✔ includes()

✔ indexOf()

✔ lastIndexOf()

✔ slice()

✔ template literals

✔ toLowerCase()

✔ Eventos

✔ DOM

✔ Manipulação de formulários

✔ Manipulação de Strings

---

Assista à aula completa

---

Conclusão

Aprender manipulação de strings vai muito além de decorar métodos. O mais importante é entender como utilizá-los para resolver problemas reais.

Neste projeto vimos como criar um sistema capaz de tratar nomes completos, identificar o primeiro nome, localizar o último sobrenome e gerar automaticamente usuários e e-mails corporativos utilizando apenas recursos nativos do JavaScript.

Esse tipo de lógica aparece com frequência em sistemas administrativos, ERPs, CRMs e aplicações corporativas. Ao dominar métodos como trim(), includes(), indexOf(), lastIndexOf() e slice(), você estará preparado para desenvolver soluções mais robustas e profissionais.