A diferença entre as funções substr e substring do Javascript

Para selecionarmos parte de uma string, temos a disposição dois métodos: substr e substring. Ambos fazem a “mesma coisa”, mas há uma diferença sutil entre eles importante de ser observada.

Ambos os métodos possuem dois parâmetros, sendo o segundo deles opcional e através do qual se encontra a diferença entre eles. Observe a sintaxe:



1. substr:

substr(índice_inicial,índice_final)


2. substring:

substring(índice_inicial,índice_final)


Agora observe estes exemplos de usos:

1. Primeiro exemplo:

var string = "0123456789";


2. Segundo exemplo:

alert(’substr(0): ‘ + string.substr(3)); // Teremos 3456789


3. Terceiro exemplo:

alert(’substring(0): ‘ + string.substring(3)); // Teremos 3456789


4. Quarto exemplo:

alert(’substr(3,6): ‘ + string.substr(3,6)); // Teremos 345678


5. Quinto exemplo:

alert(’substring(3,6): ‘ + string.substring(3,6)); // Teremos 345


O segundo parâmetro do método substr indica a quantidade de caracteres a serem exibidos. Ou seja, substr(3,6) exibirá uma string com seis caracteres, iniciando-a a partir do quarto caractere e finalizando-a com seis caracteres no total.

Já o segundo parâmetro do método substring indica até qual caractere na string que exibiremos. Isto é, substring(3,6) exibirá uma string com três caracteres, uma vez que ela será iniciada no quarto caractere e finalizado antes do sexto.

Para resumir, seria algo assim o segundo parâmetro dos referidos métodos:

1. substr:

substr(índice_inicial,tamanho_string)


2. substring:

substring(índice_inicial,pare_antes_do_caractere)


É importante conhecermos essas diferenças e evitarmos dor de cabeça durante o desenvolvimento ou compreensão de algum script.