JavaScript substring()
Nesta documentação de JavaScript veremos como utilizar o método substring() para extrair uma sequência de caracteres de uma string.
Apresentaremos aqui como utilizar o método substring().
JavaScript substring(): Na prática
// Valor retornado: "Script é na DevMedia!"
stringExemplo = "JavaScript é na DevMedia!";
resultado = stringExemplo.substring(4);
// Valor retornado: "Aprenda a utilizar"
stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
resultado = stringExemplo.substring(13, 31);
// Valor retornado: "subs"
stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
resultado = stringExemplo.substring(4, -5);
// Valor retornado: "subs"
stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
resultado = stringExemplo.substring(4, 0);
// Valor retornado: "Texto em destaque"
htmlExemplo = "<b>Texto em destaque</b>";
resultado = htmlExemplo.substring(3, htmlExemplo.length - 4);
// Valor retornado: "devmedia.com.br"
emailExemplo = "exemplo@devmedia.com.br";
resultado = emailExemplo.substring(emailExemplo.indexOf("@") + 1);
Como funciona o substring()?
O método substring() retorna o trecho de uma string de acordo com os números informados por parâmetro.
Considerando o seguinte código:
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(0, 10);
O valor atribuído à variável resultado será: “JavaScript”, conforme a Figura 1.
Sintaxe
string.substring(posicaoInicial [, posicaoFinal])
Parâmetros
posicaoInicial é um número inteiro que define a posição a partir da qual o texto deve ser selecionado. Se informado um número negativo, passa-se a considerar o valor 0 (primeira posição da string).
posicaoFinal é um número inteiro que define a posição final da substring a ser selecionada. Esse parâmetro é opcional. Se informado um número negativo, passa-se a considerar o valor 0 (primeira posição da string). Se o valor desse parâmetro for menor que o valor do primeiro parâmetro, automaticamente é feita uma troca entre eles.
Caso seja especificado um valor maior que o tamanho da string (string.length), o método assumirá a posição string.length.
Valor de retorno
É retornada a nova string contendo apenas o trecho selecionado.
Exemplos de substring()
Exemplo 1
No exemplo a seguir selecionamos o trecho da string a partir da posição informada por parâmetro.
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(16);
O valor atribuído a resultado é: “DevMedia”. Como a palavra DevMedia está no final da string, não é necessário informar o segundo parâmetro.
Run!Exemplo 2
No exemplo a seguir selecionamos um termo da string que se encontra no meio dela.
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(4, 10);
O valor atribuído a resultado é: “Script”.
Run!Exemplo 3
No exemplo a seguir passamos um valor negativo no segundo parâmetro.
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(10, -3);
O valor atribuído a resultado é: “JavaScript”. O valor negativo é considerado como 0. Sendo 0 menor que 10, ele passa a ser considerado a posição inicial. Esta declaração é semelhante a: stringExemplo.substring(0, 10).
Run!Exemplo 4
No exemplo a seguir passamos valores negativo para os dois parâmetros.
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(-8, 0);
O valor atribuído a resultado é: “”.
Run!Exemplo 5
No exemplo a seguir passamos valores negativo para os dois parâmetros.
var stringExemplo = "JavaScript é na DevMedia";
var resultado = stringExemplo.substring(-9, 24);
O valor atribuído a resultado é: “JavaScript é na DevMedia”.
Run!Exemplo 6
No exemplo a seguir demonstramos como selecionar apenas o texto entre as tags HTML que destacam o texto em negrito. Para isso também utilizamos a propriedade length.
var htmlExemplo = "<b>Texto em destaque</b>";
var resultado = htmlExemplo.substring(3, htmlExemplo.length - 4);
O valor atribuído a resultado é: “Texto em destaque”.
Run!Compatibilidade entre navegadores
substring() é suportado por todos os browsers apresentados na Tabela 1.
substring() | Chrome | Firefox | IE | Edge | Safari | Opera |
---|---|---|---|---|---|---|
Sim | Sim | Sim | Sim | Sim | Sim |
Tabela 1. Compatibilidade do método x browsers.
Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento integral
12x no cartão
De: R$ 69,00
Por: R$ 59,00
Total: R$ 708,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento facilitado
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 64,00 /mês
Tempo mínimo: 12 messes
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.