Tutorial

Como indexar, dividir e manipular strings no JavaScript

Published on March 19, 2021
Português
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?.

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more