Share
Welkom bij het tweede deel van mijn serie over ECMAScript 6! Een van mijn favoriete nieuwe webstandaarden van Microsoft Edge, de nieuwe browser-renderingsengine die we bij Microsoft maken, is de uitgebreide ondersteuning die het biedt voor ECMAScript 6. Dus ik heb deze serie geschreven om je door enkele van de coole dingen te loodsen die je kunt doen met ECMAScript 6 bij het schrijven van grote applicaties voor het web.
In de eerste aflevering heb ik Class en Inheritance behandeld. In dit artikel zal ik me richten op sjabloonkoorden gebaseerd op mijn persoonlijke ervaring met het maken van ingesloten expressies.
Wanneer ik aan Babylon.js werk, heb ik te maken met shaders-code die voor de begrijpelijkheid te zien is als een grote stapel tekst (die eruitziet als C).
Je kunt een voorbeeld vinden in deze GitHub-repository.
Het probleem bij het verwerken van lange tekst in JavaScript is de regelterugloop. Hoe vaak heb je dit soort dingen geschreven?
var myTooLongString = "Een lange tijd geleden, ver weg in een sterrenstelsel," + "ver weg ..." + "Het is een periode van burgeroorlog." + "Rebellen-ruimteschepen," + "vanuit een verborgen basis slaan, hebben" + "hun eerste overwinning tegen" + "het kwaadaardige Galactische rijk gewonnen.";
Wanneer je moet werken met shaders die meer dan 200 lijnen lang zijn, wordt dit al snel een echte pijn.
Gelukkig wordt ECMAScript 6 geleverd met de nieuwe sjabloonstrings-functie. Een sjabloonreeks ondersteunt onder andere direct multiline-reeksen:
var myTooLongString = 'Een lange tijd geleden, in een sterrenstelsel ver weg ... Het is een periode van burgeroorlog. Rebellen-ruimteschepen, die vanuit een verborgen basis slaan, hebben hun eerste overwinning tegen het kwade Galactische rijk gewonnen ';
Omdat alle tekens significant zijn binnen een sjabloonreeks, kan ik geen voorloopspaties toevoegen.
Nu hebben we als JavaScript-ontwikkelaars drie manieren om strings te definiëren:
Ondersteuning van meerdere regels is niet het enige kenmerk van sjabloonreeksen. Inderdaad, u kunt ook tekenreeksen gebruiken om tijdelijke aanduidingen te vervangen door variabelenwaarden, zoals u misschien al hebt gedaan printf in C / C ++ of String.Format in C #:
Accentsconagua
var items = []; items.push ( "banana"); items.push ( "tomato"); items.push ("light saber"); var totaal = 100,5; result.innerHTML = 'Je hebt $ items.length item (s) in je winkelmandje voor een totaal van $$ total';Deze code produceert de volgende uitvoer:
Je hebt 3 item (s) in je winkelmandje voor een totaal van $ 100.5
Best handig, toch?
Onthoud de ECMAScript 5-weg:
result.innerHTML = "Je hebt" + items.length + "item (s) in je winkelmandje voor een totaal van $" + totaal;
De laatste fase van de specificatie van sjabloonreeksen gaat over het toevoegen van een aangepaste functie vóór de reeks zelf om een te maken gelabeld sjabloonstring:
var myUselessFunction = function (strings, ... values) var output = ""; for (var index = 0; index < values.length; index++) output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myUselessFunction 'You have $items.length item(s) in your basket for a total of $$total';
De functie hier wordt gebruikt om toegang te krijgen tot zowel het constante tekenreeksgedeelte als de geëvalueerde variabelenwaarden.
In het vorige voorbeeld zijn tekenreeksen en waarden de volgende:
Zoals je kunt zien, is elke waarde [n] omgeven door constings strings (strings [n] en strings [n + 1]).
Hiermee kunt u bepalen hoe de uiteindelijke uitvoerreeks wordt gebouwd. In mijn vorige voorbeeld heb ik alleen het basisgedrag van sjabloonkoorden gereproduceerd, maar we kunnen verder gaan en coole verwerking aan uw reeks toevoegen.
Hier is bijvoorbeeld een stuk code om strings te blokkeren die aangepaste DOM-elementen proberen te injecteren:
var items = []; items.push ( "banana"); items.push ( "tomato"); items.push ("light saber"); var total = "Probeert uw site te kapen
"; var myTagFunction = function (strings, ... values) var output =" "; for (var index = 0; index < values.length; index++) var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) // Far more complex tests can be implemented here :) return "String analyzed and refused!"; output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myTagFunction 'You have $items.length item(s) in your basket for a total of $$total';Getagde sjabloonstrings kunnen worden gebruikt voor veel dingen, zoals beveiliging, lokalisatie, het maken van uw eigen domeinspecifieke taal, enz.
Tag-functies hebben een speciale optie bij het benaderen van tekenreeksen: ze kunnen gebruiken strings.raw om de niet-omgevormde tekenreekswaarden te krijgen. Bijvoorbeeld in dit geval \ n zal niet worden gezien als slechts één personage, maar eigenlijk twee: \ en n.
Het belangrijkste doel is om u toegang te verlenen tot de tekenreeks zoals deze is ingevoerd:
var myRawFunction = function (strings, ... values) var output = ""; for (var index = 0; index < values.length; index++) output += strings.raw[index] + values[index]; output += strings.raw[index] console.log(strings.length, values.length); return output; result.innerHTML = myRawFunction 'You have $items.length item(s) in your basket\n.For a total of $$total';
Deze code genereert de volgende uitvoer:
U heeft 3 item (s) in uw winkelmandje \ n.Voor een totaalbedrag van $ 100.5
U kunt ook een nieuwe functie van String gebruiken: String.raw (). Deze functie is een ingebouwde functie die precies doet wat mijn vorige voorbeeld doet:
result.innerHTML = String.raw 'U heeft $ items.length item (s) in uw winkelmandje \ n.Voor een totaal van $$ totaal';
Microsoft Edge en de nieuwste versies van Chrome (41+), Opera (28+) en Firefox (35+) support-template-strings, en u kunt hier het niveau van algehele ECMAScript 6-ondersteuning volgen. Dus als u het moderne web target, is er geen reden om sjabloonkoorden niet te omarmen.
Voor een volledig overzicht van de nieuwe webstandaarden en -functies in Microsoft Edge-achtige WebAudio, kunt u de volledige lijst bekijken op dev.modern.ie/platform/status.
Het zal je misschien een beetje verbazen, maar Microsoft heeft een heleboel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Bekijk mijn eigen:
Of de leerserie van ons team:
En enkele gratis tools: Visual Studio Community, Azure Trial en cross-browser testtools voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
