{"id":1002,"date":"2024-04-30T16:30:18","date_gmt":"2024-04-30T19:30:18","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1002"},"modified":"2026-07-30T13:35:10","modified_gmt":"2026-07-30T16:35:10","slug":"manipulando-strings-em-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1002","title":{"rendered":"Manipula\u00e7\u00e3o de Strings em JavaScript | trim(), includes(), indexOf(), lastIndexOf() e slice() na Pr\u00e1tica"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Quando come\u00e7amos a estudar JavaScript, normalmente aprendemos alguns m\u00e9todos para manipular strings, como <code>trim()<\/code>, <code>indexOf()<\/code> e <code>lastIndexOf()<\/code>. O problema \u00e9 que muitas vezes esses m\u00e9todos s\u00e3o apresentados de forma isolada, sem mostrar onde realmente s\u00e3o utilizados no desenvolvimento de sistemas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo vamos construir uma aplica\u00e7\u00e3o pr\u00e1tica capaz de gerar automaticamente o usu\u00e1rio e o e-mail corporativo de um funcion\u00e1rio a partir do seu nome completo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o desenvolvimento voc\u00ea aprender\u00e1 como utilizar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>trim()<\/li>\n\n\n\n<li>includes()<\/li>\n\n\n\n<li>indexOf()<\/li>\n\n\n\n<li>lastIndexOf()<\/li>\n\n\n\n<li>slice()<\/li>\n\n\n\n<li>template literals<\/li>\n\n\n\n<li>toLowerCase()<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tudo isso utilizando apenas recursos nativos do JavaScript, sem bibliotecas externas e sem Express\u00f5es Regulares (Regex).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que uma empresa precisa cadastrar centenas de funcion\u00e1rios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que um novo colaborador \u00e9 contratado, o sistema precisa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>remover espa\u00e7os desnecess\u00e1rios;<\/li>\n\n\n\n<li>identificar o primeiro nome;<\/li>\n\n\n\n<li>localizar o \u00faltimo sobrenome;<\/li>\n\n\n\n<li>gerar automaticamente o usu\u00e1rio de acesso;<\/li>\n\n\n\n<li>criar um e-mail corporativo.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente isso que iremos desenvolver.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(imagem do projeto funcionando)<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tecnologias utilizadas<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML5<\/li>\n\n\n\n<li>CSS3<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>DOM<\/li>\n\n\n\n<li>Eventos<\/li>\n\n\n\n<li>Manipula\u00e7\u00e3o de Strings<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Estrutura do projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O sistema possui um formul\u00e1rio simples onde o usu\u00e1rio informa o nome completo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ap\u00f3s clicar em <strong>Gerar Dados<\/strong>, o JavaScript realiza todo o tratamento automaticamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Nome informado\n\nMarcos Antonio Caldas\n\nResultado\n\nNome tratado:\nMarcos Antonio Caldas\n\nPrimeiro nome:\nMarcos\n\n\u00daltimo sobrenome:\nCaldas\n\nUsu\u00e1rio:\nmarcos.caldas\n\nE-mail:\nmarcos.caldas@empresa.com.br<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Removendo espa\u00e7os com trim()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de qualquer processamento \u00e9 importante remover espa\u00e7os em branco no in\u00edcio e no final da string.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const nomeCompleto = inputNome.value.trim();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que o usu\u00e1rio digite:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      Marcos Antonio Caldas<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo <code>trim()<\/code> remove automaticamente os espa\u00e7os excedentes, evitando problemas nas pr\u00f3ximas etapas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Verificando se existe nome e sobrenome com includes()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de gerar o usu\u00e1rio precisamos verificar se o usu\u00e1rio digitou pelo menos duas palavras.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if(!nomeCompleto.includes(\" \")){\n\n    mensagem.innerText = \"Digite nome e sobrenome.\";\n\n    return;\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se existir um espa\u00e7o, sabemos que h\u00e1 pelo menos nome e sobrenome.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Caso contr\u00e1rio o sistema interrompe a execu\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Encontrando o primeiro espa\u00e7o com indexOf()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Agora precisamos descobrir onde termina o primeiro nome.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const primeiroEspaco = nomeCompleto.indexOf(\" \");<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Marcos Antonio Caldas<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O primeiro espa\u00e7o \u00e9 localizado entre:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Marcos |Antonio Caldas<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa posi\u00e7\u00e3o ser\u00e1 utilizada para separar o primeiro nome.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Encontrando o \u00faltimo sobrenome com lastIndexOf()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m precisamos localizar o \u00faltimo espa\u00e7o.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const ultimoEspaco = nomeCompleto.lastIndexOf(\" \");<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora teremos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Marcos Antonio |Caldas<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim conseguimos identificar corretamente o \u00faltimo sobrenome, mesmo quando existem nomes compostos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Separando as informa\u00e7\u00f5es com slice()<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de encontrar as posi\u00e7\u00f5es dos espa\u00e7os, utilizamos <code>slice()<\/code> para recortar os trechos da string.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primeiro nome:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const nome = nomeCompleto.slice(0, primeiroEspaco);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00daltimo sobrenome:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const sobrenome = nomeCompleto.slice(ultimoEspaco + 1);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Diferente do antigo <code>substr()<\/code>, o m\u00e9todo <code>slice()<\/code> \u00e9 atualmente uma das abordagens mais recomendadas para esse tipo de opera\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando o usu\u00e1rio automaticamente<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Agora podemos montar o usu\u00e1rio utilizando Template Literals.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const usuario = `${nome}.${sobrenome}`.toLowerCase();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resultado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>marcos.caldas<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo <code>toLowerCase()<\/code> garante que todas as letras fiquem em min\u00fasculo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Gerando o e-mail corporativo<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois basta adicionar o dom\u00ednio da empresa.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const email = `${usuario}@empresa.com.br`;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resultado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>marcos.caldas@empresa.com.br<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse tipo de automa\u00e7\u00e3o \u00e9 muito comum em sistemas internos de empresas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">C\u00f3digo-fonte completo<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(Inserir aqui os arquivos HTML, CSS e JavaScript completos do projeto.)<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea aprendeu<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto utilizamos diversos recursos importantes do JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 trim()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 includes()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 indexOf()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 lastIndexOf()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 slice()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 template literals<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 toLowerCase()<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Eventos<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 DOM<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Manipula\u00e7\u00e3o de formul\u00e1rios<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Manipula\u00e7\u00e3o de Strings<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Assista \u00e0 aula completa<\/h1>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Manipula\u00e7\u00e3o de Strings em JavaScript na Pr\u00e1tica | trim(), indexOf(), lastIndexOf() e slice()\" width=\"960\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/dvbyfw2SkeU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender manipula\u00e7\u00e3o de strings vai muito al\u00e9m de decorar m\u00e9todos. O mais importante \u00e9 entender como utiliz\u00e1-los para resolver problemas reais.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto vimos como criar um sistema capaz de tratar nomes completos, identificar o primeiro nome, localizar o \u00faltimo sobrenome e gerar automaticamente usu\u00e1rios e e-mails corporativos utilizando apenas recursos nativos do JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse tipo de l\u00f3gica aparece com frequ\u00eancia em sistemas administrativos, ERPs, CRMs e aplica\u00e7\u00f5es corporativas. Ao dominar m\u00e9todos como <code>trim()<\/code>, <code>includes()<\/code>, <code>indexOf()<\/code>, <code>lastIndexOf()<\/code> e <code>slice()<\/code>, voc\u00ea estar\u00e1 preparado para desenvolver solu\u00e7\u00f5es mais robustas e profissionais.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando come\u00e7amos a estudar JavaScript, normalmente aprendemos alguns m\u00e9todos para manipular strings, como trim(), indexOf() e lastIndexOf(). O problema \u00e9 que muitas vezes esses m\u00e9todos s\u00e3o apresentados de forma isolada, sem mostrar onde realmente s\u00e3o utilizados no desenvolvimento de sistemas. Neste artigo vamos construir uma aplica\u00e7\u00e3o pr\u00e1tica capaz de gerar automaticamente o usu\u00e1rio e o e-mail corporativo de um funcion\u00e1rio a partir do seu nome completo. Durante o desenvolvimento voc\u00ea aprender\u00e1 como utilizar: Tudo isso utilizando apenas recursos nativos do JavaScript, sem bibliotecas externas e sem Express\u00f5es Regulares (Regex). O projeto Imagine que uma empresa precisa cadastrar centenas de funcion\u00e1rios. Sempre que um novo colaborador \u00e9 contratado, o sistema precisa: \u00c9 exatamente isso que iremos desenvolver. (imagem do projeto funcionando) Tecnologias utilizadas Estrutura do projeto O sistema possui um formul\u00e1rio simples onde o usu\u00e1rio informa o nome completo. Ap\u00f3s clicar em Gerar Dados, o JavaScript realiza todo o tratamento automaticamente. Exemplo: Removendo espa\u00e7os com trim() Antes de qualquer processamento \u00e9 importante remover espa\u00e7os em branco no in\u00edcio e no final da string. Imagine que o usu\u00e1rio digite: O m\u00e9todo trim() remove automaticamente os espa\u00e7os excedentes, evitando problemas nas pr\u00f3ximas etapas. Verificando se existe nome e sobrenome com includes() Antes de gerar o usu\u00e1rio precisamos verificar se o usu\u00e1rio digitou pelo menos duas palavras. Se existir um espa\u00e7o, sabemos que h\u00e1 pelo menos nome e sobrenome. Caso contr\u00e1rio o sistema interrompe a execu\u00e7\u00e3o. Encontrando o primeiro espa\u00e7o com indexOf() Agora precisamos descobrir onde termina o primeiro nome. Exemplo: O primeiro espa\u00e7o \u00e9 localizado entre: Essa posi\u00e7\u00e3o ser\u00e1 utilizada para separar o primeiro nome. Encontrando o \u00faltimo sobrenome com lastIndexOf() Tamb\u00e9m precisamos localizar o \u00faltimo espa\u00e7o. Agora teremos: Assim conseguimos identificar corretamente o \u00faltimo sobrenome, mesmo quando existem nomes compostos. Separando as informa\u00e7\u00f5es com slice() Depois de encontrar as posi\u00e7\u00f5es dos espa\u00e7os, utilizamos slice() para recortar os trechos da string. Primeiro nome: \u00daltimo sobrenome: Diferente do antigo substr(), o m\u00e9todo slice() \u00e9 atualmente uma das abordagens mais recomendadas para esse tipo de opera\u00e7\u00e3o. Criando o usu\u00e1rio automaticamente Agora podemos montar o usu\u00e1rio utilizando Template Literals. Resultado: O m\u00e9todo toLowerCase() garante que todas as letras fiquem em min\u00fasculo. Gerando o e-mail corporativo Depois basta adicionar o dom\u00ednio da empresa. Resultado: Esse tipo de automa\u00e7\u00e3o \u00e9 muito comum em sistemas internos de empresas. C\u00f3digo-fonte completo (Inserir aqui os arquivos HTML, CSS e JavaScript completos do projeto.) O que voc\u00ea aprendeu Neste projeto utilizamos diversos recursos importantes do JavaScript. \u2714 trim() \u2714 includes() \u2714 indexOf() \u2714 lastIndexOf() \u2714 slice() \u2714 template literals \u2714 toLowerCase() \u2714 Eventos \u2714 DOM \u2714 Manipula\u00e7\u00e3o de formul\u00e1rios \u2714 Manipula\u00e7\u00e3o de Strings Assista \u00e0 aula completa Conclus\u00e3o Aprender manipula\u00e7\u00e3o de strings vai muito al\u00e9m de decorar m\u00e9todos. O mais importante \u00e9 entender como utiliz\u00e1-los para resolver problemas reais. Neste projeto vimos como criar um sistema capaz de tratar nomes completos, identificar o primeiro nome, localizar o \u00faltimo sobrenome e gerar automaticamente usu\u00e1rios e e-mails corporativos utilizando apenas recursos nativos do JavaScript. Esse tipo de l\u00f3gica aparece com frequ\u00eancia em sistemas administrativos, ERPs, CRMs e aplica\u00e7\u00f5es corporativas. Ao dominar m\u00e9todos como trim(), includes(), indexOf(), lastIndexOf() e slice(), voc\u00ea estar\u00e1 preparado para desenvolver solu\u00e7\u00f5es mais robustas e profissionais.<\/p>\n","protected":false},"author":1,"featured_media":2256,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1002"}],"version-history":[{"count":9,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002\/revisions"}],"predecessor-version":[{"id":2261,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002\/revisions\/2261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2256"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}