One place for hosting & domains

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



      Source link