Introdução
Uma string é uma sequência de um ou mais caracteres que podem consistir em letras, números ou símbolos. Cada caractere em uma string do JavaScript pode ser acessado por um número de índice, e todas as strings possuem métodos e propriedades disponíveis a elas.
Neste tutorial, vamos aprender a diferença entre primitivos de string e o objeto String
, como as strings são indexadas, como acessar caracteres em uma string, além de propriedades e métodos comuns usados em strings.
Primitivos de string e objetos string
Primeiramente, vamos definir os dois tipos de strings. O JavaScript trata de forma diferente um primitivo de string, que é um tipo de dados imutável, e o objeto String
.
Para testar a diferença entre os dois, vamos inicializar um primitivo de string e um objeto string.
// Initializing a new string primitive
const stringPrimitive = "A new string.";
// Initializing a new String object
const stringObject = new String("A new string.");
Podemos usar o operador typeof
para determinar o tipo de um valor. No primeiro exemplo, simplesmente atribuimos uma string a uma variável.
typeof stringPrimitive;
Output
string
No segundo exemplo, usamos o new String()
para criar um objeto string e atribui-lo a uma variável.
typeof stringObject;
Output
object
Na maioria das vezes, você estará criando primitivos de string. O JavaScript é capaz de acessar e usar as propriedades e métodos integrados do wrapper de objeto String
, sem de fato alterar o primitivo de string que você criou em um objeto.
Embora esse conceito seja um pouco desafiador no começo, a diferença entre o primitivo e o objeto deve ser clara. Essencialmente, há métodos e propriedades disponíveis para todas as strings, e em segundo plano o JavaScript fará uma conversão para objeto e de volta para primitivo sempre que um método ou propriedade for chamado.
Como as strings são indexadas
Cada um dos caracteres em uma string corresponde a um número de índice, começando com 0
.
Para demonstrar, vamos criar uma string com o valor How are you?
.
H | o | w | A | r | E | y | o | u | ? | ||
---|---|---|---|---|---|---|---|---|---|---|---|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
O primeiro caracter na string é H
, que corresponde ao índice 0
. O último caractere é ?
, que corresponde a 11
. Os caracteres de espaço em branco também possuem um índice, em 3
e 7
.
A capacidade de acessar todos os caracteres em uma string nos oferece várias maneiras de trabalhar com strings e manipula-las.
Acessando caracteres
Vamos demonstrar como acessar caracteres e índices com a string How are you?
.
"How are you?";
Ao usar a notação de colchetes, podemos acessar qualquer caractere na string.
"How are you?"[5];
Output
r
Também podemos usar o método charAt()
para retornar o caractere usando o número de índice como um parâmetro.
"How are you?".charAt(5);
Output
r
De maneira alternativa, podemos usar o indexOf()
para retornar o número de índice da primeira aparição de um caractere.
"How are you?".indexOf("o");
Output
1
Embora “o” apareça duas vezes na string How are you?
, o indexOf()
mostrará a primeira aparição.
lastIndexOf()
é usado para encontrar a última aparição.
"How are you?".lastIndexOf("o");
Output
9
Para ambos os métodos, também é possível pesquisar múltiplos caracteres na string. Ele retornará o número de índice do primeiro caractere da sequência.
"How are you?".indexOf("are");
Output
4
O método slice()
, por outro lado, retorna os caracteres entre dois números de índice. O primeiro parâmetro será o número de índice de início, e o segundo parâmetro será o número de índice final.
"How are you?".slice(8, 11);
Output
you
Note que 11
é ?
, mas ?
não faz parte do resultado retornado. O slice()
retornará o que está entre eles, mas sem incluir o último parâmetro.
Se um segundo parâmetro não for incluído, slice()
retornará tudo começando do primeiro parâmetro até o final da string.
"How are you?".slice(8);
Output
you?
Resumindo, charAt()
e slice()
ajudarão a retornar valores de string com base em números de índice, e indexOf()
e lastIndexOf()
farão o oposto, retornando números de índice com base nos caracteres de string fornecidos.
Descobrindo o comprimento de uma string
Usando a propriedade length
, podemos retornar o número de caracteres em uma string.
"How are you?".length;
Output
12
Lembre-se de que a propriedade length
está retornando o número real de caracteres que começa com 1, totalizando 12, e não o número de índice final, que começa em 0
e termina em 11
.
Convertendo para maiúsculas ou minúsculas
Os dois métodos integrados toUpperCase()
e toLowerCase()
representam maneiras úteis de formatar o texto e fazer comparações textuais no JavaScript.
toUpperCase()
irá converter todos os caracteres para caracteres maiúsculos.
"How are you?".toUpperCase();
Output
HOW ARE YOU?
toLowerCase()
converterá todos os caracteres para caracteres minúsculos.
"How are you?".toLowerCase();
Output
how are you?
Esses dois métodos de formatação não recebem parâmetros adicionais.
Vale notar que esses métodos não alteram a string original.
Dividindo strings
O JavaScript possui um método muito útil para dividir uma string por um caractere e criar uma matriz das seções. Vamos usar o método split()
para separar a matriz por um caractere de espaço em branco, representado por “ ”
.
const originalString = "How are you?";
// Split string by whitespace character
const splitString = originalString.split(" ");
console.log(splitString);
Output
[ 'How', 'are', 'you?' ]
Agora que temos uma nova matriz na variável splitString
, podemos acessar cada seção com um número de índice.
splitString[1];
Output
are
Se um parâmetro vazio for dado, split()
criará uma matriz separada por vírgulas com cada caractere na string.
Ao dividir strings, é possível determinar quantas palavras estão em uma sentença, e usar o método como uma maneira de determinar os primeiros nomes e os sobrenomes de pessoas, por exemplo.
Filtragem de espaços em branco
O método trim()
do JavaScript remove o espaço em branco de ambas as extremidades de uma string, mas não altera nenhum lugar intermediário. Os espaços em branco podem ser Tabs ou espaços.
const tooMuchWhitespace = " How are you? ";
const trimmed = tooMuchWhitespace.trim();
console.log(trimmed);
Output
How are you?
O método trim()
é uma maneira simples de realizar a tarefa comum de remover espaços em branco em excesso.
Descobrindo e substituindo valores de string
Podemos pesquisar uma string em busca de um valor e substituí-lo por um novo valor usando o método replace()
. O primeiro parâmetro será o valor a ser encontrado, e o segundo parâmetro será o valor para substituí-lo.
const originalString = "How are you?"
// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");
console.log(newString);
Output
Where are you?
Além da capacidade de substituir um valor por outro valor de string, também podemos usar as Expressões Regulares para tornar o replace()
mais poderoso. Por exemplo, o replace()
afeta apenas o primeiro valor, mas podemos usar o sinalizador g
(global) para capturar todas as ocorrências de um valor e o sinalizador i
(insensibilidade ao caso) para ignorar a diferenciação entre maiúsculas e minúsculas.
const originalString = "Javascript is a programming language. I'm learning javascript."
// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");
console.log(newString);
Output
JavaScript is a programming language. I'm learning JavaScript.
Essa é uma tarefa muito comum que utiliza as Expressões Regulares. Visite o Regexr para praticar mais exemplos de RegEx.
Conclusão
As strings são um dos tipos de dados mais usados e há muitas coisas que podemos fazer com elas.
Neste tutorial, aprendemos a diferença entre o primitivo de string e objeto String
, como as strings são indexadas e como usar os métodos e propriedades integrados das strings para acessar caracteres, formatar texto e encontrar e substituir valores.
Para uma visão geral sobre strings, leia o tutorial “Como trabalhar com strings no JavaScript.”