18

Quero saber a diferença entre

alert("abc".substr(0,2));

e

alert("abc".substring(0,2));

Ambos parecem produzir “ab”.

1

6 Respostas 6

21

substr() você vai da posição inicial indicada pelo primeiro argumento até a a quantidade de caracteres indicada pelo segundo argumento, ou seja o segundo argumento é um length da porção que deseja pegar.

substring() você vai da posição inicial indicada pelo primeiro argumento até a posição final final indicada pelo segundo argumento, portanto determina o trecho que deve pegar, ou seja ele funciona como um index.

Deve usar cada um com a informação mais apropriada que você tem no momento, ou a quantidade de caracteres que sabe que precisa ou o início e fim da parte do texto que precisa.

Com números mostrando as posições fica mais fácil visualizar:

console.log("012345".substr(1, 3));
console.log("012345".substring(1, 3));

Note que o primeiro exemplo pegou 3 caracteres a partir do segundo caractere, e outro exemplo pego do mesmo lugar e parou no terceiro caractere, por isso só mostrou 2 deles. Há casos que pode dar mesmo resultado:

console.log("012345".substr(0, 3));
console.log("012345".substring(0, 3));

Coloquei no GitHub para referência futura.

1
  • @MáttheusSpoo Obrigado por avisar. Eu já fiz a troca.
    – Isac
    Commented 31/10/2018 às 23:18
10

A diferença é que o substr trabalha com quantidades de caracteres (especificada ou não no segundo parâmetro) a partir de uma posição index (índice) da string (especificada no primeiro parâmetro), enquanto que substring trabalha exclusivamente com índices no primeiro e segundo parâmetros.

Por exemplo:

var string = "abc";

string.substr(0,2) // retorna "ab": caractere no índice 0 + 1 caractere
                   // (totalizando 2 caracteres)

string.substring(0,2) // retorna "ab": índice 0 até a posição 2 ("c"),
                      // mas a posição especificada no segundo parâmetro não
                      // é incluída no retorno, retornando apenas "ab"

Resumindo:

O substr retorna a quantidade de caracteres informada no segundo parâmetro à partir da posição informada no primeiro (se o segundo parâmetro for omitido, irá retornar até o fim da string).

O substring irá retornar à partir da posição informada no primeiro parâmetro até a posição informada no segundo, porém, o caractere da posição no segundo parâmetro não é incluído (ou seja, vai até o caractere anterior). Assim como no substr, se for omitido o segundo parâmetro, irá retornar todos os caracteres da posição inicial informada até o fim da string.

Veja no exemplo abaixo com substring(1,3):

var string = "abcdef";
console.log(string.substring(1,3)); // retorna "bc"

Retorna da posição 1 (índice 1) até a posição 3 (letra "d"), porém a letra "d" não é incluída no retorno.

Já com substr irá retornar "bcd", ou seja, 3 caracteres à partir do índice 1 (posição 1 + 2 caracteres adiante):

var string = "abcdef";
console.log(string.substr(1,3)); // retorna "bcd"

Aí você pode perguntar: Qual devo usar?

Depende do que você quer retornar. Se quiser retornar um número X de caracteres à partir de uma posição, usaria substr, mas caso queira retornar caracteres à partir de uma posição até uma posição antes de uma ocorrência, deve usar substring:

var string = "abcdef";
console.log(string.substring(0, string.indexOf("d"))); // retorna "abc"

Docs:

7

Como você decidiu por alguma razão copiar a pergunta do SOen, vou te dar a mesma resposta que está no post.

A diferença está no segundo argumento. O segundo argumento substring é o index onde irá parar (não incluído), mas o segundo arugmento de substr é o tamanho máximo que a função irá retornar.

Links?

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substr

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substring

(traduzido de: https://stackoverflow.com/questions/3745515/what-is-the-difference-between-substr-and-substring)

5

Só mais um exemplo para deixar registrado aqui no site:

let texto = 'Testando JAVASCRIPT';
let texSu = texto.substring(9,19);  // pega a string a partir do 9º caractere até o 18º caractere mais um
let texSs = texto.substr(9,10);  // pega a string a partir do 9º caractere mais 10 caracteres

console.log(texto.length);
console.log(texSu);
console.log(texSs);

4

O segundo parâmetro de substring() é para encerrar a string e não incluir no caso o caracter da posição especificada.

O segundo parâmetro de substr() especifica o tamanho máximo a ser retornado.

1

Além de tudo que já foi citado nas outras respostas, há mais algumas diferenças que valem ser citadas.


Valores negativos

substr aceita um número negativo no primeiro parâmetro. Neste caso, ele começa a contar a partir do final da string (por exemplo, -1 começa a contar do último caractere, -2 começa do penúltimo, etc). Ex:

const s = 'abcdefghij';

// começa da posição 3, pega 2 caracteres
console.log(s.substr(3, 2)); // de

// começa da posição -3 (o antepenúltimo caractere), pega 2 caracteres
console.log(s.substr(-3, 2)); // hi

Agora se o segundo parâmetro for negativo, ele é tratado como se fosse zero, e o retorno é uma string vazia.


substring não possui este comportamento, e qualquer valor negativo é tratado como se fosse zero:

const s = 'abcdefghij';

// -5 é "trocado" por zero
console.log(s.substring(-5, 3)); // abc

// portanto é o mesmo que:
console.log(s.substring(0, 3));  // abc

Além disso, se você "sem querer" trocar os índices inicial e final, substring "corrige" isso trocando-os:

const s = 'abcdefghij';

// ops, índice inicial é maior que o final
// mas funciona, porque substring "troca" os índices automaticamente
console.log(s.substring(5, 2)); // cde

// portanto é o mesmo que:
console.log(s.substring(2, 5)); // cde

Obviamente que esta troca não é possível com substr, já que o segundo parâmetro não é um índice, e sim a quantidade de caracteres.


substr deprecated

Segundo a MDN, o uso de substr é desencorajado:

substr() is considered a legacy feature in ECMAScript and could be removed from future versions, so it is best to avoid using it if possible.

E a própria documentação de substr diz: "Deprecated. Not for use in new websites".

aqui é dito que substr na verdade nunca foi oficialmente parte da versão padronizada da linguagem. Tanto que na especificação do ECMAScript, substr não aparece na lista de métodos de String.prototype. Na verdade substr é listado na seção Additional ECMAScript Features for Web Browsers (mais especificamente em Additional Properties of the String.prototype Object), que diz o seguinte:

This annex describes various legacy features and other characteristics of web browser ECMAScript hosts. All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. However, the usage of these features by large numbers of existing web pages means that web browsers must continue to support them. The specifications in this annex define the requirements for interoperable implementations of these legacy features.

These features are not considered part of the core ECMAScript language. Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. ECMAScript implementations are discouraged from implementing these features unless the implementation is part of a web browser or is required to run the same legacy ECMAScript code that web browsers encounter.

De qualquer forma, como dito no link já citado: "De forma pragmática, eu ficaria surpreso se encontrasse uma engine mainstream que não suporte substr. Mas não seria surpresa se alguma engine voltada a ambientes mais restritos/embarcados não tivesse tal suporte".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .