Explore Métodos de Objeto String em JavaScript

Introdução

Neste laboratório, você explorará os métodos essenciais do objeto string em JavaScript para manipular e transformar dados de texto. Através de uma série de exercícios práticos de codificação, você aprenderá a criar strings, verificar seu comprimento, converter a capitalização, extrair caracteres, substituir conteúdo e encontrar posições de caracteres usando métodos de string embutidos em JavaScript.

O laboratório cobre técnicas fundamentais de manipulação de strings, como usar a propriedade length para determinar o tamanho da string, toLowerCase() e toUpperCase() para conversão de capitalização, charAt() e substring() para extração de caracteres, substituição e divisão de strings, e indexOf() para localizar caracteres específicos dentro de uma string. Ao trabalhar nestas etapas, você obterá experiência prática com operações de string essenciais que são cruciais para o processamento de texto eficaz na programação JavaScript.

Crie uma String e Verifique Seu Comprimento

Nesta etapa, você aprenderá como criar strings em JavaScript e verificar seu comprimento usando a propriedade length. Strings são tipos de dados fundamentais em JavaScript, usados para armazenar e manipular texto.

Abra o WebIDE e crie um novo arquivo chamado string-basics.js no diretório ~/project. Escreveremos nosso código JavaScript para explorar a criação de strings e a verificação de comprimento.

// Criando uma string usando diferentes métodos
let greeting = "Olá, JavaScript!";
let name = "John Doe";
let emptyString = "";

// Verificando o comprimento da string usando a propriedade length
console.log("Comprimento da saudação:", greeting.length);
console.log("Comprimento do nome:", name.length);
console.log("Comprimento da string vazia:", emptyString.length);

Quando você executar este código, verá o comprimento de cada string impresso no console. A propriedade length retorna o número de caracteres em uma string.

Exemplo de saída:

Comprimento da saudação: 18
Comprimento do nome: 8
Comprimento da string vazia: 0

Alguns pontos-chave para lembrar:

• Strings podem ser criadas usando aspas simples '' ou aspas duplas "".
• A propriedade length funciona em qualquer string, incluindo strings vazias.
• Espaços e sinais de pontuação são contados no comprimento da string.

Converta a Caixa da String com toLowerCase() e toUpperCase()

Nesta etapa, você aprenderá como converter a capitalização de strings usando dois métodos essenciais de string em JavaScript: toLowerCase() e toUpperCase(). Esses métodos permitem que você altere a capitalização de strings facilmente.

Abra o WebIDE e continue trabalhando no arquivo ~/project/string-basics.js da etapa anterior. Adicione o seguinte código para explorar a conversão de capitalização:

// String original
let originalText = "Olá, Programação JavaScript!";

// Converter para minúsculas
let lowercaseText = originalText.toLowerCase();
console.log("Minúsculas:", lowercaseText);

// Converter para maiúsculas
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Maiúsculas:", uppercaseText);

// Exemplo prático: normalização de nome de usuário
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Nome de Usuário Normalizado:", normalizedUsername);

Quando você executar este código, verá a seguinte saída:

Exemplo de saída:

Minúsculas: olá, programação javascript!
Maiúsculas: OLÁ, PROGRAMAÇÃO JAVASCRIPT!
Nome de Usuário Normalizado: johndoe

Pontos-chave sobre os métodos de conversão de capitalização:

• toLowerCase() converte todos os caracteres em uma string para minúsculas
• toUpperCase() converte todos os caracteres em uma string para maiúsculas
• Esses métodos são úteis para comparação de strings, normalização e formatação
• A string original permanece inalterada; esses métodos retornam uma nova string

Extraia Caracteres e Substrings com charAt() e substring()

Nesta etapa, você aprenderá como extrair caracteres individuais e substrings de uma string usando os métodos charAt() e substring() em JavaScript.

Abra o WebIDE e continue trabalhando no arquivo ~/project/string-basics.js. Adicione o seguinte código para explorar a extração de caracteres e substrings:

// String original
let message = "JavaScript é incrível!";

// Extrair um único caractere usando charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("Primeiro caractere:", firstChar);
console.log("Quinto caractere:", fifthChar);

// Extrair substrings usando substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("Primeiros 10 caracteres:", partialString1);
console.log("A partir do 11º caractere:", partialString2);

// Exemplo prático: extraindo o nome de usuário do e-mail
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Nome de usuário:", username);

Quando você executar este código, verá a seguinte saída:

Exemplo de saída:

Primeiro caractere: J
Quinto caractere: S
Primeiros 10 caracteres: JavaScript
A partir do 11º caractere: is awesome!
Nome de usuário: john.doe

Pontos-chave sobre a extração de caracteres e substrings:

