Como indexar, dividir e manipular strings no JavaScript

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; 
Outputstring 

No segundo exemplo, usamos o new String() para criar um objeto string e atribui-lo a uma variável.

typeof stringObject; 
Outputobject 

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]; 
Outputr 

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); 
Outputr 

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"); 
Output1 

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"); 
Output9 

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"); 
Output4 

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); 
Outputyou 

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); 
Outputyou? 

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; 
Output12 

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(); 
OutputHOW ARE YOU? 

toLowerCase() converterá todos os caracteres para caracteres minúsculos.

"How are you?".toLowerCase(); 
Outputhow 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]; 
Outputare 

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); 
OutputHow 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); 
OutputWhere 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); 
OutputJavaScript 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.”