Artigos JavaScript JavaScript slice(): selecionando elementos de uma string ou array

JavaScript slice()

Nesta documentação de JavaScript veremos como utilizar o método slice(), que permite “fatiar” uma string ou array e recuperar parte dos seus elementos.

Apresentaremos aqui como utilizar o método slice().

JavaScript slice(): Na prática

  // String retornada: "José da Silva Xavier"
  nome = "João José da Silva Xavier";
  nomeResultante = nome.slice(4); 
   
  // String retornada: "José"
  nome = "João José da Silva Xavier";
  selecionados = nome.slice(4, 9); 
   
  // String retornada: "devmedia.com.br"
  email = "exemplo@devmedia.com.br";
  enderecoDominio = email.slice(email.indexOf("@") + 1);
   
  // Array retornado: ["Focus", "Jetta", "Cruze", "Corolla"]
  carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  selecionados = carros.slice(2); 
   
  // Array retornado: ["Focus", "Jetta"]
  carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  selecionados = carros.slice(2, 4); 
   
  // Array retornado: ["Focus", "Jetta"]
  carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  selecionados = carros.slice(-4, -2);

Como funciona o slice()?

O método slice() percorre a string ou o array para selecionar a faixa de valores determinada por parâmetro. Lembre-se que a primeira posição de uma string ou array é a posição de número 0. Considerando o seguinte código:


  var carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  var selecionados = carros.slice(2, 4);

O array atribuído à variável selecionados será: ["Focus", "Jetta"], conforme a Figura 1.

Funcionamento do método slice()
Figura 1. Funcionamento do método slice()

Sintaxe

string.slice(posicaoInicial [, posicaoFinal])

Parâmetros

posicaoInicial é a posição inicial a partir da qual o trecho deve ser selecionado. Pode receber valores negativos. Neste caso a contagem dos caracteres deve começar da direita para a esquerda.

posicaoFinal é a posição final, até onde o trecho da string ou do array deve ser selecionado -1, isto é, posição excludente. Esse parâmetro é opcional. Pode receber valores negativos. Neste caso a contagem dos caracteres deve começar da direita para a esquerda.

Valor de retorno

É retornada a nova string ou o novo array selecionado.

Exemplos de slice()

Exemplo 1

No exemplo a seguir não passamos valor para o segundo parâmetro, que é opcional:


  var nome = "João José da Silva Xavier";
  var selecionados = nome.slice(4);

O valor atribuído a selecionados é: “José da Silva Xavier”. Como não é definida a última posição a ser selecionada, todo o restante da string é retornado.

Run!
Exemplo 2

No exemplo a seguir selecionamos um trecho de uma string:


  var nome = "João José da Silva Xavier";
  var selecionados = nome.slice(4, 9);

O valor atribuído a selecionados é: “José”.

Run!
Exemplo 3

No exemplo a seguir selecionamos um trecho de uma string recebendo um valor negativo:


  var nome = "João José da Silva Xavier";
  var selecionados = nome.slice(-2, 9);

O valor atribuído a selecionados é: “”. Ao começar da posição -2, o método não seguirá até o final da string e depois retomará no início desta até chegar à posição 9.

Run!
Exemplo 4

No exemplo a seguir passamos valores negativos para os dois parâmetros:


  var carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  var selecionados = carros.slice(-4, -2);

O valor atribuído a selecionados é: ["Focus", "Jetta"].

Run!
Exemplo 5

No exemplo a seguir passamos o mesmo valor negativo para os parâmetros:


  var carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  var selecionados = carros.slice(-3, -3);

O valor atribuído a selecionados é: [].

Run!
Exemplo 6

No exemplo a seguir passamos dois valores negativos diferentes para os parâmetros:


  var carros = ["Civic", "Elantra", "Focus", "Jetta", "Cruze", "Corolla"];
  var selecionados = carros.slice(-3, -2);

O valor atribuído a selecionados é: [“Jetta”].

Run!

Compatibilidade entre navegadores

slice() é suportado por todos os browsers apresentados na Tabela 1.

slice() Chrome Firefox IE Edge Safari Opera
Sim Sim Sim Sim Sim Sim

Tabela 1. Compatibilidade do método x browsers.

Métodos semelhantes