Se você ja programou, programa ou pretende programar, você precisa conhecer esses métodos para JavaScript String.
É bem provável que todos lendo esse artigo já tenham utilizado pelo menos um dos métodos, se não usou, você vai usar, não tenha dúvidas. Cada método é bastante relevante dentro da sua categoria, então confira a lista com calma, você pode até usar esse artigo como uma documentação básica e voltar quantas vezes quiser se caso precisar. Temos um outro artigo também sobre os métodos para Arrays se você tiver interesse.
O primeiro da lista dos métodos javascript é o método replace() procura em uma string um valor especificado, ou uma expressão regular, e retorna uma nova string onde os valores especificados são substituídos se caso for encontrado alguma ocorrência. Complexo? Vamos explicar melhor então.
Imagine que você tenha uma string qualquer, digamos:
const strValue = "Brasil nas olimpíadas 2020";
E você precisa substituir algum valor dessa string, como você faria? Exato, usando o método replace().
Vamos então substituir o “2020” por “2024”. Easy.
const strValue = "Brasil nas olimpíadas 2020";
console.log(strValue.replace('2020', '2024'));
// "Brasil nas olimpíadas 2024"
Só que precisamos prestar atenção em algumas coisas, esse método, por exemplo só irá eliminar a primeira ocorrência do valor especificado. Por exemplo:
const strValue = "Brasil nas olimpíadas 2020, França 2020";
console.log(strValue.replace("2020", "2024")); //"Brasil nas olimpíadas 2024, França 2020"
Se a intenção é alterar todas as ocorrências, precisamos passar uma expressão regular, ou regex. O nosso exemplo ficaria assim:
const strValue = "Brasil nas olimpíadas 2020, França 2020";
let regex = /2020/g;
console.log(strValue.replace(regex, "2024")); //"Brasil nas olimpíadas 2024, França 2024"
Outro excelente caso de uso para o método replace() é remover espaços em branco da entrada do usuário, por que convenhamos, eles fazem isso direto.
const email = 'admin@debug everything.com' // email digitado errado
const phone = '9 9999 9999' // Numero de telefone com espaço
const website = ' Debug Everything! '; // Só propaganda mesmo
console.log(email.replace(/\s/g,'')); // "admin@debugeverything.com"
console.log(phone.replace(/\s/g,'')); // "999999999"
console.log(website.replace(/\s/g,'')); // "DebugEverything!"
Então é só ficar atento a quando usar uma expressão regular e quando usar uma string na hora da substituição.
Ok, vamos dar uma olhada na sintaxe para tentar entender como o método split() funciona.
string.split(separator, limit)
Pela sintaxe já percebemos que esse método recebe 2 parâmetros, ambos opcionais.
O método split() é bem simples, ele divide uma string em uma array de substrings e devolve esse novo array. Você pode definir qual o separador (usando o primeiro parâmetro) que deve ser usado para gerar as substrings. Por exemplo:
Eu tenho um arquivo no meu computador, e a rota para esse arquivo é algo assim "Usuario/Documentos/Projetos/Main/file.js", e digamos que estamos interessados nesse caminho de rota, talvez para rastrear outros arquivos na pasta, sei la, mas, utilizando o método split() isso é facin.
const str1 = 'Usuario/Documentos/Projetos/Main/file.js';
const words = str1.split('/');
console.log(words); //Array ["Usuario", "Documentos", "Projetos", "Main", "file.js"]
Agora você tem acesso a cada pate da rota que leva à aquele arquivo. Outros exemplos, com outros separadores:
const str1 = 'meu_arquivo_javacript.js';
const str2 = 'Debug-Everything';
const str3 = 'metodo javascrip split'
const words = str1.split('_');
console.log(words); //Array ["meu", "arquivo", "javacript.js"]
const chars = str2.split('-');
console.log(chars); // Array ["Debug", "Everything"]
const strCopy = str3.split(' ');
console.log(strCopy); //Array ["metodo", "javascrip", "split"]
Se você estiver se perguntando o que aconteceria se você colocar uma string vazia no primeiro parâmetro, a resposta é essa:
const str1 = 'Debug Everything';
const words = str1.split('');
console.log(words); //Array ["D", "e", "b", "u", "g", " ", "E", "v", "e", "r", "y", "t", "h", "i", "n", "g"]
A string é dividida por caracteres (letras e espaços).
O segundo parâmetro você pode usar para limitar o tamanho do array de saída. Por exemplo, no caso acima, geramos um novo array com 16 posições, se caso quiséssemos limitar o tamanho desse array, poderíamos fazer assim:
const str1 = 'Debug Everything';
const words = str1.split('', 5);
console.log(words); //Array ["D", "e", "b", "u", "g"]
Só observando que o método split() não altera a string original.
Mais um dos métodos javascript para fatiar strings. De certa forma, parecido com o método split(), mas nesse caso o método slice() extrai parte de uma string e retorna a parte extraída em uma nova string e não um array. Assim:
const languages = 'Javascript php Java C# Python C++ Haskel';
console.log(languages.slice(34)); // "Haskel"
Vamos dar aquela olhada rápida na sintaxe.
String.slice(beginIndex, endIndex)
Pela sintaxe vemos que o método toma 2 parâmetros: a posição inicial, e a posição final (final não incluído). Com esses dois parâmetros você pode extrair qualquer porção da string que você desejar.
const languages = 'Javascript php Java C# Python C++ Haskel';
console.log(languages.slice(0, 10)); // "Javascript"
console.log(languages.slice(11, 14)); // "php"
console.log(languages.slice(15, 22)); // "Java C#"
console.log(languages.slice(23, 50)); // "Python C++ Haskel"
Para os mais curiosos, isso é o que acontece quando você não define nenhum dos parâmetros.
const languages = 'Javascript php Java C# Python C++ Haskel';
console.log(languages.slice(0)); // "Javascript php Java C# Python C++ Haskel"
Ok, esse não é exatamente um dos métodos javascript, mas sim uma propriedade da Class String, mas muito útil, e decidir incluir aqui.
O funcionamento é muito simples, quer saber o tamanho de uma string, só usar acessar esse propriedade.
let website = 'DebugEverything';
console.log(website.length); //15
Esse método pode ser muito útil em várias situações, por exemplo, digamos que o usuário precise preencher o campo com alguns dados pessoais, se o seu usuário nesse dia estiver com preguiça e quiser digitar apenas duas letras no primeiro nome, você pode gerar um erro, assim:
let primeiroNome = document.getElementById('inputID').value;
if (primeiroNome.lenght < 3) {
alert("Nome deve conter minimo de 4 caracteres");
}
Talvez não com um alert(), mas você entendeu a ideia.
Os templates literais utilizam back-ticks (“) em vez das aspas (“”) para definir uma string
let text = `Debug Everything!`;
Deixe um comentário