One place for hosting & domains

      JavaScript

      Using Alpine.js to Enhance Your JavaScript


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      Date Time RSVP
      June 16, 2021 11:00 a.m.–12:00 p.m. ET / 3:00–4:00 p.m. GMT

      About the Talk

      Alpine.js is a minimal but powerful framework for building smart JavaScript applications.

      What You’ll Learn

      • How to use Alpine.js
      • How Alpine.js is different than React or Vue
      • How to build a JavaScript application with less code

      This Talk Is Designed For

      • JavaScript developers
      • Laravel developers that want an easy way to add JavaScript functionality



      Source link

      So indizieren, teilen und bearbeiten Sie Zeichenfolgen in JavaScript


      Einführung

      Eine Zeichenfolge ist eine Sequenz von einem oder mehreren Zeichen, die aus Buchstaben, Zahlen oder Symbolen bestehen kann. Auf jedes Zeichen in einer JavaScript-Zeichenfolge kann über eine Indexnummer zugegriffen werden, und allen Zeichenfolgen stehen Methoden und Eigenschaften zur Verfügung.

      In diesem Tutorial lernen wir den Unterschied zwischen Zeichenfolgenprimitiven und dem Zeichenfolgenobjekt kennen, wie Zeichenfolgen indiziert werden, wie auf Zeichen in einer Zeichenfolge zugegriffen wird und welche allgemeinen Eigenschaften und Methoden für Zeichenfolgen verwendet werden.

      Zeichenfolgenprimitive und Zeichenfolgenobjekte

      Zuerst werden wir die beiden Arten von Zeichenfolgen klären. JavaScript unterscheidet zwischen der Zeichenfolgenprimitive, einem unveränderlichen Datentyp und dem Zeichenfolgenobjekt.

      Um den Unterschied zwischen den beiden zu testen, initialisieren wir eine Zeichenfolgenprimitive und ein Zeichenfolgenobjekt.

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

      Wir können den Operator typeof verwenden, um den Typ eines Werts zu bestimmen. Im ersten Beispiel haben wir einer Variable einfach eine Zeichenfolge zugewiesen.

      typeof stringPrimitive
      

      Output

      string

      Im zweiten Beispiel haben wir eine neue Zeichenfolge() verwendet, um ein Zeichenfolgenobjekt zu erstellen und einer Variable zuzuweisen.

      typeof stringObject
      

      Output

      object

      Meistens erstellen Sie Zeichenfolgenprimitive. JavaScript kann auf die integrierten Eigenschaften und Methoden des Zeichenfolgen“objekt-Wrappers zugreifen und diese verwenden, ohne die von Ihnen erstellte Zeichenfolgenprimitive tatsächlich in ein Objekt zu ändern.

      Während dieses Konzepts zunächst etwas anspruchsvoll ist, sollten Sie sich der Unterscheidung zwischen Primitive und Objekt bewusst sein. Im Wesentlichen stehen allen Zeichenfolgen Methoden und Eigenschaften zur Verfügung. Im Hintergrund führt JavaScript bei jedem Aufruf einer Methode oder Eigenschaft eine Konvertierung in ein Objekt und zurück in eine Primitive durch.

      Wie Zeichenfolgen indiziert sind

      Jedes der Zeichen in einer Zeichenfolge entspricht einer Indexnummer, beginnend mit 0.

      Zur Demonstration erstellen wir eine Zeichenfolge mit dem Wert How are you?.

      H o w a r e y o u ?
      0 1 2 3 4 5 6 7 8 9 10 11

      Das erste Zeichen in der Zeichenfolge ist H, was dem Index 0 entspricht. Das letzte Zeichen ist ?, was 11 entspricht. Die Leerzeichen haben auch einen Index bei 3 und 7.

      Wenn wir auf jedes Zeichen in einer Zeichenfolge zugreifen können, haben wir verschiedene Möglichkeiten, mit Zeichenfolgen zu arbeiten und diese zu bearbeiten.

      Zugriff auf Zeichen

      Wir zeigen Ihnen, wie Sie auf Zeichen und Indizes mit der Zeichenfolge How are you? zugreifen können.

      'How are you?'
      
      

      Mit der quadratischen Klammernotation können wir auf jedes Zeichen in der Zeichenfolge zugreifen.

      'How are you?'[5]
      

      Output

      r

      Wir können auch die charAt()-Methode verwenden, um das Zeichen mit der Indexnummer als Parameter zurückzugeben.

      'How are you?'.charAt(5)
      

      Output

      r

      Alternativ können wir indexOf() verwenden, um die Indexnummer durch die erste Instanz eines Zeichens zurückzugeben.

      'How are you?'.indexOf('o')
      

      Output

      1

      Obwohl „o“ zweimal in der Zeichenfolge How are you? erscheint, erhält indexOf() die erste Instanz.

      lastIndexOf() wird verwendet, um die letzte Instanz zu finden.

      'How are you?'.lastIndexOf('o')
      

      Output

      9

      Für beide Methoden können Sie auch nach mehreren Zeichen in der Zeichenfolge suchen. Sie gibt die Indexnummer des ersten Zeichens in der Instanz zurück.

      'How are you?'.indexOf('are')
      

      Output

      4

      Die slice()-Methode hingegen gibt die Zeichen zwischen zwei Indexnummern zurück. Der erste Parameter ist die Startindexnummer und der zweite Parameter ist die Indexnummer, an der sie enden soll.

      'How are you?'.slice(8, 11)
      

      Output

      you

      Beachten Sie, dass 11 ? ist, aber ? ist nicht Teil der zurückgegebenen Ausgabe. slice() gibt zurück, was zwischen dem letzten Parameter liegt, schließt ihn jedoch nicht ein.

      Wenn ein zweiter Parameter nicht enthalten ist, gibt slice() alles vom Parameter bis zum Ende der Zeichenfolge zurück.

      'How are you?'.slice(8)
      

      Output

      you?

      Zusammenfassend helfen charAt() und slice() dabei, Zeichenfolgenwerte basierend auf Indexnummern zurückzugeben, und indexOf() und lastIndexOf() machen das Gegenteil und geben Indexnummern basierend auf den angegebenen Zeichenfolgen zurück.

      Die Länge einer Zeichenfolge finden

      Mit der Eigenschaft length können wir die Anzahl der Zeichen in einer Zeichenfolge zurückgeben.

      'How are you?'.length
      

      Output

      12

      Denken Sie daran, dass die Eigenschaft length die tatsächliche Anzahl von Zeichen zurückgibt, die mit 1 beginnen, was 12 ergibt, und nicht die endgültige Indexnummer, die bei 0 beginnt und bei 11 endet.

      Konvertieren in Groß- oder Kleinschreibung

      Die beiden integrierten Methoden toUpperCase() und toLowerCase() sind hilfreiche Möglichkeiten, um Text zu formatieren und Textvergleiche in JavaScript zu erstellen.

      toUpperCase() konvertiert alle Zeichen in Großbuchstaben.

      'How are you?'.toUpperCase()
      

      Output

      HOW ARE YOU?

      toLowerCase() konvertiert alle Zeichen in Kleinbuchstaben.

      'How are you?'.toLowerCase()
      

      Output

      how are you?

      Diese beiden Formatierungsmethoden nehmen keine zusätzlichen Parameter.

      Es lohnt sich, zu beachten, dass diese Methoden die ursprüngliche Zeichenfolge nicht ändern.

      Zeichenfolgen teilen

      JavaScript bietet eine sehr nützliche Methode, um eine Zeichenfolge durch ein Zeichen zu teilen und aus den Abschnitten eine neue Anordnung zu erstellen. Wir verwenden die split()-Methode, um die Anordnung durch ein Leerzeichen zu trennen, das durch „“ dargestellt ist.

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

      Output

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

      Nachdem wir eine neue Anordnung in der splitString-Variablen haben, können wir auf jeden Abschnitt mit einer Indexnummer zugreifen.

      splitString[1]
      

      Output

      are

      Wenn ein leerer Parameter angegeben ist, erstellt split() eine durch Komma getrennte Anordnung mit jedem Zeichen in der Zeichenfolge.

      Durch die Trennung von Zeichenfolgen können Sie bestimmen, wie viele Wörter sich in einer Satz befinden und die Methode als Möglichkeit verwenden, um beispielsweise die Vornamen und die Nachnamen von Leuten zu bestimmen.

      Leerzeichen kürzen

      Die JavaScript-Methode trim() entfernt Leerzeichen an beiden Enden einer Zeichenfolge, jedoch nicht irgendwo dazwischen. Leerzeichen können Tabulatoren oder Leerzeichen sein.

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

      Output

      How are you?

      Die trim()-Methode ist eine einfache Möglichkeit, die gemeinsame Aufgabe auszuführen, um überschüssige Leerzeichen zu entfernen.

      Zeichenfolgenwerte suchen und ersetzen

      Wir können eine Zeichenfolge nach einem Wert durchsuchen und ihn mithilfe der replace() -Methode durch einen neuen Wert ersetzen. Der erste Parameter ist der zu findende Wert und der zweite Parameter ist der Wert, der ihn ersetzen kann.

      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?

      Wir können nicht nur einen Wert durch einen anderen Zeichenfolgenwert ersetzen, sondern auch reguläre Ausdrücke verwenden, um replace() leistungsfähiger zu machen. Zum Beispiel wirkt sich replace() nur auf den ersten Wert aus, aber wir können das Flag g (global) verwenden, um alle Instanzen eines Werts abzufangen, und das Flag i (ohne Berücksichtigung der Groß- und Kleinschreibung), um Groß- und Kleinschreibung zu ignorieren.

      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.

      Dies ist eine sehr häufige Aufgabe, die reguläre Ausdrücke verwendet. Besuchen Sie Regexr, um weitere Beispiele für RegEx zu üben.

      Zusammenfassung

      Zeichenfolgen sind einer der am häufigsten verwendeten Datentypen, und es gibt eine Menge, was wir mit ihnen tun können.

      In diesem Tutorial haben wir den Unterschied zwischen der Zeichenfolgenprimitive und dem Zeichenfolgenobjekt kennengelernt, wie Zeichenfolgen indiziert werden und wie die integrierten Methoden und Eigenschaften von Zeichenfolgen verwendet werden, um auf Zeichen zuzugreifen, Text zu formatieren und Werte zu suchen und zu ersetzen.

      Eine allgemeinere Übersicht über Zeichenfolgen finden Sie im Lernprogramm „So arbeiten Sie mit Zeichenfolgen in JavaScript“.



      Source link

      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