Vorbereitung auf ECMascript 6: Neue String -Methoden - String.Prototype.*

In meinem vorherigen Artikel über ES6 -Array -Methoden habe ich die neuen Methoden in ECMascript 6 eingeführt, die mit dem Array -Typ arbeiten. In diesem Tutorial lernen Sie neue ES6 -Methoden kennen, die mit Strings funktionieren: String.Prototype.*

Wir werden mehrere Beispiele entwickeln und die für sie verfügbaren Polyfills erwähnen. Denken Sie daran, dass Sie ES6-Shim von Paul Miller verwenden können, wenn Sie sie alle mit einer einzigen Bibliothek ausfehlen möchten.

Key Takeaways

• ES6 führt mehrere neue Methoden für die String -Manipulation ein, einschließlich String.Prototype.startswith (), String.Prototyp.endswith (), String.Prototype.includes (), String.Prototype.Repeat () und String.raw (RAW () ). Diese Methoden bieten einfachere und effizientere Möglichkeiten, um zu überprüfen, ob eine Zeichenfolge mit einem bestimmten Substring beginnt oder endet. Wenn eine Zeichenfolge ein bestimmtes Substring enthält, um eine bestimmte Anzahl von Male zu wiederholen und Vorlagenzustände zu verarbeiten.
• the String.Prototype.StartSwith () und String.Prototype.endswith () In ES6 können Sie überprüfen, ob eine Zeichenfolge mit einem bestimmten Substring beginnt oder endet. Beide akzeptieren einen Substring und eine Position als Parameter und geben wahr oder falsch zurück, je nachdem, ob die Zeichenfolge mit dem bereitgestellten Substring startet oder endet.
• Die Methode String.Prototype.includes () in ES6 gibt true zurück, wenn eine Zeichenfolge in einer anderen Zeichenfolge enthalten ist, unabhängig von der Position. Es akzeptiert die gleichen Parameter wie die Methoden startswith () und endswith ().
• Die Methode String.Prototyp.Repeat () in ES6 gibt eine neue Zeichenfolge zurück, die die ursprüngliche Zeichenfolge enthält, die eine angegebene Anzahl von Zeiten wiederholt. Die Funktion String.raw () ist eine Tag -Funktion von Vorlagenzeichenfolgen, die eine Zeichenfolge kompiliert und die Platzhalter durch bereitgestellte Werte ersetzt.

string.prototype.startswith ()

Eine der am häufigsten verwendeten Funktionen in jeder modernen Programmiersprache ist diejenige, die überprüfen kann, ob eine Zeichenfolge mit einem bestimmten Substring beginnt. Vor ES6 hatte JavaScript keine solche Funktion, was bedeutet, dass Sie es selbst schreiben mussten. Der folgende Code zeigt, wie Entwickler es normalerweise mit der Polyfüllung veranstalteten:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

oder alternativ:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

Diese Snippets sind immer noch gültig, reproduzieren jedoch nicht genau, was die neu verfügbare String.Prototype.StartSwith () -Methode tut. Die neue Methode hat die folgende Syntax:

<span>String.prototype.startsWith(searchString[, position]);
</span>

Sie können sehen, dass es zusätzlich zu einem Substring ein zweites Argument akzeptiert. Der SearchString -Parameter gibt an, dass das Substring, das Sie überprüfen möchten, der Beginn der Zeichenfolge ist. Die Position gibt die Position an, an der die Suche gestartet wird. Der Standardwert der Position beträgt 0. Die Methoden geben true zurück, wenn die Zeichenfolge mit dem bereitgestellten Substring und ansonsten falsch beginnt. Denken Sie daran, dass die Methode von Fall empfindlich ist, also „Hallo“ von „Hallo“.

Eine Beispiel Verwendung dieser Methode ist unten dargestellt:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

Eine Live -Demo des vorherigen Code ist unten angezeigt und auch bei JSBIN verfügbar.

Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, finden Sie eine Polyfill für diese Methode auf der Seite der Methode auf MDN. Eine weitere Polyfill wurde ebenfalls von Mathias Bynens entwickelt.

string.prototype.endswith ()

Zusätzlich zu String.Prototype.StartSwith () führt ECMAScript 6 die methode string.prototype.endswith () ein. Es überprüft, dass eine Zeichenfolge mit einem bestimmten Substring endet. Die unten gezeigte Syntax dieser Methode ist sehr ähnlich zu String.Prototyp.Startswith ():

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

Wie Sie sehen können, akzeptiert diese Methode dieselben Parameter wie string.prototype.startswith () und gibt auch den gleichen Werteyp zurück.

Ein Unterschied besteht darin, dass mit dem Parameter der Position Sie innerhalb der Zeichenfolge suchen können, als ob die Zeichenfolge nur so lang wäre. Mit anderen Worten, wenn wir das String House haben und die Methode mit 'House' nennen. .

