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;

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?.

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.”