JavaScript: String

Processar textos � uma necessidade comum na programa��o. A linguagem JavaScript permite realizar essa tarefa dispondo para o programador o objeto String.

Guia do artigo:

• Sintaxe
• Na pr�tica
• charCodeAt()
• concat()
• includes()
• endsWith()
• indexOf()
• lastIndexOf()
• slice()
• split()
• startWith()
• substring()
• toLowerCase()
• toUpperCase()

Mesmo quando um texto n�o � atribu�do a uma vari�vel, usando a forma literal de escrita, a partir dele podemos acessar os m�todos do objeto String, como vemos abaixo.

var posicaoTraco = '98453-5647'.indexOf('-')

console.log(posicaoTraco) // 5

Isso � poss�vel porque toda sequ�ncia de caracteres em JavaScript ser� automaticamente convertida para um objeto do tipo String. Assim, � fundamental o conhecimento dos m�todos desse objeto para o programador que deseja programar de forma eficiente em JavaScript.

Ainda por esse comportamento padr�o da linguagem, podemos criar strings em JavaScript de diferentes maneiras. Na forma literal fazemos da seguinte forma:

'Texto entre aspas simples'

"Texto entre aspas duplas"

� tamb�m poss�vel utilizar o objeto String para obtermos strings em JavaScript assim:

const texto = String('Texto entre aspas simples')

Sintaxe

String([ 'Texto' | "Texto" ])

• Texto - Qualquer valor que desejamos converter em um string.

No JavaScript n�o h� diferen�a entre uma string criado com aspas simples ou duplas.

Na pr�tica

Exemplo 1

Para escrevermos certos caracteres em string precisamos utilizar uma sintaxe especial chamada nota��o com barra invertida ou escape notation. Abaixo utilizamos \n para quebrar um texto em duas linhas.

"Erro na valida��o do cadastro.\nO campo nome � de preenchimento obrigat�rio"

A seguinte tabela nos demonstra quais caracteres podem ser obtidos dessa forma:

Exemplo 2

Podemos saber qual caractere ocupa uma certa posi��o em uma string usando uma sintaxe parecida com a de acesso aos itens de um array. Neste caso a posi��o individual de cada caractere na string corresponde a um �ndice num�rico.

const telefone = '98764-7645'

if(telefone[0] === '9') [curly_open]
    // Prossegue com alguma l�gica
[curly_close]

Uma outra forma de escrevermos esse trecho de c�digo � utilizando o m�todo charAt(), que de forma semelhante a nota��o com colchetes recebe por par�metro a posi��o do caractere na string cujo valor desejamos acessar.

const telefone = '98764-7645'

if(telefone.charAt(0) === '9') [curly_open]
    // Prossegue com alguma l�gica
[curly_close]

Ambos os c�digos s�o equivalentes, realizando a mesma a��o.

Exemplo 3

Saber o comprimente de um texto permite aplicar a ele certas valida��es, principalmente quando desejamos salv�-lo em bancos de dados ou exibi-lo em locais com certas restri��es de espa�o. Para isso podemos usar a propriedade length do objeto String, que reflete o comprimento da string.

Considere que desejamos limitar o n�mero de caracteres que podem ser inseridos em um campo de formul�rio, implementando assim uma valida��o personalizada. Podemos implementar esse comportamento verificando se o comprimento do texto presente neste campo � maior que o esperado a cada novo caractere que � inserido.

const elemento = document.getElementById('nome')

elemento.addEventListener("keydown", function(e)[curly_open]
    if(this.value.length >= 2) [curly_open]
        e.preventDefault()

        return false;
    [curly_close]
[curly_close])

Note que na Linha 5 usamos o m�todo preventDefault() do evento Keydown para impedir o comportamento padr�o de inserir o caractere digitado no campo do formul�rio.

Exemplo 4

O m�todo includes() retorna true ou false como resultado para a busca por uma substring em uma string. No c�digo a seguir usamos esse m�todo para verificar se um cep cont�m os caracteres espa�o ou tra�o.

const cep = '9877-065'

if(cep.includes(' ') || cep.includes('-'))[curly_open]
    // Prossegue com alguma l�gica de valida��o
[curly_close]

Perceba que se a string contiver espa�os em seu in�cio ou fim ainda assim o bloco if ser� executado, o que pode n�o ser ideal em alguns casos. � comum em aplica��es web que textos sejam enviados de formul�rios dessa maneira. Para remover espa�os do in�cio ou fim de uma string podemos usar o m�todo trim().

const cep = '  9877-065 '.trim() // retorna '9877-065'

Caso queiramos remover os caracteres indesejados da string podemos usar o m�todo replace() para isso.

const cep = '9877-065'.replace('-', '').replace(' ', '')

Exemplo 5

Express�es regulares s�o �teis em muitos cen�rios no processamento de strings. O m�todo match() do objeto String nos permite testar se um texto corresponde a um certo padr�o, estabelecido por uma express�o regular, retornando null em caso de falha ou um array contendo os trechos do texto que passaram na verifica��o.

O c�digo abaixo extrai a URL de um link utilizando o m�todo match() para isso.

const link = '<a href="https://devmedia.com.br/guias/javascript">Confira o Guia JavaScript</a>'

console.log(link.match(/\s*(['"])(https?:\/\/.+?)\1/ig)) 
// [ '"https://devmedia.com.br/guias/javascript"' ]

Ao final da express�o regular notamos os caracteres i e g, que em JavaScript tem o seguinte significado:

• i - ignore case, n�o leva em considera��o se as letras s�o mai�sculas ou min�sculas
• g - global, aplica o padr�o realizando a busca por todo o texto

Outros m�todos

charCodeAt()

Retorna o caractere no �ndice especificado.

concat()

Une o texto de duas strings retornando uma nova.

includes()

Determina onde uma string pode ser encontrada em uma outra.

endsWith()

Determina se uma string � encerrada com os caracteres de uma outra string.

indexOf()

Retorna o �ndice da primeira ocorr�ncia para o valor especificado ou -1 se n�o foi encontrada.

lastIndexOf()

Retorna o �ndice da �ltima ocorr�ncia para o valor especificado ou -1 se n�o foi encontrada.

slice()

Extrai uma parte de uma string e retorna uma nova.

split()

Desmembra uma string em substrings e retorna esses valores em um array.

startWith()

Determina se uma string inicia com os caracteres de uma outra string.

substring()

Recebe dois �ndices e retorna os caracteres entre eles.

toLowerCase()

Converte os caracteres da string em min�sculas.

toUpperCase()

Converte os caracteres da string em mai�sculas.

Compatibilidade

Nota: O Opera utiliza atualmente grande parte do c�digo do Chrome como base para o seu pr�prio desenvolvimento e por isso ele n�o � mencionado nesta listagem.

Confira tamb�m

A evolu��o do JavaScript

V�deo

Apresentando o Node.js

V�deo

Introdu��o ao JavaScript

Curso