Resumo : neste tutorial, você aprenderá sobre o Stringtipo JavaScript e como manipular strings de forma eficaz.
Introdução ao tipo String JavaScript
O Stringtipo é um wrapper de objeto do tipo primitivo string e pode ser criado usando o Stringconstrutor da seguinte maneira:
let str = new String('JavaScript String Type');Linguagem de código: JavaScript ( javascript )O Stringtipo possui uma propriedade chamada lengthque especifica o número de caracteres na string.
console.log(str.length); // 22Linguagem de código: JavaScript ( javascript )Neste exemplo, o valor da lengthpropriedade é 22também o número de caracteres na string 'JavaScript String Type'.
Para obter o valor da string primitiva, você usa um dos seguintes métodos do objeto String: valueOf(), toString(),etoLocaleString().
console.log(str.valueOf());
console.log(str.toString());
console.log(str.toLocaleString());Linguagem de código: CSS ( css )Para acessar um caractere individual em uma string, você usa a notação de colchetes []com um índice numérico. O índice do primeiro caractere é zero, conforme mostrado neste exemplo:
console.log(str[0]); // JLinguagem de código: JavaScript ( javascript )A notação de colchetes foi introduzida no ES5. Antes do ES5, você usava o charAt()método, que é mais detalhado:
console.log(str.charAt(0)); // JLinguagem de código: JavaScript ( javascript )Quando você chama um método em uma variável de string primitiva ou em uma string literal, ele é convertido em uma instância do Stringtipo. Por exemplo:
'literal string'.toUpperCase();Linguagem de código: JavaScript ( javascript )Esse recurso é conhecido como tipos de wrapper primitivos em JavaScript .
Manipulação de cordas
O Stringtipo fornece muitos métodos úteis para manipular strings de maneira eficaz. Examinaremos cada um deles na seção seguinte.
1) Concatenando strings
Para concatenar duas ou mais strings você usa o concat()método a seguir:
let firstName = 'John';
let fullName = firstName.concat(' ','Doe');
console.log(fullName); // "John Doe"
console.log(firstName); // "John"Linguagem de código: JavaScript ( javascript )O concat()método concatena duas ou mais strings e retorna a string resultante. Observe que o concat()método não modifica a string original.
Além do concat()método, você também pode usar o operador de adição ( +) para concatenar strings. Na prática, o operador de adição é usado com mais frequência que o concat()método.
let firstName = 'John';
let fullName = firstName + ' ' + 'Doe';
console.log(fullName); // "John Doe"Linguagem de código: JavaScript ( javascript )2) Extraindo substrings
Para extrair uma substring de uma string, você usa o substr()método:
substr(startIndex,[length]);Linguagem de código: CSS ( css )O substr()método aceita dois argumentos.
O primeiro argumento startIndexé o local onde os caracteres estão sendo extraídos, enquanto o segundo argumento lengthespecifica o número de caracteres a serem extraídos.
let str = "JavaScript String";
console.log(str.substr(0, 10)); // "JavaScript"
console.log(str.substr(11,6)); // "String"Linguagem de código: JavaScript ( javascript )Se você omitir o length argumento, o substr()método extrairá os caracteres até o final da string.
Às vezes, você deseja extrair uma substring de uma string usando índices inicial e final. Neste caso, você usa o substring()método:
substring(startIndex,endIndex)Veja o exemplo a seguir:
let str = "JavaScript String";
console.log(str.substring(4, 10)); // "Script"Linguagem de código: JavaScript ( javascript )3) Localizando substrings
Para localizar uma substring em uma string, você usa o indexOf()método:
string.indexOf(substring,[fromIndex]);Linguagem de código: CSS ( css )O indexOf()método aceita dois argumentos: uma substring para localizar e o fromIndex momento em que o método inicia a pesquisa na string.
O indexOf()retorna o índice da primeira ocorrência da substring na string. Se a substring não for encontrada, o indexOf()método retornará -1.
let str = "This is a string";
console.log(str.indexOf("is")); // 2Linguagem de código: JavaScript ( javascript )O exemplo a seguir usa o fromIndexargumento:
console.log(str.indexOf('is', 3)); //5Linguagem de código: JavaScript ( javascript )Para encontrar a localização da última ocorrência de uma substring em uma string, você usa o lastIndexOf()método.
string.lastIndexOf(substring,[fromIndex])Linguagem de código: CSS ( css )Ao contrário do indexOf()método, o lastindexOf()método pesquisa retroativamente a partir do fromIndexargumento.
console.log(str.lastIndexOf('is')); // 5Linguagem de código: JavaScript ( javascript )O lastIndexOf()método também retorna -1se a substring não for encontrada na string, conforme mostrado neste exemplo:
console.log(str.lastIndexOf('are')); // -1Linguagem de código: JavaScript ( javascript )4) Removendo caracteres de espaço em branco
Para remover todos os caracteres de espaço em branco iniciais e finais de uma string, você usa o trim()método.
let rawString = ' Hi ';
let strippedString = rawString.trim();
console.log(strippedString); // "Hi"Linguagem de código: JavaScript ( javascript )Observe que o trim()método cria uma cópia da string original com os caracteres de espaço em branco removidos, mas não altera a string original.
ES6 introduziu dois novos métodos para remover caracteres de espaço em branco de uma string:
trimStart()retorna uma string com espaços em branco removidos do início de uma string.trimEnd()retorna uma string com o espaço em branco removido do final de uma string.
5) Mudança de casos
Para alterar maiúsculas e minúsculas de uma string, você usa os métodos toLowerCase()e toUpperCase():
let greeting = 'Hello';
console.log(greeting.toLowerCase()); // 'hello'
console.log(greeting.toUpperCase()); // 'HELLO';Linguagem de código: JavaScript ( javascript )Em alguns idiomas, as regras para converter uma string em minúsculas e maiúsculas são muito específicas.
Portanto, é mais seguro utilizar os métodos toLocaleLowerCase()e toLocaleUpperCase(), principalmente quando você não sabe com qual linguagem o código irá lidar.
6) Comparando strings
Para comparar duas strings, você usa o localeCompare()método:
first.localeCompare(second);Linguagem de código: CSS ( css )O localeCompare()retorna um dos três valores: -1, 0 e 1.
- Se a primeira string vier antes da segunda string em ordem alfabética, o método retornará -1.
- Se a primeira string vier depois da segunda string em ordem alfabética, o método retornará 1.
- Se duas strings forem iguais, o método retornará 0.
Por exemplo:
console.log('A'.localeCompare('B')); // -1
console.log('B'.localeCompare('B')); // 0
console.log('C'.localeCompare('B')); // 1Linguagem de código: JavaScript ( javascript )7) Padrões correspondentes
O match()método permite combinar uma string com uma expressão regular especificada e obter uma matriz de resultados.
O match()método retorna nulo se não encontrar nenhuma correspondência. Caso contrário, ele retorna uma matriz contendo a correspondência inteira e quaisquer resultados correspondentes de captura de parênteses.
Se o sinalizador global ( g) não estiver definido, o elemento zero da matriz conterá a correspondência inteira. Aqui está um exemplo:
let expression = '1 + 2 = 3';
let matches = expression.match(/\d+/);
console.log(matches[0]); // "1"Linguagem de código: JavaScript ( javascript )Saída:
1Neste exemplo, o padrão corresponde a qualquer número na expressionstring.
Caso o sinalizador global ( g) esteja definido, os elementos da matriz de resultados contêm todas as correspondências da seguinte forma:
let expression = '1 + 2 = 3';
let matches = expression.match(/\d+/g);
for (const match of matches) {
console.log(match);
}Linguagem de código: JavaScript ( javascript )Saída:
1
2
3Neste exemplo, a matchesmatriz contém todas as correspondências, incluindo 1, 2e 3na expressionstring.
Se você só precisa descobrir se uma string corresponde a uma expressão regular, use o search()método.
Semelhante ao match()método, o search()método aceita uma expressão regular e retorna a posição da string onde a primeira correspondência foi encontrada. Caso nenhuma correspondência seja encontrada, retorna -1.
let str = "This is a test of search()";
let pos = str.search(/is/);
console.log(pos); // 2Linguagem de código: JavaScript ( javascript )8) Substituindo substrings
Para substituir uma substring em uma string, você usa o replace()método.
string.replace(regularExpression, replaceText)Linguagem de código: CSS ( css )O primeiro argumento do replace()método pode ser uma expressão regular ou uma string. Se for uma expressão regular, o replace()método encontrará as correspondências e as substituirá pelo segundo argumento ( replaceText). Caso seja uma string, o replace()método fará uma busca exata e realizará a substituição.
O replace()método retorna uma cópia da string original após fazer as substituições.
O exemplo a seguir ilustra como usar uma expressão regular para substituir thepor a:
let str = "the baby kicks the ball";
// replace "the" with "a"
let newStr = str.replace(/the/g, "a");
console.log(newStr); // "a baby kicks a ball"
console.log(str); // "the baby kicks the ball"Linguagem de código: JavaScript ( javascript )O exemplo a seguir mostra como substituir kicksusando holdso primeiro argumento como uma string literal.
newStr = str.replace('kicks', 'holds');
console.log(newStr); // "the baby holds the ball"Linguagem de código: JavaScript ( javascript )Neste tutorial, você aprendeu sobre o tipo JavaScript String e como manipular strings de maneira eficaz.
