JS ES neue Funktionen Vorlagenzeichenfolge

JS ES neue Funktionen Vorlagenzeichenfolge

1. Was ist eine Vorlagenzeichenfolge?

Template Template String ist eine erweiterte Version von String, die Backticks (```) verwendet, um doppelte und einfache Anführungszeichen in Spectrum String zu ersetzen. Es kann als normale Zeichenfolge verwendet werden oder zum Definieren mehrzeiliger Zeichenfolgen oder zum Einbetten von Variablen in Zeichenfolgen.

Die allgemeine Verwendung ist wie folgt:

// Ein mit dem Symbol ` umschlossener String wird als Template-String bezeichnet let str = `this is str`
console.log(typeof str, str); //Zeichenfolge, dies ist str

2. Mehrzeilige Vorlagenzeichenfolgen

Der Unterschied zwischen den von ECMAScript 2015 bereitgestellten Vorlagezeichenfolgen und normalen Zeichenfolgen besteht darin, dass alle Leerzeichen, Einrückungen und Zeilenumbrüche in den Vorlagezeichenfolgen erhalten bleiben.

Der Beispielcode lautet wie folgt:

lass str = `dies 
      ist str`
console.log(Typ von str, str);
/*
  bespannen Sie dies 
      ist str
*/


2.1 Template-Strings mit Ausdrücken

Vorlagenzeichenfolgen unterstützen eingebettete Ausdrücke. Die Syntaxstruktur ist wie folgt:

`${Ausdruck}`


Der Beispielcode lautet wie folgt:

let str1 = `das ist str1`
let str2 = `das ist str2`
// Schreiben Sie den Ausdruck einfach in ${} let and = `${str1} and ${str2}`
console.log(und); // das ist str1 und das ist str2


3. Markierte Vorlagenzeichenfolgen

Die Funktionen von Vorlagenzeichenfolgen sind nicht auf die oben genannten beschränkt. Darauf kann der Name einer Funktion folgen, die zum Verarbeiten der Vorlagenzeichenfolge aufgerufen wird. Dies wird als getaggte tagged template bezeichnet.

lass str = 'str'
console.log `das ist ${str}`;
// Entspricht console.log(['this is ', ''], str);


Tag-Vorlagen sind keine Vorlagen im eigentlichen Sinne, sondern eine spezielle Form von Funktionsaufrufen. Das „Label“ bezieht sich auf die Funktion und die darauf folgende Vorlagenzeichenfolge sind ihre Parameter.

4. Rohe Saiten

Im ersten Argument der Tag-Funktion gibt es ein spezielles Attribut raw , mit dem auf den Originalstring des Vorlagestrings zugegriffen werden kann, ohne dass die Sonderzeichen ersetzt werden.

Der Beispielcode lautet wie folgt:

/*
  Rohzeichenfolgen werden in getaggten Vorlagenzeichenfolgen verwendet. Im ersten Parameter der Funktion befindet sich ein Rohattribut, mit dem die Rohzeichenfolge der Zeichenfolge abgerufen werden kann.
  * Die sogenannte Originalzeichenfolge bezieht sich auf den Inhalt zum Zeitpunkt der Definition der Vorlagenzeichenfolge, nicht auf den Inhalt nach der Verarbeitung */
Funktion Tag(Zeichenfolge) {
  Konsole.log(Zeichenfolge.raw[0]);
}
Tag `String-Testzeile1 \n String-Testzeile2` // String-Testzeile1 \n String-Testzeile2


Darüber hinaus ist die Verwendung String.raw() zum Generieren einer Rohzeichenfolge dasselbe, als ob Sie diese mit der Standardvorlagenfunktion und der Zeichenfolgenverkettung erstellen würden.

Der Beispielcode lautet wie folgt:

let str = String.raw `Hi\n${2+3}!`;
//, das Zeichen nach Hi ist kein Zeilenumbruchzeichen, \ und n sind zwei verschiedene Zeichen console.log(str); // Hi\n5!


5. Bestimmen Sie, ob eine Zeichenfolge enthalten ist

5.1 include()-Methode

Mit der Methode includes() wird ermittelt, ob ein String in einem anderen String enthalten ist. Je nach Ergebnis der Ermittlung gibt sie true oder false zurück.

Die Syntaxstruktur ist wie folgt:

str.includes(Suchzeichenfolge[, Position])


Parameterbeschreibung:

  • searchString : Die Zeichenfolge, nach der innerhalb dieser Zeichenfolge gesucht werden soll.
  • position : (optional) Die Indexposition in der aktuellen Zeichenfolge, ab der mit der Suche nach der Teilzeichenfolge begonnen werden soll. Der Standardwert ist 0.

Es ist zu beachten, dass bei der Methode „includes()“ zwischen Groß- und Kleinschreibung unterschieden wird.

Der Beispielcode lautet wie folgt:

sei str = "abcdef";
console.log(str.includes('c')); // wahr
console.log(str.includes('d')); // wahr
console.log(str.includes('z')); // falsch
console.log(str.includes('A')); // falsch


Die Methode includes() von ECMAScript 2015 unterscheidet zwischen Groß- und Kleinschreibung. Jetzt erweitern wir sie so, dass sie nicht mehr zwischen Groß- und Kleinschreibung unterscheidet.

Der Beispielcode lautet wie folgt:

String.prototype.MyIncludes = Funktion (searchStr, Index = 0) {
  // Alle zu beurteilenden Strings in Kleinbuchstaben ändern let str = this.toLowerCase()
  //Ändern Sie die übergebene Zeichenfolge in Kleinbuchstaben searchStr = searchStr.toLowerCase();
  returniere str.includes(searchStr, index)
}
sei str = "abcdef";
console.log(str.MyIncludes('c')); // wahr
console.log(str.MyIncludes('d')); // wahr
console.log(str.MyIncludes('z')); // falsch
console.log(str.MyIncludes('A')); // wahr


5.2startsWith()-Methode

Mit der Methode startsWith() wird ermittelt, ob die aktuelle Zeichenfolge mit einer anderen gegebenen Teilzeichenfolge beginnt, und basierend auf dem Beurteilungsergebnis true oder false zurückgegeben.

Die Syntaxstruktur ist wie folgt:

str.startsWith(Suchstring[, Position])


Parameterbeschreibung:

  • searchString : Die Zeichenfolge, nach der innerhalb dieser Zeichenfolge gesucht werden soll.
  • position : (optional) Die Indexposition in der aktuellen Zeichenfolge, ab der mit der Suche nach der Teilzeichenfolge begonnen werden soll. Der Standardwert ist 0.

Es ist zu beachten, dass bei der Methode startsWith() zwischen Groß- und Kleinschreibung unterschieden wird.

Der Beispielcode lautet wie folgt:

sei str = "abcdef";

/*
  * Die Methode startsWith() wird verwendet, um zu bestimmen, ob die aktuelle Zeichenfolge mit einer anderen gegebenen Teilzeichenfolge beginnt, und gibt basierend auf dem Bestimmungsergebnis „true“ oder „false“ zurück.
  * str.startsWith(Suchstring[, Position])
    Parameterbeschreibung searchString: Die Zeichenfolge, nach der in dieser Zeichenfolge gesucht werden soll. 
      Position: (optional) Die Indexposition in der aktuellen Zeichenfolge, ab der mit der Suche nach der Teilzeichenfolge begonnen werden soll. Der Standardwert ist 0.
  !Es ist erwähnenswert, dass bei der Methode startsWith() zwischen Groß- und Kleinschreibung unterschieden wird.
*/
console.log(str.startsWith('a')); // wahr
console.log(str.startsWith('c', 2)); // wahr
console.log(str.startsWith('c')); // flase


5.3 endsWith()-Methode

Die Methode endsWith() wird verwendet, um zu bestimmen, ob die aktuelle Zeichenfolge mit einer anderen gegebenen Teilzeichenfolge „endet“, und gibt basierend auf dem Beurteilungsergebnis true oder false zurück.

Die Syntaxstruktur ist wie folgt:

str.endsWith(Suchstring[, Position])


Parameterbeschreibung:

  • searchString : Die Zeichenfolge, nach der innerhalb dieser Zeichenfolge gesucht werden soll.
  • position : (optional) Die Indexposition in der aktuellen Zeichenfolge, ab der mit der Suche nach der Teilzeichenfolge begonnen werden soll. Der Standardwert ist 0.

Es ist erwähnenswert, dass bei der Methode endsWith() zwischen Groß- und Kleinschreibung unterschieden wird.

Der Beispielcode lautet wie folgt:

sei str = "abcdef";

console.log(str.endsWith('f')); // wahr
console.log(str.endsWith('c', 3)); // wahr
console.log(str.endsWith('c')); // flase


Die folgenden beiden Methoden können eine Methode ohne Berücksichtigung der Groß- und Kleinschreibung selbst erweitern.

Dies ist das Ende dieses Artikels über die neue Funktion der JS ES-Vorlagenzeichenfolge. Weitere relevante Inhalte zu ES-Vorlagenzeichenfolgen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der Vorlagenzeichenfolgen in JavaScript ES6

<<:  Detaillierter Prozess zur Installation des Docker-Plugins in IntelliJ IDEA (Version 2018)

>>:  Fügen Sie Ihrer Website mit Google Web Fonts unbegrenzt viele Schriftarten hinzu

Artikel empfehlen

CSS setzt die Höhe des Box-Containers (div) immer auf 100 %

Vorwort Manchmal muss die Höhe eines Box-Containe...

Zusammenfassung von fünf Befehlen zum Überprüfen des Swap-Speichers in Linux

Vorwort Unter Linux können zwei Arten von Swap-Sp...

Details zur JS-Array-Deduplizierung

Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...

Lösen Sie das Problem der unsicheren Docker x509-Registrierung

Nach der Installation von Docker trat beim Versuc...

Allgemeine Datumsvergleichs- und Berechnungsfunktionen in MySQL

Implementierung des Zeitvergleichs in MySql unix_...

Vorteile von MySQL-Abdeckungsindizes

Ein allgemeiner Vorschlag besteht darin, Indizes ...

Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript

Inhaltsverzeichnis Vorwort Das Prinzip der asynch...

MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux

Vorwort: Vor Kurzem werde ich mit meinen Partnern...