Share
ES6 ist die Zukunft von JavaScript und ist bereits da. Es handelt sich um eine fertige Spezifikation, und es bringt viele Eigenschaften mit, die eine Sprache benötigt, um mit den Anforderungen des Internets von heute konkurrenzfähig zu bleiben. Nicht alles in ES6 ist für Sie, und in dieser kleinen Serie von Beiträgen werde ich Funktionen zeigen, die sehr praktisch und bereits verwendbar sind.
Wenn Sie sich den von mir geschriebenen JavaScript-Code ansehen, werden Sie feststellen, dass ich immer einfache Anführungszeichen zum Definieren von Zeichenfolgen anstelle von Anführungszeichen verwende. JavaScript ist in beiden Fällen in Ordnung - die folgenden zwei Beispiele machen genau dasselbe:
var Tier = "Kuh"; var Tier = "Kuh";
Ich bevorzuge einfache Anführungszeichen, weil es vor allem einfacher ist, HTML-Strings mit richtig zitierten Attributen auf diese Weise zusammenzusetzen:
// Bei einfachen Anführungszeichen müssen // die Anführungszeichen um den Klassenwert var nicht ersetzt werden, aber = ''; // Dies ist ein Syntaxfehler: var but = ""; // das funktioniert: var but ="";
Jetzt müssen Sie nur noch einen Fluchtpunkt verwenden, wenn Sie ein einzelnes Anführungszeichen in Ihrem HTML-Code verwenden. Dies sollte sehr selten vorkommen. Das einzige, woran ich denken kann, ist Inline-JavaScript oder CSS, was bedeutet, dass Sie sehr wahrscheinlich etwas zwielichtiges oder verzweifeltes zu Ihrem Markup machen. Selbst in Ihren Texten ist es wahrscheinlich besser, kein einzelnes Zitat zu verwenden, sondern das typografisch ansprechendere..
Nebenbei gesagt: Natürlich verzeiht HTML genug, um die Anführungszeichen wegzulassen oder einfache Anführungszeichen um ein Attribut zu verwenden, aber ich bevorzuge, lesbare Markups für Menschen zu erstellen, anstatt sich auf die Vergebung eines Parsers zu verlassen. Wir haben den HTML5-Parser dazu verzeihen lassen, weil die Leute in der Vergangenheit schreckliche Markups geschrieben haben, nicht als Entschuldigung dafür, dies weiterhin zu tun.
Ich habe in den DHTML-Tagen von document.write genug gelitten, indem ich ein Dokument innerhalb eines Framesets in einem neuen Popup-Fenster und andere Abscheulichkeiten erstellt habe, um das Escape-Zeichen nicht mehr verwenden zu wollen. Manchmal brauchten wir dreifache, und das war sogar, bevor wir in unseren Redakteuren Farbcodierung hatten. Es war eine Katastrophe.
Ein weiterer Grund, warum ich einfache Anführungszeichen vorziehen möchte, ist, dass ich in meiner Zeit viel PHP für sehr große Websites geschrieben habe, auf denen die Leistung eine große Rolle spielte. In PHP gibt es einen Unterschied zwischen einfachen und doppelten Anführungszeichen. Strings mit einfachen Anführungszeichen enthalten keine Substitutionen, doppelte Anführungszeichen dagegen. Das bedeutete in den Tagen von PHP 3 und 4, dass die Verwendung von einfachen Anführungszeichen viel schneller war, da der Parser nicht durch die Zeichenfolge gehen musste, um Werte zu ersetzen. Hier ist ein Beispiel, was das bedeutet:
Das Tier ist $ animal und sein Sound ist $ sound Echo "Das Tier ist $ animal und sein Sound ist $ sound"; // => Das Tier ist eine Kuh und sein Klang ist moo?>
JavaScript hatte diese Substitution nicht, weshalb wir Strings verketten mussten, um das gleiche Ergebnis zu erzielen. Dies ist ziemlich unhandlich, da Sie ständig in Anführungszeichen springen müssen.
Accentsconagua
var Tier = "Kuh"; var sound = 'moo'; alert ('Das Tier ist' + Tier + 'und sein Ton ist' + Ton '); // => "Das Tier ist eine Kuh und es klingt moo"Dies wird bei längeren und komplexeren Strings und insbesondere beim Erstellen von HTML sehr unübersichtlich. Und höchstwahrscheinlich werden Sie früher oder später mit einem Linting-Tool enden, das sich nach einem Leerzeichen nach einem Pluszeichen am Ende einer Zeile beklagt. Dies basiert auf dem Problem, dass JavaScript keine mehrzeiligen Zeichenfolgen hat:
// das funktioniert nicht var list = '
Um das Chaos umzugehen, das die String-Verarbeitung und Verkettung in JavaScript ist, haben wir das gemacht, was wir immer tun: Wir haben eine Bibliothek geschrieben. Es gibt viele HTML-Templatebibliotheken, wobei Mustache.js wahrscheinlich das wichtigste war. Alle folgen ihrer eigenen, nicht standardisierten Syntax und arbeiten in dieser Einstellung. Es ist ein bisschen so, als würden Sie sagen, dass Sie Ihre Inhalte in Markdown schreiben und dann erkennen, dass es viele verschiedene Ideen gibt, was "Markdown" bedeutet.
Mit dem Aufkommen von ES6 und seiner Standardisierung können wir uns freuen, da JavaScript jetzt ein neues Kind im Umgang mit Strings hat: Template Strings. Die Unterstützung von Vorlagenzeichenfolgen in aktuellen Browsern ist ermutigend: Chrome 44+, Firefox 38+, Microsoft Edge und WebKit sind alle an Bord. Leider ist Safari dies nicht, aber es wird dorthin gelangen.
Das Genie der Vorlagenzeichenfolgen besteht darin, dass ein neues Zeichenfolge-Trennzeichen verwendet wird, das weder in HTML noch in normalen Texten verwendet wird: das Backtick (').
Bei Verwendung dieser Option haben wir jetzt eine Zeichenfolgenausgabe in JavaScript:
var Tier = "Kuh"; var sound = 'moo'; alert ('Das Tier ist $ Tier und sein Ton ist $ Ton'); // => "Das Tier ist eine Kuh und es klingt moo" Das $ Das Konstrukt kann einen beliebigen JavaScript-Ausdruck annehmen, der einen Wert zurückgibt. Sie können beispielsweise Berechnungen durchführen oder auf die Eigenschaften eines Objekts zugreifen:
var out = 'zehn mal zwei ist $ 10 * 2'; // => "zehn mal zwei ist insgesamt 20" var animal = name: 'cow', ilk: 'bovine', vorne: 'moo', hinten: 'milk', alert ('$ $ animal.name ist von $ animal.ilk ilk, ein Ende ist für $ animal.front, das andere für $ animal.back '); // => / * Die Kuh ist vom Rind, ein Ende ist für das Moo, das andere für die Milch * / Das letzte Beispiel zeigt Ihnen auch, dass mehrzeilige Zeichenfolgen kein Thema mehr sind.
Sie können Vorlagenzeichenfolgen auch mit einem Tag versehen. Dies ist der Name einer Funktion, die aufgerufen wird und die Zeichenfolge als Parameter abruft. Sie können beispielsweise die resultierende Zeichenfolge für URLs kodieren, ohne auf den schrecklich genannten Namen zurückgreifen zu müssen encodeURIComponent die ganze Zeit.
Funktion urlify (str) return encodeURIComponent (str); urlify 'http://beedogs.com'; // => "http% 3A% 2F% 2Fbeedogs.com" "Woah $ $ $% $ ^ $" '; // => "Woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// Verschachtelung funktioniert auch: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Das funktioniert zwar, setzt aber auf impliziten Array-zu-String-Zwang. Der an die Funktion gesendete Parameter ist kein String, sondern ein Array von Strings und Werten. Wenn ich die hier gezeigte Art und Weise verwende, wird sie der Bequemlichkeit halber in eine Zeichenfolge konvertiert. Richtig ist jedoch der direkte Zugriff auf die Arraymitglieder.
Innerhalb der Tag-Funktion können Sie nicht nur die vollständige Zeichenfolge, sondern auch deren Teile erhalten.
Funktions-Tag (Zeichenfolgen, Werte) console.log (Zeichenfolgen); console.log (Werte); console.log (Zeichenfolgen [1]); tag 'you $ 3 + 4 it'; / * => Array ["du", "it"] 7 it * /
Es gibt auch ein Array der rohen Zeichenfolgen, die Ihnen zur Verfügung gestellt werden. Das bedeutet, dass Sie alle Zeichen in der Zeichenfolge einschließlich Steuerzeichen erhalten. Angenommen, Sie fügen beispielsweise einen Zeilenumbruch mit ein \ n. Sie erhalten den doppelten Whitespace in der Zeichenfolge, aber die \ n Zeichen in den rohen Zeichenketten:
Funktions-Tag (Zeichenfolgen, Werte) console.log (Zeichenfolgen); console.log (Werte); console.log (Zeichenfolgen [1]); console.log (string.raw [1]); tag 'du $ 3 + 4 \ nit'; / * => Array ["du", "it"] 7 it \ nit * /
Template-Strings sind einer der kleinen, kleinen Gewinne in ES6, die jetzt verwendet werden können. Wenn Sie ältere Browser unterstützen müssen, können Sie Ihre ES6 natürlich auf ES5 übertragen. Sie können einen Funktionstest für die Unterstützung von Vorlagenzeichenfolgen mithilfe einer Bibliothek wie featuretests.io oder mit dem folgenden Code durchführen:
var templatestrings = false; try neue Funktion ("'2 + 2'"); templatestrings = true; catch (err) templatestrings = false; if (templatestrings) //… Hier sind einige weitere Artikel zu Vorlagenzeichenfolgen:
Dieser Artikel ist Teil der Webentwicklungsserie von Microsoft-Experten für technisches Wissen über praktisches JavaScript-Lernen, Open-Source-Projekte und bewährte Vorgehensweisen für Interoperabilität, einschließlich Microsoft Edge-Browser und der neuen EdgeHTML-Rendering-Engine.
Wir empfehlen Ihnen, Browser und Geräte einschließlich Microsoft Edge, dem Standardbrowser für Windows 10, mit kostenlosen Tools auf dev.modern.IE zu testen:
Umfassendes technisches Lernen von Microsoft Edge und der Webplattform durch unsere Ingenieure und Evangelisten:
Weitere kostenlose plattformübergreifende Tools und Ressourcen für die Webplattform:
