Strings com JavaScript: o que são e como manipulá-las
Em programação, a todo momento trabalhamos com dados dos mais variados tipos, independentemente da linguagem.
Alguns exemplos são os booleanos (verdadeiro ou falso), números (inteiros, ponto flutuante) e alguns tipos mais complexos, como estruturas e objetos. Um dos tipos mais utilizados em programação são as strings, sequências (ou cadeias) de caracteres que usamos para, entre outras coisas, manipular textos.
No exemplo a seguir, temos uma cadeia de caracteres representada como um array:
const fruta = "banana"
// ["b", "a", "n", "a", "n", "a"]
Imagine que estamos desenvolvendo o código de uma aplicação em JavaScript. A validação dos campos de login e senha foi solicitada e é preciso verificar se o tamanho da senha de cada usuário atende à regra de ter um tamanho mínimo de 8 caracteres e impedir que haja espaços no início ou no fim do login cadastrado.
Desse modo, precisaremos fazer o tratamento de strings.
Como podemos fazer isso? Quais opções o JavaScript pode oferecer para esses casos? No texto a seguir, vamos ver essas possibilidades de trabalhar com strings na linguagem.
O que é uma String?
Por definição, strings são sequências de caracteres alfanuméricos (letras, números e/ou símbolos) amplamente usadas em programação. Em Javascript, uma string sempre estará entre aspas.
const frase = "Mergulhando em tecnologia com Alura";ou
const frase = ‘Mergulhando em tecnologia com Alura’;ou ainda
console.log('Mergulhando em tecnologia com Alura')Espere! Mas eu declaro minhas strings com aspas duplas ou simples?
Podemos colocar nossas strings entre aspas duplas ou simples. Para o JavaScript, não há diferença, já que ele considera as duas formas de declaração válidas. Mas, atenção, essa regra pode não se aplicar a outras linguagens. No Java ou C#, por exemplo, aspas simples são usadas para definir um caractere.
Em alguns momentos, a string poderá ser um texto que contém aspas. Nesses casos, é preciso combinar a utilização das aspas simples com aspas duplas e vice-versa, porque um texto como: “Ela disse: “Adeus””, não funciona corretamente.
Vamos ao exemplo:
console.log('Ela disse: “Adeus!”')ou
console.log(“Ela disse: 'Adeus!' ”)É importante ressaltar que, depois que a sequência de caracteres for definida, a string é imutável, ou seja, não poderá ter seu valor alterado. Então, como manipular a string?
Sempre que manipulamos uma string, é criada uma nova instância dela por baixo dos panos, o que significa que será gerado um novo espaço na memória com uma cópia do valor da string. Por isso, temos que utilizar uma variável para armazená-la.
Objeto String
A linguagem JavaScript traz ainda como recurso um objeto global String que nos permite criar ou converter um tipo em uma string, veja o exemplo abaixo:
const numero = 256
const convertidoEmString = new String(numero)A saída após exibirmos a variável convertidoEmString usando o método console.log() é [String: '256']. Na construção do objeto usando new String(parâmetro), o parâmetro pode ser qualquer elemento do nosso código que queiramos transformar em string.
Também é possível converter outros tipos primitivos (por exemplo, números e booleanos) em strings com o método toString():
const num = 500
console.log(num.toString()) //'500'
Usando Strings
É possível interpolar, concatenar, checar posições de caracteres ou ainda substituir partes de strings. Vamos ver algumas dessas utilizações com o JavaScript?
Concatenando strings
Quando falamos em concatenar strings, quer dizer que vamos juntar duas ou mais strings e formar uma nova. Observe o exemplo abaixo:
let nome = "André"
let sobreNome ="Silva"
let nomeCompleto = "Meu nome completo é : " + nome + sobreNomePara concatenar as strings nome e sobreNome com a string de texto que é o valor de nomeCompleto, usamos o operador de adição (+). Podemos usar também +=, como no exemplo abaixo:
let nome = "André"
let saudacoes = "Seja bem-vindo "
saudacoes += nomeDessa forma, temos a saída Seja bem-vindo André
Interpolando strings (template strings)
A interpolação de strings é um recurso bem interessante, presente em diversas linguagens. No JavaScript, é uma alternativa mais prática para manipular string sem a necessidade de fazer concatenação, porque para textos maiores, concatenar pode ser um pouco trabalhoso.
Usando as chamadas template strings ou templates literais, a pessoa desenvolvedora consegue ter uma flexibilidade maior no trabalho com strings, além de facilitar a escrita e leitura do código.
Retomando o exemplo da mensagem de boas vindas, veja abaixo a utilização de template strings:
let nome = "André"
let saudacoes =`Seja bem-vindo ${nome}`
Veja como exemplo o poema “E agora, José?” de Carlos Drummond de Andrade:
let nome = "André"
let poema = `
E agora, ${nome}?
A festa acabou,
a luz apagou,
o povo sumiu,
a noite esfriou,
e agora, ${nome}?
e agora, você?
você que é sem nome,
que zomba dos outros,
você que faz versos,
que ama, protesta?
e agora, ${nome}?
`Observe que, para a utilização da template string, ela deve estar entre acentos graves (`) e, para fazer a interpolação, o valor ou variável deve estar dentro da estrutura${valor}. Vale ressaltar que usando *template strings* temos a opção de utilizar a quebra de linha normalmente, sem caracteres de escape para isso, como\n`.
Métodos para strings
Antes de começarmos, é importante ressaltar que o JavaScript diferencia strings como tipos primitivos (com aspas duplas ou simples) de objetos Strings (quando usamos a palavra reservada new). Mas, por baixo dos panos toda string, mesmo as que criamos com a chamada “forma literal”, por exemplo const texto = “Alura”, acaba convertida para um objeto do tipo String. Por isso, temos acesso a uma série de métodos e propriedades deste objeto.
Agora que entendemos isso, vamos ver algumas propriedades e métodos úteis e bem práticos para trabalhar com strings em nossas aplicações.
.length
A propriedade length serve para nos informar o tamanho de uma string. E por que isso é útil?
Caso sua aplicação tenha como uma das regras para criação de senhas (que em geral são alfanuméricas) o tamanho de 8 caracteres, usar length será uma boa opção, pois ajudará a contar a quantidade de caracteres da string.
Para testar a propriedade length, vamos usar a string alura, que retornará o tamanho 5.
const palavra="alura";
console.log(palavra.length) //5
Veja que length é exatamente a mesma propriedade que acessamos quando queremos descobrir o comprimento (ou seja, a quantidade de elementos) em um array.
charAt()
Com o método charAt() conseguimos acessar um caractere de uma string. Lembre-se que, por baixo dos panos, strings são arrays de caracteres, e em cada posição temos o caractere que compõe a string.
Veja o exemplo abaixo:
console.log("alura".charAt(3)) //rApós a execução do método charAt(), ela retornará o caractere r, que é o valor que consta na posição 3 da string - lembrando que arrays em JavaScript começam na posição 0 (zero).
Outra alternativa será usar a notação de colchetes para encontrar um caractere da string, da seguinte forma:
const palavra="Alura"
console.log(palavra[0]) //ASerá exibido o caractere A, ou seja, o que está na primeira posição da string. O resultado da execução do charAt() é uma string.
Mas e se quisermos saber qual a posição de um caractere dentro da string?
indexOf()
Respondendo a pergunta anterior, existe a função indexOf(), que retorna a posição de um caractere dentro da string.
Por exemplo:
const palavra="Alura"
console.log(palavra.indexOf("a")) //4O resultado é a posição 4. Porém, na utilização do indexOf(), fique atento caso o caractere que se busca na string seja encontrado em mais de uma posição, pois será retornada somente a primeira ocorrência. veja o código abaixo:
const palavra="Divertidamente"
console.log(palavra.indexOf("e")) //3O resultado da execução do indexOf() é um valor numérico.
toUpperCase() e toLowerCase()
São duas funções bastante utilizadas quando estamos trabalhando com string e precisamos deixar o texto todo em letras minúsculas (lower case) ou todo em maiúsculas (upper case). Vamos ver o código abaixo:
const palavra="alura";
console.log(palavra.toUpperCase()) //ALURA
console.log(palavra.toLowerCase()) //alura
Após a execução do código, o console irá exibir ALURA e alura respectivamente. O resultado da execução dos métodos toUpperCase() e toLowerCase() é uma nova string .
substr()
Outra função muito interessante é a substr() (substring), que permite que façamos a extração de parte de uma string, conforme o código abaixo:
let frase= "Mergulhando em tecnologia."
console.log(frase.substr(0,11)) // MergulhandoA função recebe como parâmetro o início e o fim da nova string a ser retirada da string principal. Na execução do código acima, temos como resultado a palavra Mergulhando. Bem útil, né?
O resultado da execução do métodosubstr() é uma nova string .
slice()
Podemos utilizar também o método slice(), que usamos com arrays. Ele é similar ao substring() e retornará parte de uma string, desde que passemos nos parâmetros o índice de início e de fim. Veja abaixo:
let frase= "Mergulhando em tecnologia."
console.log(frase.slice(0,11)) // MergulhandoO resultado da execução do método slice() é uma nova string .
replace()
Com a função replace() temos a possibilidade de substituir parte de uma string por outra. Essa função recebe como parâmetros duas informações: a string que você quer substituir e a string que será colocada no lugar. Olhe o exemplo abaixo, em que precisamos substituir a string nomeusuario no texto padrão de comunicacao.
let nome = "André";
let comunicacao = " Olá, sr. nomeusurario, informamos que a partir da presente data o senhor tem 50% de desconto em nossa loja.";
console.log(comunicacao.replace("nomeusurario",nome));
Na execução deste exemplo, a string nomeusuario será substituída pelo conteúdo da variável nome. Como resultado da execução do método replace() teremos uma nova string.
concat()
O método concat() é uma opção para concatenar strings sem a utilização do operador de adição (+). Ele concatena duas strings, adicionando a nova string ao fim da anterior.
Observe uma utilização do concat():
let novaString = "Programe nas principais linguagens e plataformas. Explore linguagens como ";
console.log(novaString.concat("JavaScript,").concat(" Python,").concat(" e C#."))
O resultado obtido será: Programe nas principais linguagens e plataformas. Explore linguagens como [JavaScript](https://www.alura.com.br/artigos/javascript), [Python](https://www.alura.com.br/artigos/python), e C#.
Para a execução do método replace() teremos como resultado uma nova string.
split()
O método split() é bem interessante, pois com ele conseguimos quebrar uma string com base em caracteres separadores que vamos informar para o método como parâmetro.
Vamos ver um exemplo:
let linguagens = "JavaScript;Java;C#;PHP;Python;Go;Vb;SQL;C;C++";
let arrayLinguagens = linguagens.split(";");
console.log(arrayLinguagens)Quando trabalhamos com o split(), devemos nos atentar, pois a execução gerará como resultado um array de strings com os elementos que foram separados com base no separador desejado. Portanto a execução do código resulta em um array como mostrado a seguir:
[ 'JavaScript',
'Java',
'C#',
'PHP',
'Python',
'Go',
'Vb',
'SQL',
'C',
'C++' ]
Lembre-se que o resultado da execução do método split() é um array de strings.
trim()
O trim() remove os espaços em branco no início ou fim de uma string. Se em alguma situação precisarmos fazer uma verificação de que o usuário não digitou o login com espaços, faremos;
let login = " [email protected] ";
let loginSemEspaco = login.trim();
console.log(loginSemEspaco); //[email protected]A variável loginSemEspaco conterá uma nova string, sem os espaços em branco no início ou fim que podem ter sido digitados. Então, quando executado o método trim(), o resultado é uma nova string.
No JavaScript ainda temos algumas variações desta função como: trimEnd(),trimStart(),trimLeft() e trimRight(), teste também estas variantes e veja o resultado obtido, ok?
Conclusão
Neste artigo, vimos o que são strings e como podemos manipulá-las usando métodos do Javascript.
Lembre-se que trabalhar com texto é uma atividade que todas as pessoas que desenvolvem farão em seus códigos em algum momento. Por isso é tão importante conhecer as strings e suas particularidades. E aí, curtiu? Vamos programar!
Para saber mais sobre manipulação de strings, veja: