Guia completo sobre string javascript

Quando falamos sobre programação, a string JavaScript é um conceito que todos os desenvolvedores devem compreender. Pois usamos as strings para armazenar e manipular texto. Além disso entender esse conceito permite criar aplicações web dinâmicas e interativas.

Em JavaScript, é possível criar strings usando aspas simples, aspas duplas ou crases (template literals), permitindo uma grande flexibilidade no manuseio de texto.

Além disso, existem diversos métodos e propriedades que tornam a manipulação de strings uma tarefa fácil e eficiente para desenvolvedores. Prepare-se para aprender tudo sobre string de um jeito fácil.

1. O que é uma String Javascript?

Uma string em JavaScript é uma sequência de caracteres usada para representar texto. Strings são imutáveis, o que significa que, uma vez criadas, elas não podem ser alteradas.

2. Como criar uma String?

Aspas simples (‘)

let saudacao = 'Olá, mundo!';

Aspas duplas (“)

let saudacao = "Olá, mundo!";

Crases (template literals) (“)

let saudacao = `Olá, mundo!`;

3. Propriedade de String Javascript

length

Imagine uma string como uma fila organizada de caracteres. A propriedade length revela quantos caracteres compõem essa fila, te dizendo o tamanho exato da sua string.

Como funciona a propriedade length?

Para acessar essa propriedade real, basta usar o ponto (.) seguido de “length” após o nome da sua string. Por exemplo:

const frase = "O rato roeu a roupa da rainha de Roma.";
const tamanhoDaFrase = frase.length;
console.log(tamanhoDaFrase); // Resultado: 36

Nesse exemplo, a variável tamanhoDaFrase recebe o valor 36, que representa a quantidade de caracteres na string frase. Cada letra, espaço em branco e até mesmo caracteres especiais contam como um súdito no reino da length.

Exemplos para dominar a propriedade length:

• Contando palavras: Divida a string em palavras usando o método split() e conte o número de elementos no array resultante.

const frase = "Este é um exemplo de contagem de palavras.";
const palavras = frase.split(" ");
const numeroDePalavras = palavras.length;
console.log(numeroDePalavras); // Resultado: 7

• Removendo o último caractere: Utilize o método slice() para pegar a string desde o início até o penúltimo caractere (length – 1).

const texto = "Adeus, mundo!";
const textoSemUltimoCaractere = texto.slice(0, texto.length - 1);
console.log(textoSemUltimoCaractere); // Resultado: "Adeus, mundo!"

• Verificando se a string está vazia: Use a comparação length === 0 para verificar se a string não contém caracteres.

const stringVazia = "";
const stringComTexto = "Olá!";

if (stringVazia.length === 0) {
  console.log("A string está vazia.");
} else {
  console.log("A string contém texto.");
}

4. Métodos básicos de String JavaScript

charAt()

O método charAt() permite acessar um caractere específico dentro de uma string, com base na sua posição. É útil para extrair caracteres individuais ou sequências de caracteres de uma string.

Funcionamento

O método charAt() recebe um único argumento, que é o índice do caractere que você deseja obter. A indexação em strings JavaScript começa em zero, então o primeiro caractere tem o índice 0, o segundo caractere tem o índice 1 e assim por diante.

Se o índice fornecido for válido (entre 0 e o comprimento da string menos 1), o método charAt() retornará o caractere naquela posição. Se o índice for inválido, o método retornará uma string vazia.

Exemplo:

const str = "Hello, World!";

console.log(str.charAt(0)); // Retorna "H"
console.log(str.charAt(5)); // Retorna " " (espaço)
console.log(str.charAt(100)); // Retorna "" (string vazia, índice inválido)

concat()

O método concat() combina o texto de duas ou mais strings e retorna uma nova string. É usado para unir strings de forma eficiente, criando uma nova string sem modificar as strings originais.

Funcionamento:

O método concat() pode receber um ou mais argumentos, que são as strings que você deseja concatenar. As strings serão concatenadas na ordem em que são passadas como argumentos. Se um argumento não for do tipo string, ele será convertido em string antes de ser concatenado.

Exemplo:

const str1 = "Olá";
const str2 = ", ";
const str3 = "mundo!";

const novaString = str1.concat(str2, str3);
console.log(novaString); // Retorna "Olá, mundo!"

includes()

O método includes() verifica se uma string contém uma substring específica, retornando true se a substring for encontrada e false caso contrário. É um método útil para verificar a presença de padrões de texto dentro de strings.

Funcionamento:

O método includes() recebe dois argumentos:

• substring: A substring que você deseja procurar dentro da string principal.
• posição (opcional): Um índice numérico que especifica a partir de qual posição na string principal a pesquisa deve começar. O valor padrão é 0, indicando o início da string.

O método verifica se a substring especificada está presente na string principal, considerando maiúsculas e minúsculas. Se a substring for encontrada em qualquer lugar da string principal, o método includes() retorna true. Caso contrário, retorna false.

Exemplo:

const str = "Este é um exemplo de string";

console.log(str.includes("exemplo")); // Retorna true
console.log(str.includes("Exemplo")); // Retorna false (diferença maiúsculas/minúsculas)
console.log(str.includes("string", 10)); // Retorna true (a partir da posição 10)

indexOf()

O método indexOf() procura a primeira ocorrência de uma substring específica dentro de uma string principal, retornando a posição do índice onde a substring é encontrada. Se a substring não for encontrada, o método retorna -1.

Funcionamento:

O método indexOf() recebe dois argumentos:

• substring: A substring que você deseja procurar dentro da string principal.
• posição (opcional): Um índice numérico que especifica a partir de qual posição na string principal a pesquisa deve começar. O valor padrão é 0, indicando o início da string.

O método percorre a string principal caractere por caractere, comparando cada caractere com o primeiro caractere da substring.

Se o método encontrar uma correspondência, ele continua comparando os caracteres subsequentes da substring com os caracteres da string principal até o último caractere.

Se todas as correspondências forem bem-sucedidas, o método indexOf() retorna a posição do índice onde a substring foi encontrada na string principal. Caso contrário, retorna -1.

Exemplo:

const str = "Olá, mundo!";
const subStr = "mundo";

console.log(str.indexOf(subStr)); // Retorna 7 (posição do "mundo")
console.log(str.indexOf(subStr, 10)); // Retorna -1 (a partir da posição 10, "mundo" não existe)

slice()

O método slice() extrai uma parte de uma string e retorna essa parte como uma nova string, sem modificar a string original. É comumente usado para selecionar subcadenas de strings, remover partes indesejadas ou reorganizar caracteres dentro de uma string.

Funcionamento:

O método slice() recebe dois argumentos:

• startPosition: Um índice numérico que especifica a partir de qual posição da string a extração deve começar. O valor padrão é 0, indicando o início da string.
• endPosition (opcional): Um índice numérico que especifica até qual posição da string a extração deve ir. O valor padrão é o comprimento da string, ou seja, a extração vai até o final da string. Se você omitir o endPosition, o slice() extrairá até o final da string.

O método slice() extrai os caracteres da string principal a partir da startPosition até a endPosition (não incluindo a endPosition).

Se um dos índices for negativo, ele indica a contagem a partir do final da string. Por exemplo, slice(-1) extrai o último caractere da string.

Exemplo:

const str = "Hello, World!";

console.log(str.slice(0, 5)); // Retorna "Hello" (do início ao índice 5, excluindo o 5)
console.log(str.slice(5, 11)); // Retorna ", World" (do índice 5 ao 11, excluindo o 11)
console.log(str.slice(-3)); // Retorna "ld!" (os últimos 3 caracteres)
console.log(str.slice(1, -2)); // Retorna "ello, Wor" (do índice 1 até o penúltimo caractere)

substring()

O método substring() extrai uma parte de uma string e retorna essa parte como uma nova string, sem modificar a string original. É comumente usado para selecionar subcadenas de strings, remover partes indesejadas ou reorganizar caracteres dentro de uma string.

Funcionamento:

O método substring() recebe dois argumentos:

• startPosition: Um índice numérico que especifica a partir de qual posição da string a extração deve começar. O valor padrão é 0, indicando o início da string.
• endPosition: Um índice numérico que especifica até qual posição da string a extração deve ir. O valor padrão é o comprimento da string, ou seja, a extração vai até o final da string. Se você omitir o endPosition, o substring() extrairá até o final da string.

O método substring() extrai os caracteres da string principal a partir da startPosition até a endPosition (incluindo a endPosition).

Se um dos índices for negativo, ele indica a contagem a partir do final da string. Por exemplo, substring(-2) extrai os últimos 2 caracteres da string.

Exemplo:

const str = "Hello, World!";

console.log(str.substring(0, 5)); // Retorna "Hello" (do início ao índice 5, incluindo o 5)
console.log(str.substring(5, 11)); // Retorna ", World!" (do índice 5 ao 11, incluindo o 11)
console.log(str.substring(-3)); // Retorna "ld!" (os últimos 3 caracteres)
console.log(str.substring(1, -2)); // Retorna "ello, Worl" (do índice 1 até o penúltimo caractere, incluindo o penúltimo)

toLowerCase()

O método toLowerCase() converte todos os caracteres de uma string para letras minúsculas, retornando uma nova string com a versão em minúsculo da string original. É útil para padronizar o texto para minúsculas, facilitar comparações de strings e trabalhar com textos que não sejam sensíveis à caixa.

Funcionamento:

O método toLowerCase() não recebe nenhum argumento. Ele simplesmente converte todos os caracteres da string original para seus equivalentes em minúsculo, de acordo com o padrão Unicode.

Isso significa que caracteres maiúsculos como “A”, “B”, “C” serão convertidos para “a”, “b”, “c”, respectivamente, e outros caracteres como acentos e letras maiúsculas acentuadas também serão convertidos para suas versões em minúsculo.

Exemplo:

const str = "Hello, World!";

console.log(str.toLowerCase()); // Retorna "hello, world!"

toUpperCase()

O método toUpperCase() converte todos os caracteres de uma string para letras maiúsculas, retornando uma nova string com a versão em maiúsculo da string original. É útil para padronizar o texto para maiúsculas, destacar títulos ou seções de texto e trabalhar com textos que sejam sensíveis à caixa.

Funcionamento:

O método toUpperCase() não recebe nenhum argumento. Ele simplesmente converte todos os caracteres da string original para seus equivalentes em maiúsculo, de acordo com o padrão Unicode.

Isso significa que caracteres minúsculos como “a”, “b”, “c” serão convertidos para “A”, “B”, “C”, respectivamente, e outros caracteres como acentos e letras minúsculas acentuadas também serão convertidos para suas versões em maiúsculo.

Exemplo:

const str = "hello, world!";

console.log(str.toUpperCase()); // Retorna "HELLO, WORLD!"

5. Métodos de manipulação de String Javascript

replace()

O método replace() busca e substitui padrões de texto dentro de uma string, retornando uma nova string com as substituições feitas. É um método versátil e poderoso para manipular strings, com diversas aplicações práticas.

Funcionamento:

O método replace() recebe dois argumentos obrigatórios:

• search: O padrão de texto que você deseja procurar e substituir na string original. Pode ser uma string literal ou uma expressão regular (RegExp).
• replacement: O texto que você deseja usar para substituir o padrão encontrado. Pode ser uma string literal, uma função ou uma referência a outra variável.

O método replace() percorre a string original caractere por caractere, buscando ocorrências do padrão especificado em search. Se encontrar uma ocorrência, ele substitui essa ocorrência pelo valor definido em replacement. O processo continua até que todo o texto da string original termine.

Exemplo:

const str = "Olá, Mundo!";

// Substituindo "Mundo" por "Terra"
console.log(str.replace("Mundo", "Terra")); // Retorna "Olá, Terra!"

