javascript substring

O que é e como usar Substring Javascript

Introdução

O substring é um método utilizado para retornar parte de uma string. Pode retornar entre os índices inicial e final, ou de um índice até o final da string.

Seu uso pode ser necessário quando precisa realizar a extração de dados dentro de uma string, analisar dados, ou até fazer um parseamento.

Como exemplo de parseamento, pense em um texto que tem escrito “Olá #nome_do_cliente”, é possível utilizar o substring para trocar o #nome_do_cliente pelo nome real do cliente, caso você tenha obtido esse nome de alguma forma.

Sintaxe

A função aceita dois parâmetros sendo que um deles é opcional.

  • IndexStart: é um número inteiro, que será a posição na qual a string começará a ser cortada.
  • IndexEnd (opcional): é um número inteiro que será a posição na qual finalizará a extração da string. Caso esse valor não seja passado, será extraído da posição IndexStart até o fim da string.

A string é um array de caracteres, onde cada caractere corresponde a uma posição iniciado em 0, por isso o substring consegue percorrer essa string e realizar a extração na posição correta.

Exemplo de extração:

let mensagem = "Eu trabalho com Javascript";
let palavra = mensagem.substring(16);
console.log(palavra);
//irá aparecer no console a palavra Javascript

No caso acima, a palavra Javascript começa na posição 0, e como não foi passado o segundo parâmetro, irá pegar todas as palavras até o fim da string, como esta é a última, retorna o resultado de Javascript.

Caso a palavra Javascript não fosse a última e quisesse obter somente ela, deveria fazer:

let mensagem = "Eu trabalho com Javascript, VueJS e PHP";
let palavra = mensagem.substring(16, 26);
console.log(palavra);
//irá aparecer no console a palavra Javascript

Dessa forma, a palavra Javascript continuará sendo retornada, pois o segundo parâmetro indica que a extração deve finalizar na posição 26 da string, que no caso é a última letra da palavra Javascript.

Caso quisesse obter também a palavra VueJS junto com Javascript, precisaria mudar o parâmetro IndexEnd, deixando assim:

let mensagem = "Eu trabalho com Javascript, VueJS e PHP";
let palavra = mensagem.substring(16, 33);
console.log(palavra);
//irá aparecer no console as palavras Javascript, VueJS

Diferença entre Substring e Substr

O Substr também é uma função para extrair dados de uma string, porém tem uma grande diferença entre os dois.

No substring, é passado a posição inicial e final no qual se deseja extrair.

No substr, é passado a posição inicial, e quantos caracteres após o inicial será retirado da string, ou seja, seguindo o exemplo anterior, para retirar somente a palavra Javascript, seria necessário implementar dessa maneira:

let mensagem = "Eu trabalho com Javascript, VueJS e PHP";
let palavra = mensagem.substr(16, 10);
console.log(palavra);
//irá aparecer no console a palavra Javascript

Diferença entre Substring e Slice

O slice também é para obter uma parte da string, porém há uma diferença entre eles.

O slice, também aceita dois parâmetros, porém se o segundo parâmetro, que é o IndexEnd, for passado um número menor que o IndexStart, irá retornar uma string vazia.

Já no substring, caso seja passado no IndexEnd, um valor menor que o IndexStart, ele irá fazer a troca entre os dois, como se o IndexEnd fosse o início e o IndexStart fosse o fim, e também retornaria a string.

Exemplo prático

Para o exemplo prático, uma forma bem interessante de usar a substring, seria para obter em um texto, uma mensagem específica, no caso se um determinado pedido foi feito com sucesso ou erro.

No caso, será utilizado um identificador para saber onde deve ser iniciado a extração. O identificador utilizado será hashtag (#).

O valor após a hashtag, poderia ser um valor dinâmico, vindo de um banco de dados ou uma API de terceiro, no caso vou deixar fixo somente para exemplificar.

Código do exemplo:

let mensagem = "pedido realizado com #sucesso";
let indiceInicial = mensagem.indexOf("#"); //retorna 22
let mensagemFinal = mensagem.substring(indiceInicial);
console.log(mensagemFinal);
//será mostrado "sucesso"

Neste caso, combinei a função substring com o IndexOf, que basicamente retorna o índice quando ele encontra um texto na string.

Normalmente no dia a dia, o substring não é utilizado sozinho, pois ele retorna um valor dentro de uma string, mas é comum precisar pesquisar onde está essa posição, ou se a palavra existe para ser retornado, por isso as vezes é combinado com alguma outra função do Javascript

Vídeo completo

Caso queira, gravei um vídeo completo sobre o assunto:

Conclusão

O substring do Javascript é uma importante função para a manipulação de string, pode ser utilizado com outras funções e isso faz com que facilite o desenvolvimento de lógicas complexas para se trabalhar com strings. Até o próximo post 🙂

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/substring

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/substr

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/slice

Este conteúdo te ajudou de alguma forma?