Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der hochfrequenten Nutzung von ES6-String-Erweiterungen

PHP中文网
Freigeben: 2017-06-19 17:28:42
Original
1695 Leute haben es durchsucht

ES6 fügt eine Traverser-Schnittstelle für Strings hinzu, sodass Strings von for...of-Schleifen durchlaufen werden können.

for (let codePoint of 'foo') {

  console.log(codePoint)}

// "f"// "o"// "o"
Nach dem Login kopieren

 

1.1 Beispiel: Durchqueren eines JSONDaten

 function lettest()

        {

              var jsongs = {

                    "result": [

                        { "YDFLAG": "1", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "萝卜丝包", "YDRQ": "[2,1]", "PIC_ID": "12918", "SPDJ": "5", "YDBID": "12919", "NUM": "1", "SPJBXX_ID": "12913" },

                        { "YDFLAG": "2", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "肉包", "YDRQ": "[5]", "PIC_ID": "12911", "SPDJ": "5", "YDBID": "12912", "NUM": "2", "SPJBXX_ID": "12907" },

                        { "YDFLAG": "3", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "馒头", "YDRQ": "[4]", "PIC_ID": "12905", "SPDJ": "3", "YDBID": "12906", "NUM": "3", "SPJBXX_ID": "12900" },

                        { "YDFLAG": "4", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "菜包", "YDRQ": "[2,3]", "PIC_ID": "12889", "SPDJ": "4", "YDBID": "12890", "NUM": "4", "SPJBXX_ID": "12884" }

                    ], "signToken": "/v1VqtzUE01JnOFJlHwnXu/IMKsjHL820hMdDHobFJPaE4R8D/VY3Q==", "allNum": "4"

                };

            for (var i of jsongs.result) {

              console.log(i.SPMC);

            }

        //商品名称:萝卜丝包,YDFLAG:1

// 商品名称:肉包,YDFLAG:2

// 商品名称:馒头,YDFLAG:3

// 商品名称:菜包,YDFLAG:4
Nach dem Login kopieren

 

}

Das obige Beispiel verwenden wir oft. Früher haben wir Schleifen wie for i++ verwendet, um Daten zu erhalten, aber jetzt können wir for of direkt verwenden Um die Arbeitsbelastung zu reduzieren und die Arbeitseffizienz zu verbessern

1.2>includes(), getsWith(), endWith( )

Traditionell verfügt JavaScript nur über die Methode indexOf, mit der ermittelt werden kann, ob eine Zeichenfolge in einer anderen Zeichenfolge enthalten ist. ES6 bietet drei neue Methoden.

  • includes(): Gibt einen booleschen Wert zurück, der angibt, ob die Parameterzeichenfolge gefunden wurde.

  • startsWith(): Gibt einen booleschen Wert zurück, der angibt, ob sich die Parameterzeichenfolge am Anfang der Quellzeichenfolge befindet.

  • endsWith(): Gibt einen booleschen Wert zurück, der angibt, ob sich die Parameterzeichenfolge am Ende der Quellzeichenfolge befindet.

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true
Nach dem Login kopieren
 

Diese drei Methoden unterstützen alle einen zweiten Parameter, der die Startposition der Suche angibt.

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false
Nach dem Login kopieren

Der obige Code gibt an, dass bei Verwendung des zweiten Parameters n endsWith< verwendet wird 🎜> verhält sich anders als die anderen beiden Methoden. Es zielt auf die ersten n Zeichen ab, während die anderen beiden Methoden von der nten Position bis zum Ende der Zeichenfolge zielen. 1.3.

padStart()

, padEnd() ES2017

strings Funktion eingeführt Vervollständigen Sie die Länge. Wenn eine Zeichenfolge nicht lang genug ist, wird sie am Anfang oder am Ende vervollständigt.

padStart() wird für die Kopfvervollständigung und padEnd() für die Schwanzvervollständigung verwendet.

&#39;x&#39;.padStart(5, &#39;ab&#39;) 

// &#39;ababx&#39;

&#39;x&#39;.padStart(4, &#39;ab&#39;) // &#39;abax&#39;

&#39;x&#39;.padEnd(5, &#39;ab&#39;) // &#39;xabab&#39;

&#39;x&#39;.padEnd(4, &#39;ab&#39;) // &#39;xaba&#39;
Nach dem Login kopieren
 

Eine häufige Verwendung von

padStart

besteht darin, die Anzahl der Ziffern für die numerische Vervollständigung anzugeben. Der folgende Code generiert eine numerische Zeichenfolge mit

10 Ziffern.

&#39;1&#39;.padStart(10, &#39;0&#39;) 

// "0000000001"

&#39;12&#39;.padStart(10, &#39;0&#39;) // "0000000012"

&#39;123456&#39;.padStart(10, &#39;0&#39;) // "0000123456"

另一个用途
Nach dem Login kopieren
 

ist das Eingabeaufforderungszeichenfolgenformat.

&#39;12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-MM-12"

&#39;09-12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-09-12"
Nach dem Login kopieren
 

1.4.

Vorlagenzeichenfolge

In In der traditionellen

JavaScript-Sprache wird die Ausgabevorlage normalerweise so geschrieben.

$(&#39;#result&#39;).append(

  &#39;There are <b>&#39; + basket.count + &#39;</b> &#39; +

  &#39;items in your basket, &#39; +

  &#39;<em>&#39; + basket.onSale +

  &#39;</em> are on sale!&#39;);
Nach dem Login kopieren

Die obige Schreibmethode ist ziemlich umständlich und unpraktisch.

ES6 führt Vorlagenzeichenfolgen ein, um dieses Problem zu lösen Problemfrage.

function resulttemplate()

        {

            var basket = { "supplies": [{ "name": "张三" }, { "name": "李四" }, { "name": "lili" }] }

            var mess = `<table>`;

            for (var i = 0; i < basket.supplies.length; i++)

            {

                mess += `<tr><td> 姓名</td>

                    <td> ${basket.supplies[i].name}</td></tr>`;

            }

            mess += `</table>`;

            $(&#39;#result&#39;).append(mess);

var ddd=`<table>`;

for(let j of basket.supplies)

{

     ddd+=`<tr><td>${j.name}</td></tr>`;

}

ddd+=`</table>`;

console.log(ddd);

        }
Nach dem Login kopieren
 

Vorlagenzeichenfolge (

Vorlagenzeichenfolge) ist eine erweiterte Version von Zeichenfolge, Verwenden Sie Backticks (`), um zu identifizieren. Es kann als gewöhnliche Zeichenfolge verwendet werden oder zum Definieren mehrzeiliger Zeichenfolgen oder zum Einbetten von Variablen in Zeichenfolgen.

Alle Leerzeichen und Zeilenumbrüche in der Vorlagenzeichenfolge bleiben erhalten. Wenn Sie diesen Zeilenumbruch nicht möchten, können Sie ihn mit der Methode

trim entfernen.

Das obige ist der detaillierte Inhalt vonZusammenfassung der hochfrequenten Nutzung von ES6-String-Erweiterungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!