One place for hosting & domains

      dividir

      Cómo indexar, dividir y manipular cadenas en JavaScript


      Introducción

      Una cadena es una secuencia de uno o más caracteres que pueden ser letras, números o símbolos. Se puede acceder a cada carácter de una cadena de JavaScript mediante un número de índice, y todas las cadenas tienen métodos y propiedades disponibles para ellas.

      En este tutorial, aprenderemos la diferencia entre las primitivas de cadena y el objeto String, cómo indexar cadenas, cómo acceder a los caracteres de una cadena, y las propiedades y métodos comunes utilizados en las cadenas.

      Las primitivas de cadena y los objetos String

      Primero, aclararemos los dos tipos de cadenas. JavaScript distingue entre la primitiva de cadena, un tipo de datos inmutable, y el objeto String.

      Para probar la diferencia entre ambos tipos, inicializaremos una primitiva de cadena y un objeto de cadena.

      // Initializing a new string primitive
      const stringPrimitive = "A new string.";
      
      // Initializing a new String object
      const stringObject = new String("A new string.");  
      

      Podemos usar el operador typeof para determinar el tipo de un valor. En el primer ejemplo, simplemente asignamos una cadena a una variable.

      typeof stringPrimitive;
      

      Output

      string

      En el segundo ejemplo, usamos new String() para crear un objeto de cadena y asignarlo a una variable.

      typeof stringObject;
      

      Output

      object

      La mayoría de veces se crearán primitivas de cadena. JavaScript puede acceder y usar las propiedades y los métodos incorporados de la envoltura de objetos String sin cambiar realmente la primitiva de cadena que se creó en un objeto.

      Aunque este concepto es un poco desafiante al principio, debe tener en cuenta la diferencia entre primitivos y objetos. Esencialmente, hay métodos y propiedades disponibles para todas las cadenas, y en segundo plano JavaScript realizará una conversión a objeto y de vuelta a primitivo cada vez que se invoque un método o propiedad.

      Cómo se indexan las cadenas

      Cada uno de los caracteres de una cadena corresponden a un número de índice, comenzando por 0.

      Para demostrarlo, crearemos una cadena con el 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

      El primer carácter de la cadena es H, que corresponde al índice 0. El último carácter es ?, que corresponde a 11. Los caracteres de espacio en blanco también tienen un índice, el 3 y 7.

      El hecho de poder acceder a todos los caracteres de una cadena nos permite trabajar con ella y manipularla de varias maneras.

      Acceso a los caracteres

      Vamos a demostrar cómo acceder a los caracteres e índices con la cadena How are you? .

      "How are you?";
      

      Utilizando la notación de corchetes, podemos acceder a cualquier carácter de la cadena.

      "How are you?"[5];
      

      Output

      r

      También podemos usar el método charAt() para devolver el carácter usando el número de índice como parámetro.

      "How are you?".charAt(5);
      

      Output

      r

      De manera alternativa, podemos usar indexOf() para devolver el número de índice por la primera instancia de un carácter.

      "How are you?".indexOf("o");
      

      Output

      1

      Aunque “o” aparece dos veces en la cadena How are you?, indexOf() obtendrá la primera instancia.

      lastIndexOf() se utiliza para encontrar la última instancia.

      "How are you?".lastIndexOf("o");
      

      Output

      9

      Para ambos métodos, también puede buscar varios caracteres en la cadena. Devolverá el número de índice del primer carácter de la instancia.

      "How are you?".indexOf("are");
      

      Output

      4

      Por otro lado, el método slice() devuelve los caracteres entre dos números de índice. El primer parámetro será el número de índice de inicio y el segundo parámetro será el número de índice donde debe terminar.

      "How are you?".slice(8, 11);
      

      Output

      you

      Tenga en cuenta que 11 es ?, pero ? no forma parte del resultado devuelto. slice() devolverá lo que está en el medio, pero no incluirá el último parámetro.

      Si no se incluye un segundo parámetro, slice() devolverá todo en el resultado, desde el parámetro hasta el final de la cadena.

      "How are you?".slice(8);
      

      Output

      you?

      Para resumir, charAt() y slice() ayudarán a devolver valores de cadena basados en números de índice, e indexOf() y lastIndexOf() harán lo opuesto y devolverán los números de índice basados en los caracteres de cadena proporcionados.

      Búsqueda de la longitud de una cadena

      Al usar la propiedad length, podemos devolver el número de caracteres en una cadena.

      "How are you?".length;
      

      Output

      12

      Recuerde que la propiedad length devuelve el número real de caracteres comenzando por 1, que salen en 12, no el número de índice final, que comienza en 0 y termina en 11.

      Conversión a mayúsculas o minúsculas

      Los dos métodos incorporados toUpperCase() y toLowerCase() son formas útiles de dar formato al texto y hacer comparaciones textuales en JavaScript.

      toUpperCase() convertirá todos los caracteres en mayúsculas.

      "How are you?".toUpperCase();
      

      Output

      HOW ARE YOU?

      toLowerCase() convertirá todos los caracteres en minúsculas.

      "How are you?".toLowerCase();
      

      Output

      how are you?

      Estos dos métodos para crear formato no requieren parámetros adicionales.

      Cabe destacar que estos métodos no modifican la cadena original.

      División de cadenas

      JavaScript tiene un método muy útil para dividir una cadena por un carácter y crear una nueva matriz desde las secciones. Usaremos el método split() para separar la matriz por un carácter de espacio en blanco, representado por " ".

      const originalString = "How are you?";
      
      // Split string by whitespace character
      const splitString = originalString.split(" ");
      
      console.log(splitString);
      

      Output

      [ 'How', 'are', 'you?' ]

      Ahora que tenemos una nueva matriz en la variable splitString, podemos acceder a cada sección con un número de índice.

      splitString[1];
      

      Output

      are

      Si se proporciona un parámetro vacío, split() creará una matriz separada por comas con cada carácter de la cadena.

      Al dividir cadenas, se puede determinar la cantidad de palabras en una frase y usar el método como una forma de determinar los nombres y apellidos de las personas, por ejemplo.

      Recorte de espacios en blanco

      El método trim() de JavaScript elimina los espacios en blanco de los dos extremos de una cadena, pero no en el medio de la misma. Los espacios en blanco pueden ser tabulaciones o espacios.

      const tooMuchWhitespace = "     How are you?     ";
      
      const trimmed = tooMuchWhitespace.trim();
      
      console.log(trimmed);
      

      Output

      How are you?

      El método trim() es una forma sencilla de realizar la tarea común de eliminar el exceso de espacios en blanco.

      Búsqueda y sustitución de valores de cadenas

      Podemos buscar un valor en una cadena y sustituirlo por un nuevo valor usando el método replace(). El primer parámetro será el valor que a encontrar, y el segundo parámetro será el valor a sustituir.

      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?

      Además de poder sustituir un valor con otro valor de cadena, también podemos usar las Expresiones regulares para hacer que replace() sea más potente. Por ejemplo, replace() solo afecta al primer valor, pero podemos usar el indicador (global) g para capturar todas las instancias de un valor y el indicador (que no distingue entre mayúsculas y minúsculas) i para ignorar las mayúsculas y 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.

      Esta es una tarea muy común que utiliza las Expresiones regulares. Visite Regexr para practicar más ejemplos de expresiones regulares (RegEx).

      Conclusión

      Las cadenas son uno de los tipos de datos usados con mayor frecuencia, y hay muchas cosas que podemos hacer con ellas.

      En este tutorial, aprendimos la diferencia entre una primitiva de cadena y un objeto String, cómo indexar las cadenas y cómo utilizar los métodos y propiedades incorporados de las cadenas para acceder a los caracteres, dar formato al texto y las cadenas (encontrando) formateando, y encontrar y reemplazar valores.

      Para una descripción más general sobre las cadenas, consulte el tutorial “Cómo trabajar con cadenas en JavaScript”.



      Source link

      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