• charAt(index) retorna o caractere em um índice específico (indexado a partir de zero)
• substring(startIndex, endIndex) extrai uma porção da string
• Se nenhum índice final for fornecido, substring() extrai até o final da string
• Os índices começam em 0, então o primeiro caractere está no índice 0

Substitua e Divida o Conteúdo da String

Nesta etapa, você aprenderá como manipular strings usando os métodos replace() e split() em JavaScript. Esses métodos são ferramentas poderosas para modificar e dividir o conteúdo de strings.

Abra o WebIDE e continue trabalhando no arquivo ~/project/string-basics.js. Adicione o seguinte código para explorar a substituição e divisão de strings:

// String original
let sentence = "Olá, mundo! Bem-vindo à programação JavaScript.";

// Método replace: substituir palavras ou caracteres específicos
let replacedSentence = sentence.replace("mundo", "JavaScript");
console.log("Sentença substituída:", replacedSentence);

// Substituição global usando expressão regular
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Sentença limpa:", cleanedSentence);

// Método split: converter string em um array
let words = sentence.split(" ");
console.log("Array de palavras:", words);

// Split com limite
let limitedWords = sentence.split(" ", 3);
console.log("Palavras limitadas:", limitedWords);

// Exemplo prático: análise de dados semelhantes a CSV
let userData = "João,Silva,30,Desenvolvedor";
let userDetails = userData.split(",");
console.log("Primeiro nome do usuário:", userDetails[0]);
console.log("Sobrenome do usuário:", userDetails[1]);

Quando você executar este código, verá a seguinte saída:

Exemplo de saída:

Sentença substituída: Olá, JavaScript! Bem-vindo à programação JavaScript.
Sentença limpa: Olá, mundo Bem-vindo à programação JavaScript
Array de palavras: [ 'Olá,', 'mundo!', 'Bem-vindo', 'à', 'programação', 'JavaScript.' ]
Palavras limitadas: [ 'Olá,', 'mundo!', 'Bem-vindo' ]
Primeiro nome do usuário: João
Sobrenome do usuário: Silva

Pontos-chave sobre replace() e split():

• replace() substitui parte de uma string por outra string
• Use expressões regulares com replace() para substituições globais
• split() divide uma string em um array com base em um separador
• split() pode receber um parâmetro de limite opcional para controlar o número de divisões

Encontre Posições de Caracteres com indexOf()

Nesta etapa, você aprenderá como encontrar a posição de caracteres ou substrings dentro de uma string usando o método indexOf() em JavaScript. Este método é crucial para pesquisar e localizar conteúdo específico dentro de strings.

Abra o WebIDE e continue trabalhando no arquivo ~/project/string-basics.js. Adicione o seguinte código para explorar o posicionamento de caracteres e substrings:

// String original
let message = "Olá, JavaScript é incrível!";

// Encontrar a posição de um caractere
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Posição da vírgula:", commaPosition);
console.log("Primeira posição de 'J':", firstJPosition);

// Encontrar a posição de uma substring
let javascriptPosition = message.indexOf("JavaScript");
console.log("Posição de 'JavaScript':", javascriptPosition);

// Encontrar um caractere a partir de um índice específico
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Segunda posição de 'J':", secondJPosition);

// Lidando com caracteres não encontrados
let xPosition = message.indexOf("X");
console.log("Posição de 'X':", xPosition);

// Exemplo prático: validação de e-mail
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Nome de domínio:", domainName);

Quando você executar este código, verá a seguinte saída:

Exemplo de saída:

Posição da vírgula: 3
Primeira posição de 'J': 7
Posição de 'JavaScript': 7
Segunda posição de 'J': 7
Posição de 'X': -1
Nome de domínio: example.com

Pontos-chave sobre indexOf():

• Retorna o primeiro índice onde o caractere ou substring especificado é encontrado
• Se o caractere/substring não for encontrado, ele retorna -1
• Pode começar a pesquisar a partir de um índice específico usando um segundo parâmetro opcional
• Útil para pesquisar, validar e extrair partes de strings

Resumo

Neste laboratório, os participantes exploraram técnicas fundamentais de manipulação de strings em JavaScript, com foco em métodos e propriedades-chave. O laboratório guiou os alunos através da criação de strings, verificação de seus comprimentos e realização de conversões de caixa usando métodos como length, toLowerCase() e toUpperCase(). Os participantes aprenderam como criar strings com diferentes sintaxes, medir o comprimento de strings e transformar casos de texto dinamicamente.

Os exercícios práticos demonstraram operações essenciais de string, incluindo extração de caracteres, manipulação de substrings e compreensão da indexação de strings. Ao trabalhar com exemplos de código práticos, os alunos obtiveram insights práticos sobre os métodos de objeto string do JavaScript, permitindo que eles manipulassem e modificassem dados de texto de forma eficaz em seus projetos de programação.