// Substituindo todas as vogais por "#"
console.log(str.replace(/[aeiou]/g, "#")); // Retorna "Ol#, #und!"

// Substituindo a primeira ocorrência de "o" por "a"
console.log(str.replace(/o/, "a", 1)); // Retorna "aOlá, Mundo!"

split()

O método split() divide uma string em uma lista de subcadenas (também conhecidas como arrays de strings) com base em um separador especificado. É um método crucial para manipular strings, permitindo extrair partes específicas, remover caracteres indesejados ou reordenar o texto.

Funcionamento:

O método split() recebe dois argumentos opcionais:

• separator: (opcional) A string ou expressão regular que define o separador que será usado para dividir a string. Se omitido, o split() usa espaços em branco como separador padrão.
• limit: (opcional) Um número inteiro que especifica o limite máximo de subcadenas a serem retornadas. Se omitido, o split() retorna todas as subcadenas.

O método split() percorre a string original caractere por caractere, buscando o separador especificado. Se encontrar o separador, ele cria uma nova subcadena com os caracteres que precedem o separador e a adiciona à lista de subcadenas.

Em seguida, ele continua a percorrer a string, buscando o próximo separador e repetindo o processo até o final da string ou até atingir o limite especificado em limit.

Exemplo:

const str = "Olá, mundo! Como você está?";

// Dividindo a string por espaços em branco
console.log(str.split()); 
// Retorna: ["Olá", "mundo!", "Como", "você", "está?"]

// Dividindo a string pela vírgula
console.log(str.split(", "));
// Retorna: ["Olá", "mundo!", "Como você está?"]

// Limitando o número de subcadenas
console.log(str.split(" ", 2));
// Retorna: ["Olá", "mundo!"]

trim()

O método trim() remove os espaços em branco (espaços, tabulações, quebras de linha e outros caracteres em branco) do início e do final de uma string, retornando uma nova string com os caracteres indesejados removidos.

É um método simples, mas muito útil para limpar strings e garantir que elas estejam prontas para serem usadas em outras operações.

Funcionamento:

O método trim() não recebe nenhum argumento. Ele simplesmente percorre a string original caractere por caractere, removendo os espaços em branco do início e do final da string.

Espaços em branco incluem espaços, tabulações, quebras de linha, feeds de página e outros caracteres de controle que não são considerados caracteres visíveis.

Exemplo:

const str = "  Olá Mundo!   ";

console.log(str.trim()); // Retorna "Olá Mundo!"

6. Template Literals

Template literals permitem incorporar expressões dentro de strings usando a sintaxe ${expression}.

let nome = 'João';
let saudacao = `Olá, ${nome}!`;
console.log(saudacao); // Saída: Olá, João!

7. Strings e caracteres Unicode

A base da String em JavaScript é Unicode, o que significa que podem representar qualquer caractere de qualquer linguagem.

let coração = '❤️';
console.log(coração); // Saída: ❤️
console.log(coração.length); // Saída: 2 (pois é um par de substituição de caracteres UTF-16)

8. Iterando sobre String Javascript

Usando for

O loop for permite executar um bloco de código repetidamente um número determinado de vezes. No contexto de strings, podemos iterar sobre os caracteres de um string com o loop for, permitindo acessar e manipular cada caractere individualmente.

Funcionamento:

O loop for possui três partes: uma inicialização, uma condição e um incremento. A inicialização define uma variável de controle que será usada para acompanhar a iteração. A condição verifica se a iteração deve continuar. O incremento modifica o valor da variável de controle após cada iteração.

Exemplo:

const str = "Olá, Mundo!";

for (let i = 0; i < str.length; i++) {
  console.log(str[i]); // Exibe cada caractere da string
}

Explicação:

• let i = 0;: Inicializa a variável de controle i com o valor 0.
• i < str.length;: A condição verifica se o valor de i é menor que o comprimento da string (str.length). Se for verdadeiro, a iteração continua.
• i++: O incremento aumenta o valor de i em 1 após cada iteração.

