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.
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.