Eine Beispiel Verwendung dieser Methode ist unten dargestellt:

<span>String.prototype.startsWith(searchString[, position]);
</span>

Eine lebende Demo des vorherigen Snippets ist unten gezeigt und ist auch bei JSBIN erhältlich.

Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, finden Sie eine Polyfill für diese Methode auf der Seite der Methode auf MDN. Eine weitere Polyfill wurde von Mathias Bynens entwickelt.

string.prototype.includes ()

Während wir über die Überprüfung sprechen, ob eine Zeichenfolge in einer anderen enthalten ist, lassen Sie mich Ihnen die Methode String.Prototype.includes () vorstellen. Es gibt wahr zurück, wenn eine Zeichenfolge in einem anderen enthalten ist, egal wo, und sonst falsch.

seine Syntax ist unten gezeigt:

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

Die Bedeutung der Parameter ist die gleiche wie für String.Prototype.Startswith (), daher werde ich sie nicht wiederholen. Eine Beispiel Verwendung dieser Methode ist unten dargestellt:

<span>String.prototype.endsWith(searchString[, position]);
</span>

Sie finden unten eine Live -Demo und auch wie bei JSBIN.

string.prototype.includes () wird im Knoten und allen modernen Browsern mit Ausnahme von Internet Explorer unterstützt. Wenn Sie ältere Browser unterstützen müssen, wie bei den anderen in diesem Tutorial diskutierten Methoden, finden Sie eine Polyfill, die von Mathias Bynens (dieser Typ weiß, wie man seinen Job macht!) Und ein weiteres im Mozilla -Entwicklernetzwerk.

Hinweis: Bis Version 48 verwendet Firefox den nicht standardmäßigen Namen enthält.

string.prototype.repeat ()

Gehen wir nun zu einer anderen Art von Methode. String.Prototype.Repeat () ist eine Methode, die eine neue Zeichenfolge zurückgibt, die dieselbe Zeichenfolge enthält, die er aufgerufen wurde, aber eine bestimmte Anzahl von Male wiederholt hat. Die Syntax dieser Methode lautet wie folgt:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

Der Parameter der Zeiten gibt an, wie oft die Zeichenfolge wiederholt werden muss. Wenn Sie Null übergeben, erhalten Sie eine leere Zeichenfolge. Wenn Sie eine negative Zahl oder Unendlichkeit übergeben

Eine Beispiel Verwendung dieser Methode ist unten dargestellt:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

Eine Live -Demo des vorherigen Code ist unten angezeigt und ist auch bei JSBIN erhältlich.

Die Methode wird mit Ausnahme des Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, stehen für diese Methode zwei Polyfills zur Verfügung: die von Mathias Bynens entwickelte und andere im Mozilla Developer -Netzwerk.

string.raw ()

Die letzte Methode, die ich in diesem Tutorial behandeln möchte, ist String.raw (). Es ist als

eine Tag -Funktion von Vorlagenzeichenfolgen definiert. Es ist interessant, denn es ist ein Ersatz für Vorlagenbibliotheken, obwohl ich nicht zu 100% sicher bin, dass es genug skalieren kann, um diese Bibliotheken tatsächlich zu ersetzen. Die Idee ist jedoch im Grunde genommen die gleiche, wie wir in Kürze sehen werden. Es ist, eine Zeichenfolge zu kompilieren und jeden Platzhalter durch einen bereitgestellten Wert zu ersetzen.

seine Syntax ist die folgende (beachten Sie die Backticks):

<span>String.prototype.startsWith(searchString[, position]);
</span>

Der Parameter templatestring repräsentiert die Zeichenfolge, die die zu verarbeitende Vorlage enthält.

Um dieses Konzept besser zu verstehen, sehen wir uns ein konkretes Beispiel an:

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

Eine Live -Demo des vorherigen Code ist unten angezeigt und ist auch bei JSBIN erhältlich.

Die Methode wird mit Ausnahme von Opera und Internet Explorer im Knoten und allen modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, können Sie eine Polyfill verwenden, wie diese auf NPM verfügbar.

Schlussfolgerung

In diesem Tutorial haben Sie einige neue Methoden kennengelernt, die in ECMascript 6 eingeführt wurden, die mit Saiten funktionieren. Andere Methoden, die wir nicht abgedeckt haben, sind String.fromCodePoint (), String.Prototype.CodePointat () und String.Prototype.normalize (). Ich hoffe, Sie haben den Artikel genossen und Sie werden unserem Kanal weiterhin folgen, um mehr über ECMascript 6 zu erfahren.

häufig gestellte Fragen zu ES6 -String -Methoden