Usando for…of

O loop for…of é uma estrutura de controle introduzida no ES6 para iterar sobre objetos iteráveis, como arrays, strings, mapas e conjuntos. No contexto de strings, o loop for…of permite iterar sobre os caracteres de uma string de forma mais concisa e moderna em comparação com o loop for tradicional.

Funcionamento:

O loop for…of não possui partes como inicialização, condição e incremento. Ele simplesmente recebe um objeto iterável como argumento e itera sobre seus elementos, atribuindo cada elemento à variável definida no loop.

Exemplo:

const str = "Olá, Mundo!";

for (const char of str) {
  console.log(char); // Exibe cada caractere da string
}

Explicação:

• for (const char of str): Declara o loop for…of e define a variável char para receber cada caractere da string str.
• console.log(char): Exibe cada caractere da string na saída.

9. Comparação de String Javascript

Strings podem ser comparadas usando operadores de comparação (==, ===, !=, !==).

let saudacao1 = 'Olá';
let saudacao2 = 'Olá';
let saudacao3 = 'Tchau';

console.log(saudacao1 === saudacao2); // Saída: true
console.log(saudacao1 === saudacao3); // Saída: false

10. Escapando caracteres

Para usar caracteres especiais em strings, você precisa escapá-los com uma barra invertida (\).

let frase = 'Ele disse: \"JavaScript é incrível!\"';
console.log(frase); // Saída: Ele disse: "JavaScript é incrível!"

11. Converter String em Número em JavaScript

Em JavaScript, existem duas maneiras principais de converter uma string em um número:

1. Usando a função parseInt()

A função parseInt() tenta converter uma string em um número inteiro.

Ela analisa a string do início até encontrar um caractere que não seja um número ou um sinal (+ ou -).

Se a string começar com um prefixo numérico como “0x” para hexadecimal ou “0b” para binário, a função parseInt() tentará converter a string com base nesse prefixo.

Exemplo:

const str1 = "123";
const str2 = "-456.78";
const str3 = "0xFF"; // Hexadecimal

console.log(parseInt(str1)); // Retorna 123
console.log(parseInt(str2)); // Retorna -456
console.log(parseInt(str3)); // Retorna 255

Observações:

• Se a string não puder ser convertida em um número inteiro, a função parseInt() retornará NaN (Not a Number).
• Se a string contiver espaços em branco antes do número, a função parseInt() os ignorará.
• A função parseInt() é geralmente usada para converter strings que representam números inteiros, como IDs, quantidades ou valores de moeda.

2. Usando a função parseFloat()

A função parseFloat() tenta converter uma string em um número de ponto flutuante (decimal).

Ela analisa a string do início até encontrar um caractere que não seja um número, um ponto decimal (.), um sinal (+ ou -) ou um expoente (e ou E).

Se a string começar com um prefixo numérico como “0x” para hexadecimal, a função parseFloat() tentará converter a string com base nesse prefixo.

Exemplo:

const str1 = "123.45";
const str2 = "-6.78e2"; // Exponencial
const str3 = "0b1101.101"; // Binário

console.log(parseFloat(str1)); // Retorna 123.45
console.log(parseFloat(str2)); // Retorna -678
console.log(parseFloat(str3)); // Retorna 13.5

Observações:

• Se a string não puder ser convertida em um número de ponto flutuante, a função parseFloat() retornará NaN (Not a Number).
• Se a string contiver espaços em branco antes do número, a função parseFloat() os ignorará.
• A função parseFloat() geralmente usamos para converter strings que representam números decimais, como preços, medidas ou valores científicos.

Escolhendo a função correta:

• Use parseInt() se precisar de um número inteiro.
• Use parseFloat() se precisar de um número de ponto flutuante.

Parabéns! Você chegou ao final do guia sobre strings em JavaScript! Aprendemos as principais funcionalidades: criação, manipulação e formatação de textos. Agora, é hora de colocar a mão na massa e começar a programar!