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.

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
slice()	Sim	Sim	Sim	Sim	Sim	Sim

Tabela 1. Compatibilidade do m�todo x browsers.

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

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.