Was sind die neuen String -Methoden, die in ES6 eingeführt wurden? Dazu gehören Methoden wie StartsWith (), Endswith (), Include (), Repeat () und Vorlagenliterale. Die Methode startsWith () überprüft, ob eine Zeichenfolge mit einer angegebenen Zeichenfolge beginnt, während Endswith () überprüft, ob eine Zeichenfolge mit einer angegebenen Zeichenfolge endet. Die include () -Methoden prüft, ob eine Zeichenfolge eine angegebene Zeichenfolge enthält. Die Wiederholung () -Methode wiederholt eine Zeichenfolge, eine angegebene Anzahl. Mit Vorlagen -Literalen können Sie Ausdrücke in String -Literale mit $ {} syntax einbetten.

Wie funktioniert die Startswith () -Methode in ES6? Es gibt true zurück, wenn die Zeichenfolge mit der angegebenen Zeichenfolge beginnt und ansonsten falsch ist. Die Syntax ist Str.Startswith (SearchString [, Position]). Die Suche ist die Zeichen, nach denen zu Beginn von Str. Die optionale Position ist die Position in der Zeichenfolge, in der die Suche gestartet wird. Wenn ausgelassen wird, beginnt die Suche am Anfang der Zeichenfolge. mit den Zeichen einer angegebenen Zeichenfolge. Es gibt True zurück, wenn die Zeichenfolge mit der angegebenen Zeichenfolge endet und sonst falsch ist. Die Syntax ist Str.endswith (SearchString [, Länge]). Die Suche ist die Zeichen, nach denen am Ende von Str. Die optionale Länge ist die Länge der zu durchsuchenden Zeichenfolge. Wenn die Länge der Zeichenfolge ausgelassen wird, wird

Wie funktioniert die Include () -Methode in ES6? In einer anderen Zeichenfolge gefunden. Es gibt true zurück, wenn die Zeichenfolge die angegebene Zeichenfolge und ansonsten falsch enthält. Die Syntax ist Str.includes (SearchString [, Position]). Der Suchstring ist der String, nach dem Sie suchen müssen. Die optionale Position ist die Position innerhalb der Zeichenfolge, an der Sie mit der Suche beginnen müssen. Wenn ausgelassen wird, beginnt die Suche am Anfang der Zeichenfolge. Die angegebene Anzahl der Kopien der Zeichenfolge, auf der sie genannt wurde, verkettete sich zusammen. Die Syntax ist Str. Repeat (Count), wobei die Anzahl der Häufigkeit der Zeichenfolge ist, um die Zeichenfolge zu wiederholen. Die Anzahl muss zwischen 0 und weniger als unendlich liegen und keine negative Zahl sein. Mit ihnen können Sie Multi-Line-Zeichenfolgen und String-Interpolationsfunktionen verwenden. Sie sind durch den Backtick () -Scharakter anstelle von doppelten oder einzelnen Zitaten eingeschlossen. Vorlagenliterale können Platzhalter enthalten, die durch das Dollar -Zeichen und die lockigen Klammern angegeben sind ($ {Ausdruck}). Die Ausdrücke in den Platzhaltern und der Text zwischen ihnen werden an eine Funktion übergeben. ) Methoden werden verwendet, um zu überprüfen, ob eine Zeichenfolge eine angegebene Zeichenfolge enthält. Es gibt jedoch einen wesentlichen Unterschied zwischen ihnen. Die include () -Methode gibt einen booleschen Wert zurück - true, wenn die Zeichenfolge die angegebene Zeichenfolge und ansonsten falsch enthält. Andererseits gibt die Indexof () -Methode den Index des ersten Auftretens der angegebenen Zeichenfolge zurück oder -1, wenn die Zeichenfolge nicht gefunden wird.

Kann ich ES6 -String -Methoden in allen Browsern verwenden?

Die meisten modernen Browser unterstützen ES6 -String -Methoden. Für ältere Browser, die ES6 nicht unterstützen, müssen Sie jedoch einen Transpiler wie Babel verwenden, um den ES6 -Code in ES5 umzuwandeln, was häufiger unterstützt wird.

Wie kann ich ES6 -String -Methoden mit Arrays verwenden? 🎜>

Einige ES6 -String -Methoden können mit Arrays verwendet werden. Beispielsweise kann die include () -Methode verwendet werden, um festzustellen, ob ein Array ein bestimmtes Element enthält. Allerdings sind nicht alle String -Methoden für Arrays anwendbar. Es ist wichtig, die spezifische Verwendung und Einschränkungen jeder Methode zu verstehen. Mit markierten Vorlagen können Sie Vorlagenliterale mit einer Funktion analysieren. Das erste Argument einer Tag -Funktion enthält ein Array von Stringwerten. Die verbleibenden Argumente beziehen sich auf die Ausdrücke. Die Tag -Funktion kann dann Operationen zu diesen Argumenten ausführen und manipulierte Zeichenfolge zurückgeben.

Das obige ist der detaillierte Inhalt vonVorbereitung auf ECMascript 6: Neue String -Methoden - String.Prototype.*. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!