O que é um Substring?

Uma substring é um subconjunto de outra string:

"I am learning JavaScript and it is cool!"  -->  Original String"I am learning JavaScript"  -->  Substring"JavaScript is cool!"  -->  Another Substring

Como no exemplo acima, em alguns casos, precisamos obter uma ou mais substrings de uma frase ou parágrafo completo. Agora vamos ver como fazer isso no JavaScript de três maneiras diferentes.

1. O método substring ()

Vamos começar com o método substring (). Esse método basicamente obtém uma parte da string original e a retorna como uma nova string. O método de substring espera dois parâmetros como:

string.substring(startIndex, endIndex);

  • startIndex: representa o ponto inicial da substring
  • endIndex: representa o ponto final da substring (opcional)

Vamos ver o uso em um exemplo. Suponha que tenhamos a sequência de exemplo abaixo:

const myString = "I am learning JavaScript and it is cool!";

Agora, se definirmos o startIndex como 0 e o endIndex como 10, obteremos os 10 primeiros caracteres da string original:

Ekran Resmi 2020 03 21 19.17.10
O índice do primeiro caractere é sempre 0

No entanto, se definirmos apenas um índice inicial e nenhum índice final para este exemplo:

Ekran Resmi 2020 03 21 19.16.46

Em seguida, obtemos uma substring começando do sexto caractere até o final da string original.

Alguns pontos adicionais:

  • Se startIndex = endIndex, o método substring retornará uma sequência vazia
  • Se startIndex e endIndex forem maiores que o comprimento da string, ele retornará uma string vazia
  • Se startIndex> endIndex, o método substring trocará os argumentos e retornará uma substring, assumindo como endIndex> startIndex

2. O método slice ()

O método slice () é semelhante ao método substring () e também retorna uma substring da string original. O método de fatia também espera os mesmos dois parâmetros que:

string.slice(startIndex, endIndex);

  • startIndex: representa o ponto inicial da substring
  • endIndex: representa o ponto final da substring (opcional)

Os pontos comuns dos métodos substring () e slice ():

  • Se não definirmos um índice final, obteremos uma substring a partir do número de índice fornecido até o final da string original:

Ekran Resmi 2020 03 22 01.03.15

  • Se definirmos o startIndex e o endIndex, obteremos os caracteres entre os números de índice fornecidos da string original:

Ekran Resmi 2020 03 22 01.03.43

  • Se startIndex e endIndex forem maiores que o comprimento da string, ele retornará uma string vazia

Diferenças do método slice ():

  • Se startIndex> endIndex, o método slice () retornará uma sequência vazia
  • Se startIndex for um número negativo, o primeiro caractere começará no final da string (reverso):

Ekran Resmi 2020 03 22 15.54.09

Nota: Também podemos usar o método slice () para matrizes JavaScript. Você pode encontrar aqui meu outro artigo sobre o método de fatia para ver o uso de matrizes.

3. O método substr ()

De acordo com os documentos Mozilla, o método substr () é considerado uma função herdada e o uso deve ser evitado. Mas em breve vou explicar o que ele faz, porque você pode vê-lo em projetos mais antigos.

O método substr () também retorna uma substring da string original e espera dois parâmetros como:

string.substring(startIndex, length);

  • startIndex: representa o ponto inicial da substring
  • comprimento: número de caracteres a serem incluídos (opcional)

Como você pode ver a diferença, o método substr () espera o segundo parâmetro como um comprimento em vez de um endIndex:

Ekran Resmi 2020 03 22 00.40.29 2

Neste exemplo, ele basicamente conta 5 caracteres começando com o startIndex fornecido e os retorna como uma substring.

No entanto, se não definirmos o segundo parâmetro, ele retornará até o final da string original: (como os dois métodos anteriores)

Ekran Resmi 2020 03 22 00.40.23

Nota: Todos os três métodos retornam a substring como uma nova string e não alteram a string original.

Embrulhar

Portanto, esses são os três métodos diferentes para obter uma substring em JavaScript. Existem muitos outros métodos internos no JS que realmente nos ajudam bastante ao lidar com várias coisas na programação. Se você acha esta publicação útil, compartilhe-a nas mídias sociais.

Se você quiser saber mais sobre Desenvolvimento Web, visite nosso Site do blog e Canal do Youtube.

Obrigado pela leitura!