{"id":1002,"date":"2024-04-30T16:30:18","date_gmt":"2024-04-30T19:30:18","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1002"},"modified":"2024-04-30T18:15:45","modified_gmt":"2024-04-30T21:15:45","slug":"manipulando-strings-em-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1002","title":{"rendered":"Manipulando Strings em JavaScript"},"content":{"rendered":"\n<p>Em JavaScript, uma das tarefas mais comuns \u00e9 a manipula\u00e7\u00e3o de strings. Seja para limpar espa\u00e7os em branco extras, encontrar a posi\u00e7\u00e3o de um caractere espec\u00edfico ou at\u00e9 mesmo para buscar a \u00faltima ocorr\u00eancia de um padr\u00e3o, existem m\u00e9todos nativos que podem facilitar bastante o trabalho. Neste artigo, vamos explorar tr\u00eas desses m\u00e9todos essenciais: trim(), indexOf() e lastIndexOf(), mostrando como eles podem ser poderosos aliados na manipula\u00e7\u00e3o eficaz de strings em JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo trim()<\/h2>\n\n\n\n<p>O m\u00e9todo trim() \u00e9 utilizado para remover espa\u00e7os em branco extras do in\u00edcio e do final de uma string. Isso \u00e9 especialmente \u00fatil ao lidar com dados de entrada, onde espa\u00e7os indesejados podem ser um problema.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"342\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-31.png\" alt=\"\" class=\"wp-image-1003\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-31.png 529w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-31-300x194.png 300w\" sizes=\"(max-width: 529px) 100vw, 529px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, o m\u00e9todo trim() remove os espa\u00e7os em branco extras do in\u00edcio e do final da string, deixando apenas o conte\u00fado desejado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo indexOf()<\/h2>\n\n\n\n<p>O m\u00e9todo indexOf() retorna a posi\u00e7\u00e3o do primeiro caractere de uma determinada substring dentro de uma string. Se a substring n\u00e3o for encontrada, o m\u00e9todo retorna -1. Vamos ver um exemplo de como isso pode ser \u00fatil:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"309\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-32.png\" alt=\"\" class=\"wp-image-1004\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-32.png 714w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-32-300x130.png 300w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, o m\u00e9todo indexOf() retorna a posi\u00e7\u00e3o onde a palavra &#8220;jornada&#8221; come\u00e7a na string. Se a palavra n\u00e3o fosse encontrada, o m\u00e9todo retornaria -1. Esse m\u00e9todo pode ser trabalhado com vetores para procurar um item especifico dentro de um vtor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo lastIndexOf()<\/h2>\n\n\n\n<p>Similar ao m\u00e9todo indexOf(), o lastIndexOf() retorna a posi\u00e7\u00e3o da \u00faltima ocorr\u00eancia de uma substring dentro de uma string. Este m\u00e9todo \u00e9 \u00fatil quando precisamos encontrar a \u00faltima ocorr\u00eancia de um padr\u00e3o. Vejamos um exemplo:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"343\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-33.png\" alt=\"\" class=\"wp-image-1005\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-33.png 999w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-33-300x103.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/04\/image-33-768x264.png 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste caso, o m\u00e9todo lastIndexOf() retorna a posi\u00e7\u00e3o da \u00faltima ocorr\u00eancia da palavra &#8220;jornada&#8221; na string.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Manipulando Strings em JavaScript | Mini Projeto\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/WFcBiWTg2fA?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<pre class=\"wp-block-code\"><code><strong>HTML\n<\/strong>\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  \n  &lt;title&gt;Sistema de Crach\u00e1 &lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  \n  &lt;img src=\"img\/imagem.jpg\" style=\"width: 100%;\"&gt;\n\n  &lt;h1&gt;Nome no Crach\u00e1&lt;\/h1&gt;\n  &lt;form&gt;\n    &lt;p&gt;Nome do Funcion\u00e1rio:\n      &lt;input type=\"text\" id=\"inNome\" autofocus required&gt;\n    &lt;\/p&gt;\n    &lt;input type=\"submit\" value=\"Gerar Crach\u00e1\"&gt;\n  &lt;\/form&gt;\n  &lt;h3&gt;&lt;\/h3&gt;\n  &lt;script src=\"js\/script.js\"&gt;&lt;\/script&gt;\n  \n&lt;\/body&gt;\n\n&lt;\/html&gt;\n\n<strong>JAVASCRIPT\n<\/strong>\nconst frm = document.querySelector('form');\nconst resp = document.querySelector('h3');\n\nfrm.addEventListener('submit', (evento)=&gt;{\n\nevento.preventDefault()\n\nconst nome = frm.inNome.value.trim();\n\nfrm.inNome.value = \" \";\n\nif(!nome.includes(\" \")){\n  alert('Informe o nome completo');\n  return\n\n}\n\nconst priEspaco = nome.indexOf(\" \");\nconst ultEspaco = nome.lastIndexOf(\" \");\n\nconst cracha = nome.substr(0, priEspaco) + nome.substr(ultEspaco);\n\nresp.innerText = `Crach\u00e1: ${cracha}`\n\n\n})<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Os m\u00e9todos trim(), indexOf() e lastIndexOf() s\u00e3o ferramentas poderosas que simplificam a manipula\u00e7\u00e3o de strings em JavaScript. Ao dominar esses m\u00e9todos, voc\u00ea pode tornar seu c\u00f3digo mais eficiente e leg\u00edvel, lidando com strings de forma mais precisa e eficaz. Experimente esses m\u00e9todos em seus projetos e explore outras funcionalidades que JavaScript oferece para manipula\u00e7\u00e3o de strings. Com pr\u00e1tica e experi\u00eancia, voc\u00ea se tornar\u00e1 um especialista em manipula\u00e7\u00e3o de strings em JavaScript.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em JavaScript, uma das tarefas mais comuns \u00e9 a manipula\u00e7\u00e3o de strings. Seja para limpar espa\u00e7os em branco extras, encontrar a posi\u00e7\u00e3o de um caractere espec\u00edfico ou at\u00e9 mesmo para buscar a \u00faltima ocorr\u00eancia de um padr\u00e3o, existem m\u00e9todos nativos que podem facilitar bastante o trabalho. Neste artigo, vamos explorar tr\u00eas desses m\u00e9todos essenciais: trim(), indexOf() e lastIndexOf(), mostrando como eles podem ser poderosos aliados na manipula\u00e7\u00e3o eficaz de strings em JavaScript. M\u00e9todo trim() O m\u00e9todo trim() \u00e9 utilizado para remover espa\u00e7os em branco extras do in\u00edcio e do final de uma string. Isso \u00e9 especialmente \u00fatil ao lidar com dados de entrada, onde espa\u00e7os indesejados podem ser um problema. Neste exemplo, o m\u00e9todo trim() remove os espa\u00e7os em branco extras do in\u00edcio e do final da string, deixando apenas o conte\u00fado desejado. M\u00e9todo indexOf() O m\u00e9todo indexOf() retorna a posi\u00e7\u00e3o do primeiro caractere de uma determinada substring dentro de uma string. Se a substring n\u00e3o for encontrada, o m\u00e9todo retorna -1. Vamos ver um exemplo de como isso pode ser \u00fatil: Neste exemplo, o m\u00e9todo indexOf() retorna a posi\u00e7\u00e3o onde a palavra &#8220;jornada&#8221; come\u00e7a na string. Se a palavra n\u00e3o fosse encontrada, o m\u00e9todo retornaria -1. Esse m\u00e9todo pode ser trabalhado com vetores para procurar um item especifico dentro de um vtor. M\u00e9todo lastIndexOf() Similar ao m\u00e9todo indexOf(), o lastIndexOf() retorna a posi\u00e7\u00e3o da \u00faltima ocorr\u00eancia de uma substring dentro de uma string. Este m\u00e9todo \u00e9 \u00fatil quando precisamos encontrar a \u00faltima ocorr\u00eancia de um padr\u00e3o. Vejamos um exemplo: Neste caso, o m\u00e9todo lastIndexOf() retorna a posi\u00e7\u00e3o da \u00faltima ocorr\u00eancia da palavra &#8220;jornada&#8221; na string. Conclus\u00e3o Os m\u00e9todos trim(), indexOf() e lastIndexOf() s\u00e3o ferramentas poderosas que simplificam a manipula\u00e7\u00e3o de strings em JavaScript. Ao dominar esses m\u00e9todos, voc\u00ea pode tornar seu c\u00f3digo mais eficiente e leg\u00edvel, lidando com strings de forma mais precisa e eficaz. Experimente esses m\u00e9todos em seus projetos e explore outras funcionalidades que JavaScript oferece para manipula\u00e7\u00e3o de strings. Com pr\u00e1tica e experi\u00eancia, voc\u00ea se tornar\u00e1 um especialista em manipula\u00e7\u00e3o de strings em JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":1009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002"}],"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":6,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002\/revisions"}],"predecessor-version":[{"id":1014,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1002\/revisions\/1014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1009"}],"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}]}}